vue特点

• • mvvm框架
  • 响应式(声明式)
  • 组件化(支持自定义组件)
  • 丰富的指令(Dom功能的抽象)
  • 基于选项(template，data，computed，watch，methods)
  • vue文档集中ue
  • Vue生态丰富且简单
  • 渐进式()

Veu和Dom开发思想

• • Dom开发思想：当我们需要在交互事件中改变视图时，使用DOM选择器选中目标节点、再使用DOM方法直接改变视图。
  • Vue开发思想：当我们需要在交互事件中改变视图时，先在data选项中声明一个合适的变量，再在交互事件中改变这个声明式变量即可，视图自动更新，这是一种间接的操作。

常用的Vue指令有哪些

文本类指令：

• • {{}}文本插值：用于绑定节点的文本。{{}}这种绑定值的方式会出现一闪而过的效果，使用v-cloak来解决。
  • v-text：用于绑定节点的文本，大多数的时候，可以和{{}}替换。
  • v-once：用于指定节点的动态内容只绑定一次，当前节点中所对应的变量发生变化时视图不更新。一般情况下，v-once只能和{{}}一起用。
  • v-once和v-cloak：都是不需要接受表达式来做为‘值’。
  • v-html：用于动态绑定的html节点，相当于DOM中的innerHTML,这个指令默认已经做了“防xss攻击”的处理。

动态属性指令：

v-bind：用于动态绑定节点的属性（比如：title ，value，style等）

事件绑定指令：

v-on：用于给视图节点绑定各种js事件（比如：click，keyup等）

v-on简写@　　

基本语法:<div @事件名.事件修饰符='事件处理'></div>

v-on事件修饰符：.stop阻止事件冒泡，.prevent阻止默认事件，.enter绑定键盘Enter键盘。

表单绑定指令：

v-model：用于表单取值(表单双向绑定)　　比如：input，select

基本语法：<input style="text" v-model.表单修饰符='变量'>

v-model修饰符：.trim自动去除首尾空格　　.number隐式类型转换　　.lazy用于性能，当表单失去焦点时再进行双向绑定。

列表渲染：

v-for：用于渲染列表，对象，Number变量等。

渲染列表语法：<div v-for='(item,index) in array'></div>

渲染对象语法：<div v-for='(value,key,index) in obj'></div>

渲染Number变量语法：<div v-for='(num, index) in 5'></div>

条件渲染：

v-show：用于显示或隐藏视图节点，使用display:block / display:none 来实现的。

v-if，v-else-if，v-else：用于显示或隐藏视图节点，真正的移除或插入视图节点。

v-show和v-if的区别

v-if是节点的插入或移除，比较耗费性能；v-show只是通过样式来实现显示与隐藏，性能消耗低。

注意：不建议v-if和v-for一起使用；如果一定要一起使用，在vue2中v-for优先级更好。

其它指令

v-pre：用于调试，可以阻止vue编译器对指令的编译

v-slot：插槽

自定义指令

computed作用:

1. 1. 当指令的表达式比较复杂时，我们建议使用计算属性来优化，提升视图模板中代码的可阅读性、可维护性。

   2. 用于缓存一个复杂的运算，避免组件更新时产生没有必要的性能损耗。计算属性本质上是一个函数，Vue会分析函数体中使用到了哪些声明式变量，有且仅有这些声明式变量发生变化时，计算属性才会重新执行。

在Vue中，计算属性能计算哪些性质的变量

data，vuex数据，$route，计算一切__ob__的数据。

如何让计算属性同时支持get/set功能

const app = new Vue({
   el:'#app',
   computed:{
        he：{
            get(){

　　　　　　　},
            set(){

　　　　　　　},
        },
    },      
})

constapp =newVue({    
　　 el:'#app',
    watch：{
        info：{
           deep：true,
　　　　　　　handler(newInfo,oldInfo){
　　　　　　　　const.log(this.info)
　　　　　　}
        },
　　　　//推荐写法
　　　　　'info.child.age' (newAge, oldAge) {

    },
})