Vue：动态构建用户界面的渐进式js框架

官网：https://cn.vuejs.org/

Vue【模板语法】有2大类：

1.插值语法：

   功能：用户解析标签体内容

   写法：{{ xxxx }} , xxxx会作为表达式去解析，且可以自动读取到data中的属性

2.指令语法：

   功能：用于解析标签（标签属性、标签内容、绑定事件。。。）

   写法：v-bind:href="xxxx" 或简写为： :href="xxxx"

1.单项数据绑定（v-bind）:数据只能从data流向页面

2.双向数据绑定（v-model）:数据不仅能从data流向页面，还可以从页面流向data

备注：

1.双向数据绑定一般都是针对表单类元素

2..v-model:value  可以简写为v-model，因为v-model默认搜集value值

data的两种写法：

1.对象式：非组件化编码时可以写成对象，也可以写函数 data :{msg:'hello'}

2.函数式：组件化编码必须使用函数式的data  例：data() { return { msg:'hello'}}

Vue数据绑定的原理

1. vue会监视data中所有层次对象的属性

2. 对象中的属性数据通过添加set方法来来实现监视

3. 数组中也实现了监视: 重写数组一系列更新元素的方法，做了两件事：

   1).调用原生对应的方法对数组进行处理

   2).去更新界面

Vue【数据代理】：

data

_data

数据代理底层实现使用 Object.defineProperty()

//模拟数据代理
let _data = {msg:"hello"}
let vm = {}
 
Object.defineProperty(vm,'msg',{
    set(value){
        _data.msg=value
    },
    get(){
         return _data.msg
    }
})

这样vm中就有msg对象，修改_data中的对象，vm中也会修改。反之也会修改

注意：data中的数据，不能使用this初始化赋值另外一个字段的值

data(){

msg:’I am jack’,

hello：this.msg

}

错误！！！

【事件处理】：

<button @click="show2($event,56)">调用show2</button>

methods:{
    show(event) {
         //event 指调用者的事件
        //event.target.innerText
    },
    show2(event,number) {
         //event 指调用者的事件
        //event.target.innerText
    },
}

【计算属性 】  

渲染：{{ fullName }}

//1.初次渲染会调用；2.依赖的属性改变时会调用，不变不调用，有缓存机制，因此效率更高

//computed 属性默认只有 getter (即只做读取)，不过在需要时你也可以提供一个 setter

computed:{   // 简写(默认)（只有getter）

  fullName : function() {

     return this.firstName + this.lastName

 }

}

//完整写法
computed:{
   fullName :{
        get(){
           return this.firstName + this.lastName
        },
       set(value){
          const arr = value.split('-')
          this.firstName=arr[0]
          this.lastName=arr[1]
       }
    }
}

【数据监视】：

watch

1.当被监视的属性变化时，回调函数自动调用，进行相关操作

2.属性必须存在，才能进行监视

3.监视的两种写法

 (1).new Vue时传入watch配置

 (2).通过vm.$watch监视

4.默认是浅层次的监视，对于对象里面的数据的变化无法监视到

computed和watch之间的区别：

1.只要是computed能完成的功能，watch都可以完成

2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作

data:{

   firstName:'张',

   lastName:'三'

},

watch:{

   //watch中的firstName什么时候调用？data中的firstName被改变的时候调用

   firstName(newValue,oldValue) {

   },

   lastName() {

   }

}

//写法2

vm.$watch('firstName', function(nval, oval) {

   alert('firstName值的变化 :' + oval + ' 变为 ' + nval + '!');

});

深度监视: （默认的监视不会监视到数组里面对象的变化，需要用到深度监视）

data() {

   return {

     todos: [

       { id: '001', name: '抽烟', done: true },

       { id: '002', name: '喝酒', done: false },

       { id: '003', name: '烫头', done: true },

     ],

   }

 }

监视

 watch: {

   todos: {

     deep: true, // 开启深度监视，可以监视对象里面元素数据的变化

     handler(value) {

       localStorage.setItem('todos', JSON.stringify(value))

     },

   },

 }

【样式绑定】：

参考：https://www.runoob.com/vue2/vue-class-style.html

:class="myStyle"

:class="{ 'active' : isActive, 'text-danger' : hasError }"

渲染后：<div class="active text-danger"></div>

data: {

   isActive: true,

   hasError: true

}

【条件渲染】：

v-if:

适用于：切换频率很低的场景

特点：不展示的DOM节点直接被删除

v-show:

适用于：切换频率很高的场景

特点：不展示的DOM节点没有被删除，仅仅是使用display:none隐藏

循环语句：遍历数组、对象、字符串

v-for:

<li v-for="site in sites">{{ site.name }} </li>

【过滤器】：

//全局注册的过滤器
Vue.filter('dateFormater',function(value,str='YYYY-MM-DD'){
    return moment(value).format(str)
})
 
//使用：
<div id="root">
    <h2>显示格式化后的时间</h2>
    <h3>{{time | dateFormater}}</h3>
    <h3>{{time | dateFormater('YYYY-MM-DD HH:mm:ss')}}</h3>
</div>
 
<div id="root2">
    <h2>显示格式化后的时间</h2>
    <h3>{{time | dateFormater}}</h3>
    <h3>{{time | dateFormater('YYYY-MM-DD HH:mm:ss')}}</h3>
</div>

【自定义指令】：

使用的时候前面要加v-,比如定义的指令名称是text-upper，使用的时候要用v-text-upper='name'

 //自定义一个指令（全局） el->element  binding指元素的值
Vue.directive('text-upper', function (el, binding) {
    el.innerText = binding.value.toUpperCase()
})

//定义局部指令
new Vue({
    el: '#root',
    data() {
        return {
            name: 'hAh',
        }
    },  
    directives:{
        'text-lower':function(el,binding){
            el.innerText=binding.value.toLowerCase()
        }
    }
})

//使用：
<div id="root">
    <h2 v-text-upper="name"></h2>
    <h2 v-text-lower="name"></h2>
</div>

【自定义插件】：

定义一个插件wdj.js如下：

const wdj = {}
 
wdj.install = function (Vue, options) {
    //添加两个全局指令
    Vue.directive('upper-text', function (el, binding) {
        el.innerText = binding.value.toUpperCase()
    })
    Vue.directive('lower-text', function (el, binding) {
        el.innerText = binding.value.toLowerCase()
    })
    //给Vue自身添加属性
    Vue.projectName = '食堂管理系统'
    Vue.MyVersion = 'V1.0'
    Vue.ShowInfo = function () {
        console.log('我是一些信息')
    }
 
    //给vue原型上添加数据，供vm使用
    Vue.prototype.$random = function (min, max) {
        return Math.floor(Math.random() * (max - min) + min)
    }
}

 //使用：
    <div id="root">
        <h1 v-upper-text='name'></h1>
        <h1 v-lower-text='name'></h1>
        <h2>{{$random(2,8)}}</h2>
    </div>

      //Vue会帮我们去调用wdj.js这个插件里的install方法
        Vue.use(wdj)
 
        console.log(Vue.projectName)
        console.log(Vue.MyVersion)
        Vue.ShowInfo()
 
        const vm = new Vue({
            el: '#root',
            data() {
                return {
                    name: 'wangDIjie'
                }
            },
        })