Vue官网

安装vue的方法

1. 通过CDN引入

  1. <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  2. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  1. <!-- 生产环境版本，优化了尺寸和速度 -->
  2. <script src="https://cdn.jsdelivr.net/npm/vue"></script>

2. 下载vue.js文件引用

3. NPM安装

API

查看官方的全部API

实例化vue和基础选项

以下示例都默认引入了对应的vue.js文件

  • el：用来挂载的元素，告诉vue实力用来管理那个html元素
  • data：该属性通常存储一些数据，可以自定义，可以来自服务器请求的数据
  • {{}}：Mustache语法，两个大括号里面写vue里面的一些对象属性和函数返回值，文本插值，也可以以写表达式

    vue2版本

    ```html
    {{message}}
``` ### vue3版本 ```html
{{message}}
``` ### methods 在这里面定义很多方法，用逗号隔开，通常是无返回值的方法 ```html ``` ### computed 计算属性。可以直接动过插值语法插入页面的data数据。但有时候，数据需要进行一系列的加工后再显示，这时候就可以用计算属性。 > methods和computed看起来差不多，区别就是，**computed会进行缓存，如果多次使用，计算属性只调用一次** ```html

{{text1and2}}

``` 每个计算属性都包含一个**gette**r和一个**setter**
在某些情况系，可以使用setter方法，以下是computed的完整写法 ```html ``` ### watch 可以监测数据发生的变化，可以监测data，props等
watch里面的方法名必须是你要监听的数据名，可以传入两个参数，第一个参数为变化后的值，第二个参数为变化之前的值。 ```html
``` ## 指令 ### v-model 一般用于表单，双向绑定数据。表单修改，data里面的数据修改，数据修改，表单里面的内容修改。 双向绑定的原理，给表单控件的value属性绑定v-bind，绑定到data里面的相应字段，在给这个表单控件绑定一个事件，改变值就触发的事件。触发事件的时候，传入event事件对象到触发事件的方法里面，通过event拿到value值，重新赋值给data里面的相应字段 ```html
男 女

你选择的是：{{sex}}

同意 苹果 梨子 西瓜

你选择的水果是：{{fruits}}

你选择的abc是：{{abc}}

