1.引用Vue.js

https://cn.vuejs.org/v2/guide/installation.html

举例：采用CDN的方式

    <script src="https://unpkg.com/[email protected]/dist/vue.js"></script>

2.数据绑定、指令、事件

数据绑定

 <div class="div1">
        <!-- 变量 -->
        {{msg}}
        <!-- 简单运算 -->
        {{age*2}}
 </div>

 <script>
        //创建Vue实例
        new Vue({
            el:".div1",
            data:{
                msg:"hello world!!!",
                age:90,
            }
        })
    </script>

说明：使用Vue操作dom节点，首先需要创建Vue实例（new Vue({})） 

其中属性el 是用来挂在dom节点，使用css选择器选择需要操作的dom节点即可。

属性data 用来定义所需要的数据，以一个对象的形式定义。

在div中使用双大括号来绑定数据（{{}}）  括号内也可进行简单的运算  以及 书写表达式

指令

vue指令语法   v-指令名字+：+指令参数=指令的表达式

例如：

  <div class="div">
         <a v-bind:href="url">Vue</a>
         <div v-bind:title="movieName">查看电影名称</div>
  </div>
 <script>
        new Vue({
            el:".div",
            data:{
               url:"https://vuejs.org/v2/guide/installation.html",
               movieName:"IronMan",  
            },
        })
    </script>

事件

vue事件语法  v-on+：+事件名称="函数执行"

例如：

<div class="div">
        <div v-on:click="show(456,$event)">
            <button v-on:click.stop="show(123,$event)">查看电影名称</button>
        </div>
        <button v-on:click="hidden">隐藏电影名称</button>
</div>
 <script>
        new Vue({
            el:".div",
            data:{
               
                movieName:"***",
                moviedate:"2008"
                
            },

            methods:{
               
                show:function(a,event){
                    console.log(a);
                    alert('aaa');
                    this.movieName="Iron Man";
                },
                hidden:function(){
                    this.movieName="***"; 
                }
            }
        })
    </script>

说明：1.Vue实例中属性methods 用来定义函数 

格式为：函数名：function(){}（无参函数）function(event){}（有参函数）其中event参数传参参数必须是$event

2. 修饰符.stop是为了阻止事件冒泡（后面会继续介绍修饰符）

3.修饰符

Vue修饰符使用语法：v-on+：+事件+.+修饰符="函数名"

 <div class="div">
       
        <input type="text" v-on:keyup.enter="keyup">
        
        <input type="text" v-on:keyup.esc="esc">
        
        <input type="text" v-on:keyup.space="space">

     
        <input type="text" v-on:keyup.shift="shift">
        
        <button v-on:click.shift="shift">shift</button>
        
        <button v-on:click.meta="shift">shift</button>

    </div>


    <script>
        new Vue({
            el:".div",
            methods:{
                keyup:function(event){
                      alert("回车");
                },
                esc:function(){
                    alert("ESC");
                },
                space:function(){
                    alert("空格");
                },
                shift:function(){
                    alert("shift");
                }
            }
        })
    </script>

4.Vue双向数据绑定、条件渲染

双向数据绑定

 <div class="test">
        {{value}}
        
       
        <input type="text" v-model.trim="value">
       
        <input type="text" v-model.number="value">
        
        <input type="text" v-model.lazy="value">


    </div>

    <script>
        new Vue({
            el:".test",
            data:{
                value:"Stark"
            },
        })
    </script>

说明： 双向数据绑定语法 ： v-model="value"  （当输入框的数据发生改变时，value的值会随之改变！）

修饰符 trim 用于清除空格   number将数据类型转换成数字类型  lazy 当input失去焦点时 数据发生改变

条件渲染

 <div class="test">
        {{html}}
        <div v-html="html"></div>
    </div>

    <script>
        new Vue({
            el:".test",
            data:{
                html:"<h1>hello</h1>",
            }
        })
    </script>

说明：v-html="html" 相当于 将<h1>hello</h1>写入div中

 <div class="test">

        <p v-if="num>10"> {{num}} 个有现货</p>
        <p v-else-if="num>1">所剩不多,仅剩{{num}}</p>
        <p v-else>暂无库存,欢迎下次光临！</p>
        <button v-on:click="shop">购买</button>

        <template v-if="num>30">
            <p>注意事项</p>
            <p>商品剩余过多，请尽快处理</p>
         </template>

         <p v-show="hide">I am  hide</p>
         <p v-show="!hide">I am here</p>
         <button v-on:click="hide=!hide">hide</button>

         
    </div>

    <script>
        new Vue({
            el:".test",
            data:{
                num:40,
                hide:true
            },
            methods:{
                shop:function(){
                    this.num--
                }
            }
        })
    </script>

说明： 1.v-if v-else-if v-else 必须在兄弟节点使用  类似if  else-if  else的条件判断  写在标签行间即可  根据条件不同，显示内容会发生改变

2.template模板标签内的内容条件是统一的，template标签起到整合作用  不占用空间

3.v-show=true时显示 false隐藏

5.列表渲染

1.列表中的数据以数组的形式存放在data中

  <div class="div">
        <h1>电影列表</h1>
        <ul>
            <li v-for="(name,index) in movies">{{name}} ({{index+1}})</li>
        </ul>
    </div>
    <script>
        new Vue({
            el:".div",
            data:{
                movies:["Iron Man","Iron Man2","IronMan3","Avenger","Avenger2","Avenger3"], 
            }
        })
    </script>

说明：1.v-for用来循环数组   语法格式：v-for="别名  in  数组名"   

2.其中第一个参数name表示数组中的元素  第二个参数index表示元素在数组中对应的下标

