Vue3.0基础

1、插值操作

方式一：mustache语法

<div id="app">
  <h1>信息：  {{massage}}</h1>
  <h1>姓：   {{firstname}}</h1>
  <h1>姓名： {{firstname + lastname}}</h1>
</div>

方式二：v-once指令：
1、该指令表示元素和组件只渲染一次，不会随着数据的变化而变化
2、该指令后面不需要跟任何表达式

<div id="app">
  <h1 v-once>{{massage}}</h1>
  <h1>{{firstname}}</h1>
</div>

方式三：v-html指令：
1、当从服务器请求到的数据本身就是一个HTML代码
2、使用v-html指令将后面的字符串的html解析出来并且进行渲染

<div id="app">
  <h1 v-html="url">{{url}</h1>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      massage: "信息xxxx",
      url: "<a href='http://www.baidu.com'>百度一下</a>>"
    },
  })
</script>

方式四：v-text指令：
1、v-test指令与mustache语法类似，但是v-test会覆盖标签内原有的内容

<div id="app">
  //显示 massage信息
  <h1 v-test="massage">222</h1>
  //显示 massage信息 + 222
  <h1>{{massage}} + 222</h1>
</div>

方式五：v-pre指令：
1、跳过这个元素和他子元素的编译过程

<div id="app">
  //显示编译解析后的 massage信息
  <h1>{{massage}}</h1>
  //显示 {{massage}}
  <h1 v-pre="massage">{{massage}}</h1>
</div>

方式五：v-cloak指令：
1、Vue在控制元素时，会将元素中的v-cloak属性删除

//存在v-cloak属性的元素会被隐藏
<style>
  [v-cloak]{
     display:none
  }
</style>
//初始编译时会被隐藏，当Vue接管后v-cloak属性移除，该元素及其子元素显示
<div id="app" v-cloak>
  <h1>{{massage}}</h1>
  <h1 v-pre="massage">{{massage}}</h1>
</div>

2、绑定属性

1、v-bind属性 (语法糖直接写 v-bind：可直接写为 ：)
问题1：v-bind属性能做什么？
答：动态绑定某些属性

<div id="app">
  //动态绑定img的src属性和a元素的herf属性
  <img v-bind:src="imgsrc">
  <a v-bind:href="aherf"></a>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      massage: "信息xxxx",
      imgsrc: "https://lupic.cdn.bcebos.com/20200412/3026449395_14_747_533.jpg",
      aherf: "https://www.jianshu.com/p/6a07a06beb8c"
    },
  })
</script>

问题2：有哪些用法
答：①动态绑定src属性 ②动态绑定herf属性 ③动态绑定class属性（有两种语法：对象语法、数组语法）④动态绑定样式style（同样有两种语法：对象语法、数组语法）

对象语法：
<div id="app">
  //"{}"  表示对象，对象里可以放键值对如{key:value,key:value}
  //一般在v-bind中以 :class="{类型：Boolean，类型： Boolean}"
  //当Boolean值为true时将类型加入class属性
  <h1 :class="{}"></h1>
</div>

①绑定一个
<h1 :class="{title: ture}"></h1>
②绑定多个
<h1 :class="{title: ture，count: false，min: ture}"></h1>
③与固定绑定不冲突  结果为  max | title | min
<h1 class="max" :class="{title: ture，count: false，min: ture}"></h1>
④如果过于复杂可以防止method 或 computed中    （classes是一个计算属性）
<h1 :class="classes"></h1>

3、计算属性

先举个例子：

<div id="app">
   <h1>{{agetotal}}</h1>
</div>

<script>
  const app = new Vue({
    el: '#app',
    data: {
        //现在我想显示这四个人的年龄和，就可以通过计算属性进行计算，而后直接使用计算属性的值
        books: [     {name: '张三',age: 20,bir: '2000/9/10'},
                     {name: '李四',age: 21,bir: '2000/9/10'},
                     {name: '王五',age: 22,bir: '2000/9/10'},
                     {name: '赵六',age: 23,bir: '2000/9/10'}]
    },
    //计算属性写在 computed 里面.例如agetotal就是一个计算属性
    computed: {
      //计算年龄和
       agetotal: function(){
            let result = 0;
            for(let i = 0; i < books.length; i++){
                result += this.books[i].age;
            }
            return result;
       }
    }
  })
