Vue基础巩固（一）

1.为什么data里要加return？
不使用return包裹数据会在全局可见，造成变量污染
只在当前组件中生效，不会影响其他组件

2.vue有哪些指令？
v-once:表示元素和组件只渲染一次
v-html:解析出HTML展示【一般是string类型】
v-text:将数据显示在界面中【与插值表达式相似】【一般是string类型】
v-pre:跳过这个元素和它子元素的编译过程【不进行编译】
v-cloak:当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码【解决屏幕闪动的问题】【在大型、工程化项目webpack、vue-router中用不到，元素中的内容是通过路由挂载来实现的】
v-bind:动态绑定属性

3.计算属性
计算属性的setter和getter:每个计算属性都包含一个getter和一个setter,一般是使用使用getter来读取【图2】

<div id="app">
       <h1>{{totalPrice}}</h1>
   </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
   <script>
       
       let app = new Vue({
           el:'#app',
           data:{
               books:[
                   {name:'js',price:21,count:3},
                   {name:'vue',price:3,count:1},
                   {name:'html',price:2,count:2},
               ]
           },
           computed:{
               totalPrice(){
                   // 1.for()
                   // let num =0
                   // for(let i = 0;i<this.books.length;i++){
                   //     num += this.books[i].price * this.books[i].count
                   // }
                   // return num

                   // 2.reduce()
                   // return this.books.reduce((total,b)=>{
                   //     return total + b.price * b.count
                   // },0)

                   // 3. forEach()
                   // let num = 0
                   // this.books.forEach(item => {
                   //     num += item.price * item.count
                   // })
                   // return num

                   // 4. map()
                   // let num = 0
                   // this.books.map(item => {
                   //     num += item.price * item.count
                   //     console.log(num)
                   // })
                   // return num

                   // JSON.parse(JSON.stringify(this.books))
                   let notebook = JSON.parse(JSON.stringify(this.books))
                   notebook.map(item => {
                       item.price = 10
                   })
                   console.log(notebook)
                   console.log(this.books)
               }
           }
       })
   </script>

3.1 计算属性的缓存：计算属性会进行缓存，如果多次使用时，计算属性只会调用一次

4.v-on:绑定事件监听器 简写：@
1.如果方法本身中有一个参数，那么会默认将原生事件event参数传递进去
2.如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件:
<div @click="handleNum(10,$event)">{{count}}</div>
3.动态指令
<div v-bind:[attributeName]="color"></div>
<button @[eventName]="handlechange">切换颜色</button>
4.v-on修饰符:
.stop - 调用 event.stopPropagation():停止冒泡
.prevent - 调用 event.preventDefault():阻止默认行为
.native - 监听组件根元素的原生事件
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调
.once - 只触发一次回调

5.v-if、v-else-if、v-else

v-if和v-show的区别？
1.v-if条件为false，对应的元素以及其子元素不会渲染，DOM中不会有对应的标签
2.v-show条件为false，对应的元素以及其子元素不会渲染，DOM中有对应的标签，元素的display属性设置为none
用法：需要在显示与隐藏之间切片很频繁时，使用v-show ，只有一次切换时，通过使用v-if

有输入内容的情况下，切换了类型，为什么文字依然显示之前的输入的内容?
因为Vue在进行DOM渲染时，出于性能考虑，会尽可能的复用已经存在的元素，而不是重新创建新的元素
解决：不希望Vue出现类似重复利用的问题，可以给对应的input添加key

><div id="app">
       <span v-if="type">
           <label>用户账号：</label>
           <input type="text" placeholder="用户账号" key="username">
       </span>
       <span v-else>
           <label>用户密码：</label>
           <input type="text" placeholder="用户密码" key="password">
       </span>
   <button @click="handleChange">按钮</button>
></div>
><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
><script>

   let app = new Vue({
       el: '#app',
       data: {
           type: true
       },
       methods: {
           handleChange() {
               this.type = !this.type
           }
       }
   })
></script>

6.组件的key属性:使用key来给每个节点做一个唯一标识
作用：为了高效的更新虚拟DOM
使用后Diff算法就可以正确的识别此节点

声明式渲染和命令式渲染
1.声明式:定义一个变量，使用双大括号插入变量
2.命令式:document。querySelector('h1').innerHTML = 'hello'

在模板语法里使用JS表达式
split(‘’):把一个字符串分割成字符串数组 reverse():反转数组中元素的顺序 join():把数组中的所有元素放入一个字符串
<div>{{msg.split('').reverse().jion()}}</div>

** Vue基础巩固（一）：** <Excerpt in index | 首页摘要>

<The rest of contents | 余下全文>