vue 分类

ref 语法

ref是一个函数，接收一个参数，返回一个响应对象，在未来可以检测到改变并作出对应的响应

import { ref } from "vue"
setup() {
  const count = ref(0)
  const double = computed(() => {
    return count.value * 2
  })
  const increase = () => {
    count.value++
  }
  return {
    count,
    increase,
    double
  }
}

Emilia Zhen大约 6 分钟

nuxt

安装

vue-init nuxt-community/starter-template dddname
npm install
npm run dev

npm i vue-cli -g
vue init nuxt/starter # 初始化Nuxt.js项目

Emilia Zhen大约 7 分钟

状态管理

Vuex

Vuex是一个专为Vue.js应用程序开发的状态管理模式每一个Vuex应用的核心就是store(仓库)，store基本上就是一个容器，它包含着你的应用中大部分的状态

npm install vuex -S

Emilia Zhen大约 2 分钟

路由

后端路由：监听不同的URI(地址)，做不同的请求处理。 前端路由：是专门为SPA(单页应用程序)服务，也是监听不同的地址，切换不同的的地址，做页面的切换

引入vue-router.js，创建组件模版对象

<template id="indexTpl">
  <h1>这是首页</h1>
</template>
<template id="productTypeTpl">
  <div>
    <h2>这是产品{{ $route.params.id }}:{{ productName }}</h2>
    <router-link :to="'/productType/' + $route.params.id + '/list'">Show</router-link>
    <router-link :to="{ name: 'showList' }">AAA</router-link>
    <router-view></router-view>
  </div>
</template>

Emilia Zhen大约 4 分钟

配置

webpack

样式处理

style-loader 、css-loader、less-loader 、 scss-loader

安装、

npm i style-loader css-loader -D
      less-loader scss-loader

Emilia Zhen大约 5 分钟

组件

组件就是对视图的封装，方便重复使用
模块是对功能逻辑的封装

方式一

Vue.extend结合Vue.component创建

//利用Vue.extend()创建一个组件模板对象
var login = Vue.extend({ template: '<div>登录</div>' })
//使用Vue.component()注册组件
Vue.component('myLogin', login)

Emilia Zhen大约 6 分钟

开始

Vue 是基于 M(数据) V(视图) VM(调度者)这种设计模式开发出来的一个框架 双向通信 mvc(控制) 单向通信 数据变化交给控制处理才能视图变化

基本编码步骤

引入vue.js
在 script 标签部分创建一个 Vue 实例

new Vue({
        el: '#app', //通过选择器找到一个让vm实例监管的区域
        data: {
              message: 'hello'
        },
        methods: {
             handler() {
                  ...
              }
        }
})

Emilia Zhen大约 6 分钟