</script>

完整的计算属性的书写，上面的是简写，因为一般只实现get方法
 computed: {
      //计算属性实质上是一个对象
       agetotal: {
            //用于设置agetotal值，一般计算属性都是只读不写的，所以一般不实现该方法
            set：function{
                
            }
            //当使用agetotal属性时，会调用get方法，显示get方法的返回值
            get：function{
                return "abc"      //当使用agetotal属性时就会显示abc。
            }
       }
}

计算属性的缓存：
<div id="app">
   //method方法实现插入：getAgetotal()方法会执行3次
   <h1>{{getAgetotal()}}</h1>
   <h1>{{getAgetotal()}}</h1>
   <h1>{{getAgetotal()}}</h1>
   
   //计算属性实现插入：get方法只会执行1次，后续是直接拿值。同时age和发生变化时，get方法会再次执行1次
   <h1>{{agetotal}}</h1>
   <h1>{{agetotal}}</h1>
   <h1>{{agetotal}}</h1>
   
</div>

<script>
  const app = new Vue({
    el: '#app',
    data: {
        books: [ {name: '张三',age: 20,bir: '2000/9/10'},
                 {name: '李四',age: 21,bir: '2000/9/10'},
                 {name: '王五',age: 22,bir: '2000/9/10'},
                 {name: '赵六',age: 23,bir: '2000/9/10'}]
    },
    computed: {
       agetotal: function(){
            let result = 0;
            for(let i = 0; i < books.length; i++){
                result += this.books[i].age;
            }
            return result;
       }
    }
    methods: {
       getAgetotal: function(){
            let result = 0;
            for(let i = 0; i < books.length; i++){
                result += this.books[i].age;
            }
            return result;
       }
    }
  })
</script>

4、事件监听

在Vue中使用v-on指令监听事件

v-on介绍
作用：  绑定事件监听器
缩写：  @
预期值：Function | Inline Statement | Object
参数：  event

v-on修饰符
作用：在某些情况下，我们拿到event的目的可能是进行一些事件处理。而Vue提供了一些修饰符来帮助我们方便的处理一些事件
修饰符：
①.stop      调用event.stopPropagation()，阻止事件的传递行为.
②.prevent   调用event.preventDefault()，阻止元素发生默认的行为。
③.{keyCode | keyAlias} 只当事件是从特定键触发时才触发回调函数
④.native    监听组件根元素的原生事件
⑤.once      只能触发一次回调

例
<div @click="divclock">
   //阻止事件冒泡
   <button @click.stop="butclick">按钮</button>
</div>

5、条件判断

条件指令：v-if、v-else-if、v-else
Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件
例：
<div id="app">
   <p v-if="score>=90">优秀</p>
   <p v-else-if="score>=80">良好</p>
   <p v-else-if="score>=70">及格</p>
   <p v-else="score>=60">不及格</p>
</div>
<script>
   let app = new Vue({
        el: "#app",
        data: {
            score: 98
        }
   })
</script>

当条件指令的条件为false时，对应元素及其子元素不会渲染
v-else后可不跟条件

Vue在进行DOM渲染时出于性能考虑，会尽可能复用已经存在的元素，而不是去创建新的元素。
如果我们不想Vue出现重复利用的现象，我们可以使用key属性，并且key属性值要不相同。

v-show 与 v-if
两个作用相同，如果判断条件为true，则不会渲染该元素及其子元素
但不同地方在于，v-if不渲染是直接不添加该元素，v-show不渲染是将display属性设置为none

如何选择？
当需要在显示与隐藏之间切片很频繁时，使用v-show
当只有一次切换时，使用v-if

6、循环遍历