2.列表中的数据在数组中是对象

  <div class="div">
        <table>
            <thead>
                <td>员工姓名</td>
                <td>职位</td>
                <td>组织</td>
            </thead>
            <tbody>
                <tr v-for="person in persons">
                    <td>{{person.name}}</td>
                    <td>{{person.title}}</td>
                    <td>{{company}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        new Vue({
            el:".div",
            data:{
                persons:[{//数组元素是对象
                    name:"Stark",
                    title:"IronMan"
                },
                {
                    name:"banna",
                    title:"hulk",
                }
                ] ,
                company:"Avenger",
            }
        })
    </script>

说明：v-for循环的结果是一个对象，具体属性值要以person.name/person.title这种形式输出

3.数据以对象的形式存在data中

<div class="div">
        <div v-for="(name,prop,index) in person">
            {{name}} 
            {{prop}}:{{name}} {{index}}
       </div>
    </div>


    <script>
        new Vue({
            el:".div",
            data:{
                //对象
                person:{
                    lastName:"Stark",
                    firstName:"Tony",
                }
            }
        })
    </script>

说明：v-for="(name,prop,index) in person"  其中name表示属性值（Stark/Tony） prop表示属性名（lastName/firstName），       index表示索引

4.其他循环

<div class="div"> 
       
        <div v-for="n in 10">{{n}}</div>
     
        <div v-for="s in 'Tony Stark'">{{s}}</div>
    </div>

说明：1.<div v-for="n in 10">{{n}}</div>  循环输出1-10

2.<div v-for="s in 'Tony Stark'">{{s}}</div>  循环输出 Tony Stark字符串

6.计算属性及watch监听

1.计算属性

<div class="test">
       <div>{{getName}}</div>
       <button v-on:click="changeName">changeName</button>
       <button v-on:click="setName">setName</button>
    </div>

    <script>
        new Vue({
            el:".test",
            data:{
                firstName:"Tony",
                lastName:"Stark",
            },
            methods:{
                // getName:function(){
                //     return this.firstName+this.lastName;
                // }
                changeName:function(){
                    this.lastName="zy";
                    this.firstName="G";
                },
                setName:function(){
                   this.getName="G zy";
                }
            },

            computed:{          
                //对象
                getName:{
             
                    get:function(){
                        alert("执行get");
                        return this.firstName+this.lastName;
                    },
               
                    set:function(name){
                        alert("执行set");

                        var arr=name.split(" ");
                        this.lastName=arr[1];
                        this.firstName=arr[0];
                        //console.log(name);
                    }
                }
            }
        })
    </script>

说明：1.Vue的实例中属性computed用来写计算属性，其中getName为计算属性，computed主要用来监听属性的改变

2.getName中的两个函数   当依赖的属性值发生改变时  会执行get函数（函数中需要return值）     当getName发生改变时  执行set函数

3.computed监听属性改变 必须是同步操作，执行get函数后 会产生缓存

2.watch监听

 <div class="test">
            <!-- v-model="serachInfo"  双向数据绑定 -->
        <input type="text" v-model="searchInfo">
        <div v-if="showSearching">正在搜索.......</div>
        <ul>
            <li v-for="res in result">{{res}}</li>
        </ul>
    </div>

    <script>
        new Vue({
            el:".test",
            data:{
                searchInfo:"",
                showSearching:true,
                result:[],
            },
            watch:{
                searchInfo:function(query){
                    this.showSearching=true;
                    var  vm=this;
                    setTimeout(function(){
                        vm.result=["html","js","css"];
                        vm.showSearching=false;
                    },500)
                }
            }
        })
    </script>

说明：1.watch监听  当监听的数据组发生改变时执行函数

2.watch没有return值    可以是异步操作

3.参数query表示当前input里的数据

4.注意：需定义一个变量接收this  在setTimeout前的this指向Vue实例   在setTimeout内的this指向window  

7.filter过滤器

 <div class="test">
        {{msg | upperCase(true)}}
    </div>
    <script>
        new Vue({
            el:".test",
            data:{
                msg:"hello world",
            },
            filters:{
                upperCase:function(value,isFirst){
                    value=value.toString();
                    if(isFirst){
                        return value.charAt(0).toUpperCase()+value.slice(1);//首字母大写
                    }
                    else{
                        return value.toString().toUpperCase();//转成大写                        
                    }
                }
            },
        })
    </script>

说明：1.语法格式 ： {{ 变量名 | 函数名（true）}}  其中  变量名是第一个参数   true是第二个参数

2.Vue实例中属性fliter用来写过滤器，fliter内容和methods相似，也是写实现功能的函数

8.css样式变换

<div class="test">
        <div style="height: 100px;width: 150px;" 
            v-bind:style="[styles1,styles2]"
        ></div>
        <!-- v-on:click可以写成@click -->
        <button @click="changeColor">changeColor</button>
    </div>
    <script>
        new Vue({
            el:".test",
            data:{
                color:"blue",
            },
            computed:{
                styles1:function(){
                    return{
                        backgroundColor:this.color,
                 // styles:{
                 //     backgroundColor:this.color,
                 // }
                    }
                },
                styles2:function(){
                    return{
                      'border-radius':"15px",
                    }
                }
            },
            methods:{
                changeColor:function(){
                    if(this.color=="blue")
                    {
                        this.color="red";
                    }
                    else{
                        this.color="blue";
                    }
                }
            }
        })
    </script>    

说明：1.通过v-bind绑定style属性进行赋值，赋值的参数可以写在data或者computed中，单个属性可直接复制，多个属性可以写成数组的形式，会共同使用。

2.如果存在相同属性，后者会覆盖前者