你选择的abcs是：{{abcs}}

  1. <a name="eVfXK"></a>
  2. #### v-model修饰符
  3. > **lazy**：懒加载，不是实时同步数据，在数据失去焦点或者回车时才更新
  4. > **number**：转换成数字，input里面填写的不管是什么都是按照字符串处理，加上这个就是数字类型。
  5. > **trim**：去掉值两端的空格
  7. ```html
  8. <div id="app1">
  9.   <!-- 修饰符.lazy -->
  10.   <input type="text" v-model.lazy="massage"/>{{massage}}
  12.   <!-- 修饰符.number -->
  13.   <input type="number" v-model.number="age"/>{{age}}
  15.   <!-- 修饰符.trim -->
  16.   <input type="text" v-model.trim="massage"/>{{massage}}
  18. </div>
  20. <script>
  21.   const app =new Vue({
  22.     el:"#app1",
  23.     data:{
  24.       massage:"   你好",
  25.       age:0
  26.     }
  27.   })
  28. </script>

v-for

循环v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。
可以绑定数组渲染一个列表

  1. <div id="app1">
  2.   <!-- 遍历数组里面是普通值 -->
  3.   <ul>
  4.     <li v-for="movie in movies">{{movie}}</li>
  5.   </ul>
  7.   <!-- 遍历数组里面是对象 -->
  8.   <ul>
  9.     <li v-for="person in persons">姓名：{{person.name}} 年龄：{{person.age}}</li>
  10.   </ul>
  12.   <!-- 可以直接迭代对象 -->
  13.   <ul>
  14.     <li v-for="value in animal">{{value}}</li>
  15.   </ul>
  17.   <!-- 遍历对象可以提供第二个参数为键名，第三个参数为索引 -->
  18.   <!-- 数组的第二参数就是索引，没有第三个参数 -->
  19.   <ul>
  20.     <li v-for="(movie,index) in movies ">索引：{{index}}，电影名：{{movie}}</li>
  21.   </ul>
  23.   <!-- 还可以直接迭代整数 -->
  24.   <ul>
  25.     <li v-for="n in 10">{{n}}</li>
  26.   </ul>
  30. </div>
  32. <script>
  33.   const app =new Vue({
  34.     el:"#app1",
  35.     data:{
  36.       movies:["星际穿越","复仇者联盟4","钢铁侠","流浪地球"],
  37.       persons:[
  38.         {name:"张三",age:18},
  39.         {name:"李四",age:22},
  40.         {name:"王五",age:32}
  41.       ],
  42.       animal:{type:"cat",name:"咪咪",age:3,color:"black"}
  43.     }
  44.   })
  45. </script>

在v-for的循环项中，最好加入key关键字，key值不同，记住这样能提高效率。 假设v-for的源数组为A,B,C,D,E，不加key，如果要在BC之间加入一个F，是这样的。 先把C变成F，D变成C，E变成D，新加一条E。效率很低。 有key的时候，就是把循环项和key先一一对应起来，再把F插进入，F也有key

v-on

v-on用来监听元素的事件，可以缩写用@，值可以是方法名，还可以是js表达式。
方法可以传入参数，实参是字符串要加引号，不加引号视为vue变量名。
无参数时，在{{}}里面要加()，在v-on里面不加括号

如果方法有形参，而调用方法却没有传对应的实参，那么默认传入的参数就是event事件对象 如果又要传入参数，又要传入事件对象，手动写事件对象的实参$event

  1. <div id="app1">
  2.   <button v-on:click="add">加号</button>
  3.   <button @click="sub">减号</button>
  4.   <button @click="add2(10,num1,'这是传入的字符串')">传入3变量</button>
  5.   <button @click="sub" @focus="add">监听多个方法</button>
  6.   <button @click="add2(10,num1,$event)">多个参数时手动传入event事件对象</button>
  7. </div>
  9. <script>
  10.   const app =new Vue({
  11.     el:"#app1",
  12.     data:{
  13.       count:0,
  14.       num1:25
  15.     },
  16.     methods:{ //定义方法
  17.       //es5的写法
  18.       add:function(){
  19.         console.log(this.count);
  20.         this.count++;//不加this，就是那的全局变量，加了this就是指当前对象里面的数据
  21.       },
  22.       //es6的写法
  23.       sub(){
  24.         console.log(this.count);
  25.         this.count--;
  26.       },
  27.       add2(num1,num2,str){   //带有参数
  28.         this.count+=num1+num2;
  29.         console.log(this.count);
  30.         console.log(str);
  31.       }
  33.     }
  34.   })
  35. </script>

v-on的修饰符

stop:如果不加这个.stop，当点击button时，会触发btnclick方法，然后事件冒泡，触发divclick方法。在button上加了.stop，就能阻止点击button时的事件冒泡了 prevent：有些标签有默认事件，加上prevent修饰符，就是阻止默认事件 键别名/键代码：键上每个键都有对应的代码别名之类的，把这个作为修饰符，限定了当按下这个键后才能触发事件 once：事件只触发一次

  1. <div id="app1">
  2.   <div @click="divclick">
  3.     <!-- 停止冒泡事件 -->
  4.     <button @click.stop="btnclick">按钮</button>
  6.     <!-- 键别名 -->
  7.     <button @keyup.enter="v_keyup">按钮2</button>
  8.     <!-- 键代码 -->
  9.     <button @keyup.32="v_keyup">按钮3</button>
  11.     <!-- 只回调一次 -->
  12.     <button @click.once="btnclick">按钮</button>
  13.   </div>
  14. </div>
  16. <script>
  17.   const app =new Vue({
  18.     el:"#app1",
  19.     data:{
  21.     },
  22.     methods:{
  23.       divclick(){
  24.         console.log("点击了div");
  25.       },
  26.       btnclick(){
  27.         console.log("点击了button");
  28.       },
  29.       v_keyup(){
  30.         console.log("监听了键盘按下enter键或者代码为32的键并抬起来时的事件");
  31.       }
  33.     }
  34.   })
  35. </script>

v-bind

一般给属性双向绑定值，要绑定什么属性就什么属性前面加上v-bind:

  1. <style>
  2.   .red{
  3.     color:red;
  4.   }
  5.   .green{
  6.     color:green;
  7.   }
  8.   .big{
  9.     font-size: 18px;
  10.   }
  11. </style>
  13. <div id="app1">
  14.   <!-- 绑定到属性 -->
  15.   <img v-bind:src="img" />
  17.   <!-- 缩写 -->
  18.   <img :src="img"/>
  20.   <!-- 拼接绑定，字符串记得加引号 -->
  21.   <img :src="'https://img3.doubanio.com/view/photo/s_ratio_poster/public/'+imgid">
  23.   <!-- 绑定类，可以绑定一个对象，key是类名，value是bool值。类名在data里面可以不写，也可以不加引号。
  24. 哪个类为true，就用哪个类，如果多个true，用最后一个，覆盖。
  25. 同时可以用到普通的class，会合并在一起 -->
  26.   <h2 :class="{red:isred,green:isgreen}" class="big">对象绑定class</h2>
  28.   <!-- 还可以是数组，加了引号就是普通字符串 -->
  29.   <h2 :class="['green',vue_red]" class="big">数组绑定class</h2>
  31.   <!-- 绑定style，绑定一个对象，key是css的属性名，value是css属性值 -->
  32.   <!-- 如fontSize和font-size两种写法，驼峰直接写，短横线要加引号 -->
  33.   <h2 :style="{fontSize:'50px',color:vue_red}">对象绑定style</h2>
  35.   <!-- 绑定style，数组。数组里面就是一个一个对象，对象key是css属性名，value是css属性值-->
  36.   <h2 :style="[vue_color,vue_font_size]">数组绑定style</h2>
  37. </div>
  39. <script>
  40.   const app =new Vue({
  41.     el:"#app1",
  42.     data:{
  43.       img:"https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2639035790.jpg",
  44.       imgid:"p2639035790.jpg",
  45.       isred:true,
  46.       isgreen:false,
  47.       vue_red:"red",
  48.       vue_color:{color:"pink"},
  49.       vue_font_size:{'font-size':"50px"}
  51.     }
  52.   })
  54. </script>

v-once

用v-once限定的标签，数据只渲染第一次，之后更新数据，都不会跟着更新

  1. <div id="app1">
  2.   <p>{{massage}}</p>
  3.   <p v-once>{{massage}}</p>
  4. </div>
  6. <script>
  7.   const app =new Vue({
  8.     el:"#app1",
  9.     data:{
  10.       massage:"这是一段文字"
  11.     }
  12.   })
  13. </script>

v-html

把html代码的字符串渲染到html页面里面，不太安全，慎用

  1. <div id="app1">
  2.   <div v-html="title"></div>
  3. </div>
  5. <script>
  6.   const app =new Vue({
  7.     el:"#app1",
  8.     data:{
  9.       title:"<h1>这是标题</h1>"
  10.     }
  11.   })
  12. </script>

v-text

和Mustache语法一致，不过v-text更新当前标签下全部文本，{{}}可以拼接更新部分

  1. <div id="app1">
  2.   <p v-text="title"></p>
  3. </div>
  5. <script>
  6.   const app =new Vue({
  7.     el:"#app1",
  8.     data:{
  9.       title:"这是标题"
  10.     }
  11.   })
  12. </script>

v-pre

加了v-pre就会跳过这个标签下的编译，原封不动的显示里面的内容。相当于转义。

  1. <div id="app1">
  2.   <p>{{title}}</p>
  3.   <p v-pre>{{title}}</p>
  4. </div>
  6. <script>
  7.   const app =new Vue({
  8.     el:"#app1",
  9.     data:{
  10.       title:"这是标题"
  11.     }
  12.   })
  13. </script>

v-cloak

当页面先渲染出来html页面，还没有加载到相应的js代码时。就会在页面上出现原封不动的Mustache标签，会让用户看到你写的什么变量。加上v-cloak，就把这个指令当成标签的属性，一旦vue对这个标签进行解析过后，就会删除这个属性。可以把这个属性设置为隐藏，当没有加载到渲染值时，这个标签就处于隐藏状态，一旦加载出来，就删掉隐藏的属性，标签和渲染后的值就出现了

  1. <style>
  2.   [v-cloak]{
  3.     display: none;
  4.   }
  5. </style>
  7. <div id="app1">
  8.   <p v-cloak>{{title}}</p>
  9. </div>
  11. <script>
  12.   //等待3秒才实例化vue
  13.   setTimeout(function(){
  14.     const app =new Vue({
  15.       el:"#app1",
  16.       data:{
  17.         title:"这是标题"
  18.       }
  19.     })
  20.     },3000)
  22. </script>

v-if&v-else&v-else-if

条件判断要不要渲染这个标签，值一般是bool类型

  1. <div id="app1">
  2.   <!-- 这里isif为false，所以这个div标签根本不会渲染出来 -->
  3.   <div v-if="isif">{{massage}}</div>
  4.   <div v-else>isif为false时显示我</div>
  6.   <!-- else-if的使用 -->
  7.   <div v-if="score>=90">优秀</div>
  8.   <div v-else-if="score>=80">良好</div>
  9.   <div v-else>不咋滴</div>
  11. </div>
  13. <script>
  14.   const app =new Vue({
  15.     el:"#app1",
  16.     data:{
  17.       massage:"你好",
  18.       isif:false,
  19.       score:88
  20.     },
  21.     methods:{
  23.     }
  24.   })
  25. </script>

v-show

也是决定要不要显示元素。不过和v-if的区别是，v-if为false时，根本不渲染dom。v-show要渲染dom，不过display为none。

需要在显示隐藏切换频率比较高时，用v-show

  1. <div id="app1">
  2.   <h2 v-show="isshow">这是一段标题</h2>
  3. </div>
  5. <script>
  6.   const app =new Vue({
  7.     el:"#app1",
  8.     data:{
  9.       massage:"你好",
  10.       isshow:false,
  11.     },
  12.     methods:{
  14.     }
  15.   })
  16. </script>

key

如果不写key，
当下面两个input，随时切换，场上只留一个。如果在id为name的input里面输入了字符串，isif改变了，nam消失，email显示，这时候明明在name里面输入的字符串，跑到了email里面。
这是vue里面的虚拟dom，只会生成一个input，其他的都是复用而已，就是把type，id，class等都换了，input只有一个，值也就是那个值，所以isif换来换去的，都是一个input不断的改变属性，一个input，就一个值。
加上key，给input取不通的键名，键名不一样就不能复用。

  1. <input type="text" id="name" v-if="isif" key="a">
  2. <input type="email" id="email" v-else key="b">

生命周期

大概意思就是一个事物从诞生到消亡的整个过程

vue里面的生命周期，从vue实例的诞生开始，再执行到某一步骤操作时，会有一个回调函数，执行这个回调函数，告诉你，现在执行到哪一步了。下面图片中，红圈的就是生命周期的回调函数

  1. <script>
  2.   const app =new Vue({
  3.     el:"#app1",
  4.     data:{
  6.     },
  7.     created(){   //es6的写法
  8.       console.log("进入到created这个阶段了");
  9.     },
  10.     methods:{ 
  12.     }
  13.   })
  14. </script>

lifecycle.png