v-for指令
遍历数组：
<div id="app">
   //获取值和下标  ()中前一个是item，第二个是index，即使写作（a,b） a代表的也是item，b代表的也是index
   <h1 v-for="(item,index) in narry">{{item}} {{index}}</h1>
   <br/>
   //获取值,不能单独获取下标，item也可以写为别的标识
   <h1 v-for="item in narry">{{item}}</h1>
</div>
<script>
   let app = new Vue({
        el: "#app",
        data: {
            narry: ['1','2','3','4']
        }
   })
</script>


遍历对象
<div id="app">
   //获取value、key和下标  ()中前一个是value，第二个是key，即使写作（a，b，c） a代表的也是value，b代表的也是key，c代表的是index
   <h1 v-for="(value，key，index) in narry">{{value}} {{key}}</h1>
   <br/>
   //获取value,不能单独获取key
   <h1 v-for="value in narry">{{value}}</h1>
</div>
<script>
   let app = new Vue({
        el: "#app",
        data: {
            object: {
               name: 'wu',
               address: 'hainan',
               phone: '99999'
            }
        }
   })
</script>

diff算法：

key属性：

7、阶段案例

<div>作业要求：建立一个列表，要求点击列表中的某一列时，某列变红</div>

<div id="app">
  <ul>
    <li v-for="(item,index) in massage" :class="{'red': isred[index],'block': !isred[index]}" @click="tored(index)">{{index}} - {{item}}</li>
  </ul>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      massage: ['列1','列2','列3','列4'],
      isred: [false,false,false,false]
    },
    methods: {
      tored(index) {
        //直接通过索引改变数组值是非响应式的更新！！！
        // this.isred[index] = true
        let statu = !this.isred[index]
        this.isred.splice(index,1,statu)
      }
    }
  })
</script>

8、表单绑定v-model

术语：双向绑定
解释：vue实例中的数据与其渲染的DOM元素的内容保持一致，无论谁被改变，另一方会相应的更新为相同的数据。

问：如何实现数据和DOM元素的双向绑定？
答：使用v-model指令。

问：v-model原理是什么？
答：其内部进行了 v-bind 和 v-on 操作

题外补充：
<lable>标签有什么用？
答：提高鼠标用户体验，当用户点击文本时依旧可以触发事件。当用户点击<label>标签中的文本时，浏览器就会自动将焦点转到和该标签相关联的控件上

9、增强函数之filter、map、reduce

filter:  用于数组元素的筛选，返回筛选后的新数组
filter(callbackfn: (value: T, index: number, array: T[]) => unknown, thisArg?: any): T[];
参数1：回调函数，数组中的每个元素都会作为参数执行回调函数，当回调函数返回true时，将该元素加入到新数组。
回调函数中value是元素，index是下标，T[]是数组。回调函数返回一个布尔值
参数2：参数2可以被 回调函数使用。

map:  用于数组元素的计算，返回计算后的新数组
map<U>(callbackfn: (value: T, index: number, array: T[]) => U, thisArg?: any): U[];
参数1：回调函数，返回一个结果，该结果会保存到新数组中。

map:  用于数组元素的计算，返回计算后的新数组
map<U>(callbackfn: (value: T, index: number, array: T[]) => U, thisArg?: any): U[];
参数1：回调函数，返回一个结果，该结果会保存到新数组中。

reduce:  用于数组元素的汇总，返回汇总后的结果
reduce(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T, initialValue: T): T;
参数1：回调函数。
回调函数里的参数：previousValue先前汇总值，currentValue当前值，currentIndex当前下标， array原数组。
回调函数的返回值：作为下一次回调函数的previousValue值。
参数2：previousValue的初始值

10、事件修饰符

事件修饰符
.stop
<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>

.prevent
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

.capture
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>

.self
<!-- 只当事件在该元素本身（比如不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

.once
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

.lazy
①默认情况下，v-model默认是在input事件中同步输入框的数据的，也就是说一旦数据发生改变，对应的data里的数据也会发生改变。
②lazy修饰符可以让数据再失去焦点或者回车是才会更新

.number
number修饰符可以让输入框中的内容自动转成数字类型

.trim
trim修饰符可以过滤内容左右两边的空格