vue总结1

vue总结1：

官网：https://cn.vuejs.org
API：https://cn.vuejs.org/v2/api/

cli3:脚手架3环境搭建
1、vue-v查看vue版本
npm unstall vue-cli -g 非脚手架3.x时卸载
2、npm install -g @vue/cli 装3
npm install -g @vue/cli-init 桥接2
3、创建vue项目（工程化，模块化，自动化）
1) vue init webpack-simple 目录名
2) 一直回车 填入信息
3) cd 目录名
4) npm i 安装依赖
5) npm run dev 启动开发环境
cli3 项目环境速搭
1) vue init webpack-simple 目录 --> cd 目录 --> npm i -->npm run dev (cli2环境速搭)
2) vue create 目录 --> 自定义 --> …–>cd 目录 --> npm run serve (cli3环境速搭)

碎小知识整理

1. 模板表达式(数据出现的地方，都可以出现表达式)

{{数据本身 | data的属性 | 实例属性 | 变量 | 差值表达式 }} Mustache语法
注意：如果你为一个计算属性使用了箭头函数，则 this 不会指向这个组件的实例，不过你仍然可以将其实例作为函数的第一个参数来访问。
例：

  <div id="app">
     {{ message }}
  </div>
  var app = new Vue({
  	  el: '#app',
  	  data: {
  	    message: 'Hello Vue!'
  	  }
  })

2. 计算属性

   计算属性：是一个函数，所依赖的元数据变化时，就会再次执行，会缓存
   类型：{ [key: string]: Function | { get: Function, set: Function } }
   注意：不应该使用箭头函数来定义 method 函数 (例如 plus: () => this.a++)。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined。
   computed:{
   计算属性:function(){return 返回值}
   使用:{{计算属性}}
   v-指令=“计算属性”:属性=“计算属性”
   }

例：

var vm = new Vue({
			  data: { a: 1 },
			  computed: {
			   // 仅读取
			    aDouble: function () {
			      return this.a * 2
			    },
			    // 读取和设置
			    aPlus: {
			      get: function () {
			        return this.a + 1
			      },
			      set: function (v) {
			        this.a = v - 1
			      }
			    }
			  }
			})
			vm.aPlus   // => 2
			vm.aPlus = 3
			vm.a       // => 2
			vm.aDouble // => 4

	计算属性与method的区别:     方法会每次调用，计算属性不会
    计算属性的性能高, 适合做筛选，基于它们的响应式依赖进行缓存的
    方法：适合在列表渲染使用，强制渲染执行

methods：类型：{ [key: string]: Function }
示例：

var vm = new Vue({
  			  data: { a: 1 },
  			  methods: {
  			    plus: function () {
  			      this.a++
  			    }
  			  }
  			})
  			vm.plus()
  			vm.a // 2

3. 属性检测 | 数据监听

watch:{
数据名:‘method函数名’ 数据名==data的数据
数据名:函数体(new,old)
数据名:{
handler:fn(new,old),
deep:true 深度检测
immediate:true 首次运行
}
}

特点：无需返回值，无需渲染，
场景：需要在数据变化时执行异步或开销较大的操作时

4. 样式操作

v-bind:class=“data数据|data属性|变量|插值表达式|计算属性”
:class/style = “数据” 数据类型：字符/对象/数组
:class=" ‘active1 active2’ "布尔值决定样式 是否使用
:class/style = “[{css属性名:值},{css属性名小驼峰 : 值}]”

5. 指令

指令:扩展了html语法功能，区别了普通的html属性
vue自带的指令：v-text/v-html/v-bind/v-for/v-model/v-on/v-show
v-show=“布尔” v-if=“布尔”
区别：操作css 操作dom
场景：适合频繁切换 适合不频繁切换
性能：初始渲染消耗 频繁切换回有消耗
其他指令: https://cn.vuejs.org/v2/api/#指令

指令(directive):

指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

v-text / v-html / v-bind / v-on / v-model / v-for / v-show / v-else / v-else-if
自定义指令：指令是个函数 | 对象，用来操作dom的，里面的this返回window
1、全局：Vue.directive(‘指令名不带v-’,函数(el,binding))
el == 使用指令的DOM元素
binding是个对象含有传入的参数(binding.value)
2、局部:定义在选项里面
directives:{
指令名不带v-: 函数(el,binding){}
}
指令是个函数，可以是个对象
{
钩子函数
inserted:fn(el,binding) 绑定制定元素插入到父节点是调用
bind:fn 指令第一次绑定到元素时调用
update:fn 指令所在的元素的model层的数据，view有更新请求是
componentUpdated:fn 更新完成时
}
简写方式：bind + update

6. 事件

绑定行间事件：<xx v-on:事件名=“方法名($event,参数)"><xx@事件名="方法名($event,参数)”>
绑定自定义事件：
使用场景：在一个组件实例上手动侦听事件时
定义 :vm.$ on(‘自定义事件名’|[‘自定义事件名1’])
销毁 ：vm.$ off(‘自定义事件名’|[‘自定义事件名1’，‘自定义事件名2’])
触发：vm.$ emit(自定义事件名1，参数)
自定义事件名：使用kebab-case的事件名
使用场景：在一个组件实例上手动侦听事件时