Vue 指令

1. 什么是Vue？　　渐进式JavaScript框架，是数据驱动的框架，是一个MVVM框架

2. angular Vue,react 都是把后端提供给前端的不断变化的数据，实时的渲染为用户的视图

3. Vue的生态特别好

4. Vue的环境搭建

　　开发版本  <!-- 开发环境版本，包含了有帮助的命令行警告 -->　　　　　　　　 　　　　

　　　　<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

　　生产版本  <!-- 生产环境版本，优化了尺寸和速度 -->

　　　　<script src="https://cdn.jsdelivr.net/npm/vue"></script>

5. 模板 template 

       　　1) template和el同时存在 渲染的是template的内容

       　　2) 模板的内容不能只是文本

       　　3)根元素只能有一个

    <div id="box">
         {{a}}　　// 插值表达式
         <p>{{str}}</p>
         <p title="world">hello</p>     // 把“xxx”当变量处理
         <p v-bind:title="a">hello</p>  // 把“xxx”当变量处理
         <p :title="a">hello</p>        // 简写
         <img v-bind:src="'img/'+url+'.jpeg'" width="100" />
         <img v-bind:src=`img/${url}.jpeg` width="100" />
    </div>
    <script>
         var vm =  new Vue({
                el:"#box", //表示把vue的是实例挂载到id叫box的元素上
                          //body ,html不能挂载
                data:{
                    str:"hello world",
                    a:123,
                    url:"3"  //存储的图片的名字
                },
               // template:"<div><div>hello</div><div>world</div></div>"  //temlate指定渲染数据的模板 根元素只能有一个
               // template:"<div>hello {{a}}</div>"
           })
    </script>

6. v-on  事件监听的指令  v-on:事件="事件处理函数" 

        　　1）事件处理函数是放在methods里面

        　　2）实际处理函数如果调用时不传参数  默认传递的参数是$event

        　　3) 阻止冒泡 v-on:事件.stop，阻止默认的行为 v-on:事件.prevent

        　　4) 简写为 @

        　　5) 监听键盘事件  v-on:keyup.enter 回车  v-on:keyup.esc esc键

　　v-bind

　　　　　把变量的值绑定到标签的属性上   可以简写为 :

        　　　v-bind:style="{key:value....}"

        　　　v-bind:class="{'类名':布尔值的表达式}"  常用

        　　　v-bind:class="[类名1，类名2...]"

　　  v-if    是惰性的 条件不满足，不渲染 ，有更高的切换开销   如：

        　　   <p v-if="a>0">1</p>

        　　   <p v-else-if="a===0">0</p>

        　　   <p v-else>-1</p>

　　v-show 满足条件显示，不满足条件的就隐藏，有更高的初始渲染开销（不管初始条件是什么，元素总是会被渲染，并且只是简单地基于css进行切换）

　　v-for

　　　　1） 遍历数组  (item,index) in array 

　　　　　　一定要指定key值  表示列表中的每一项的标识

　　　　 2)  遍历对象 (value,key,index) in obj

　　　　3)遍历 数字 从1开始

　　　　4)遍历字符串

　　　　注意：不要把v-for 和v-if用在用一个元素上，因为v-for优先级比v-if高

　　v-model　　实现表单输入和应用状态之间的双向绑定

　　　　数据改变了，视图也会改变；视图改变了，数据也会改变。

　　　　v-bind 数据变了，视图会变；但是视图改变了，数据不会改变。

　　　　v-model 的修饰符

　　　　　　.lazy  　 　取代 input 监听 change 事件

　　　　　　.number 　输入字符串转为有效的数字

　　　　　　.trim   　　输入首尾空格过滤

　　 v-html  

　　　　更新元素的 `innerHTML`。**注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译**

　　v-text

　　　　更新元素的 `textContent`。如果要更新部分的 `textContent`，需要使用 `{{ Mustache }}` 插值。

　　　　　　<span v-text="msg"></span>

　　　　　　<!-- 和下面的一样 -->

　　　　　　<span>{{msg}}</span>

　　v-pre

　　　　跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译

　　v-cloak

　　　　这个指令保持在元素上直到关联实例结束编译

 

6. computed　　计算属性的双向绑定

　　常用的语法

       computed:{
            属性(){
                return 表达式或值
         }
         等价于
         属性:{
                　　get(){
                    　　return 表达式或值
                 　　}
                  }
        }

　　双向绑定

        computed:{
                属性:{
                     get(){
                          return 表达式或值
                     },
                     set(v) v就是修改后的值
                     {
                         ....
                     }
                }
           }    

 

 7. 变异方法，既有数值以前的功能，同时又可以更新视图

            push()　　pop()　　 shift()　　 unshift()　　splice()　　sort()　　reverse()

 

 8. watch 　　监听数据的变化

   1)  watch:{
              变量(新值，旧值){
                    .....
              }
          }
   2）watch:{
           变量:{
                handler(新值,旧值){  //数据变了调用
                    ....
                },
                immediate:true //立即监控 一加载就会调用一次handler
                deep:true //对象要采用深度监控的形式

            }
        }

 

 9. checkbox数据绑定v-model指令

    <div id="myApp">
        <input type="checkbox" v-model="msg" value="angular">angular
        <input type="checkbox" v-model="msg" value="react">react
        <input type="checkbox" v-model="msg" value="vue">vue
        {{msg}}
    </div>
    <script>
        new Vue({
            el: "#myApp",
            data() {
                return {
                    msg: []     // 选中哪个，哪个保存在数组之中
                    // msg:['vue']  设vue为默认选中
                }
            }
        })
    </script>

    <div id="box">
        {{str}}
        <input type="checkbox" v-model="select" />
        <ul>
            <li v-for="item in list" :key="item">
                <input type="checkbox" :value="item" v-model="arr" />
                {{item}}</li>
        </ul>
        {{arr}}
    </div>
    <script>
        new Vue({
            el:"#box",
            computed:{
                select:{
                    get(){
                        return this.arr.length ===this.list.length;
                    },
                    set(v){
                        if(v){
                            this.arr = this.list;
                        }
                        else{
                            this.arr =[]
                        }
                    }
                }
            },
            data:{
               str:"hello" ,
               arr:[], //选择checbox value值就会放在这个数组里
               list:["aa","bb","cc"]
            }
        })