Vue 模板语法 插值操作 绑定属性 计算属性 事件监听 条件判断 循环遍历 阶段案例

  • A+
所属分类:Web前端
摘要

也就是双大括号 {{ }}该指令后面不需要跟任何表达式(比如之前的v-for后面是跟表达式的)


1 插值操作

1.1 Mustache语法

也就是双大括号 {{ }}

<div id="app"> <!-- mustche语法中,不仅可以直接写变量,也可以写简单的表达式 -->     <h2>{{ message }} : {{ info }}</h2>     <h2>{{ message + " : " + info }}</h2>     <h2>{{ counter * 2 }}</h2> </div>  <script src="../js/vue.js"></script> <script>   // 编程范式:声明式编程   const app = new Vue({     el: '#app', // 用于关在要管理的元素     data: {     // 定义数据       message: "你好",       info: "有勇气的牛排",       counter:100     }   }) </script> 

1.2 v-once

  • 该指令后面不需要跟任何表达式(比如之前的v-for后面是跟表达式的)

  • 该指令表示元素和组件(组件后面才会学习)只会渲染一次,不会随着数据的改变而改变

<div id="app">     <h2>{{ message }}</h2>     <h2 v-once>{{ message }}</h2> </div>  <script src="../js/vue.js"></script> <script>   // 编程范式:声明式编程   const app = new Vue({     el: '#app', // 用于关在要管理的元素     data: {     // 定义数据       message: "你好,有勇气的牛排"     }   }) </script> 

1.3 v-html

某些情况下,我们从服务器请求到的数据本身就是一个HTML代码

  • 如果我们直接通过{{ }} 来输出,会将HTML代码也一起输出

  • 但是我们可能希望的是按照HTML格式进行解析,并显示对应的内容

如果我们希望解析出HTML展示

  • 可以使用v-html指令

  • 该指令直面往往会跟上一个string类型

  • 会将string的html解析出来并进行渲染

<div id="app">     <h2>{{ url }}</h2>     <h2 v-html="url"></h2> </div>  <script src="../js/vue.js"></script> <script>   // 编程范式:声明式编程   const app = new Vue({     el: '#app', // 用于关在要管理的元素     data: {     // 定义数据       message: "你好,有勇气的牛排",       url:'<a href="https://www.920vip.net/">开发者</a>'     }   }) </script> 

Vue 模板语法 插值操作 绑定属性 计算属性 事件监听 条件判断 循环遍历 阶段案例

1.3 v-text

不推荐,灵活度不够

<div id="app">     <h2 v-text="message"></h2> </div>  <script src="../js/vue.js"></script> <script>   // 编程范式:声明式编程   const app = new Vue({     el: '#app', // 用于关在要管理的元素     data: {     // 定义数据       message: "你好,有勇气的牛排",     }   }) </script> 

1.4 v-pre

v-pre用于跳过这个元素和它子元素的编译过程,用于显示原本的Mustche语法

比如下面代码

  • 第一个h2元素中的内容会被编译解析出来对应的内容

  • 第二个h2元素中会直接显示{{message}}

<div id="app">     <h2>{{ message }}</h2>     <h2 v-pre>{{ message }}</h2> </div>  <script src="../js/vue.js"></script> <script>   const app = new Vue({     el: '#app',     data: {       message: "你好,有勇气的牛排"     }   }) </script> 

Vue 模板语法 插值操作 绑定属性 计算属性 事件监听 条件判断 循环遍历 阶段案例

1.5 v-cloak

在某些情况下,我们浏览器可能会直接显示出未变异的Mustche标签

<div id="app" v-cloak>     <h2 v-text="message">{{ message }}</h2> </div> 
  • 在vue解析之前,div中有一个属性v-cloak

  • 在vue解析之后,div中没有一个属性v-cloak

2 绑定属性

2.1 v-bind

场景:某些属性需要动态绑定

  • 比如动态绑定a元素的href属性

  • 比如动态绑定img元素的src属性

v-bind指令:

  • 作用:动态绑定属性

  • 缩写::语法糖写法 直接冒号

  • 预期:any(with argument)|Object(without argument)

  • 参数:attrOrProp(optional)

<div id="app">     <!--    错误做法: 不能在属性中使用mustache语法-->     <!--    <img src="{{ imgURL }}" alt="">-->      <!-- 正确做法:使用v-bind指令 -->     <img v-bind:src="imgURL" alt="">     <a v-bind:href="aHref">有勇气的牛排</a>      <!-- 语法糖的写法 -->     <img :src="imgURL" alt="">     <a :href="aHref">有勇气的牛排</a>  </div>  <script src="../js/vue.js"></script> <script>   const app = new Vue({     el: '#app',     data: {       imgURL: 'https://static.920vip.net/4b9785ac56dea2567e62ba08d1ca1767.png',       aHref: 'https://www.920vip.net/'     }   }) </script> 

2.2 v-bind绑定class

2.2.1 绑定方式:对象语法

  • 对象语法的含义:class后面跟的是一个对象
<!-- 用法一:直接通过{ }绑定一个类 --> <h2 :class="{'active':isActive}">Hello World</a>  <!-- 用法二:也可以通过判断,传入多个值 --> <h2 :class="{'active':isActive,'line':isLine}">Hello World</a>  <!-- 用法三:和普通的类同时存在,并不冲突 --> <!-- 注:如果isActive和isLine都为true,那么会有title/active/line三个类 --> <h2 class="title" :class="{'active':isActive,'line':isLine}">Hello World</a>  <!--  用法四:如果过于复杂,可以放在一个methods或者computed中 注:classes是一个计算属性  --> <h2 class="title" :class="classes">Hello World</h2> 

2.2.2 绑定方式:数组语法

<div id="app">     <!-- 数组里面的值,加双引号是为值,不加双引号为变量 -->     <h2 class="title" :class="[active,line]">{{ message }}</h2>     <h2 class="title" :class="getClasses()">{{ message }}</h2>  </div>  <script src="../js/vue.js"></script> <script>   const app = new Vue({     el: '#app',     data: {       message: "你好,有勇气的牛排",       active: '666',       line: '777'     },     methods: {       getClasses: function () {         return [this.active, this.line]       }     }   }) </script> 

2.3 点击列表中哪一项,那么该项的文字变为红色

<style>     .active {         color: red;     } </style> 
<div id="app">     <ul>         <li v-for="(m, index) in movies"             :class="{active:index === currentIndex}"             @click="liClick(index)"         >             {{ index }}{{ ' - ' + m }}         </li>     </ul> </div>  <script src="../js/vue.js"></script> <script>   const app = new Vue({     el: '#app',     data: {       movies: ['灰太狼', '有勇气的牛排', '导演'],       currentIndex: 0     },     methods: {       liClick: function (index) {         this.currentIndex = index       }     }   }) </script> 

2.4 v-bind绑定style

  • 可以使用v-bind:style来绑定一些CSS内敛样式

  • 在写CSS属性名的时候,比如font-size

  1. 我们可以使用驼峰式(cameCase)fontSize

  2. 或短横线分隔(kebab-case,记得用单引号括起来)'font-size'

  • 绑定class有两种方式
  1. 对象语法
<div id="app">      <!-- <h2 :style="key(属性名): value(属性值)">{{ message }}</h2>-->     <!-- 50px: 必须加上单引号,否则当做一个变量去解析 -->     <h2 :style="{fontSize: '50px'}">{{ message }}</h2>      <!-- finalSize当成一个变量使用 -->     <h2 :style="{fontSize: finalSize + 'px',color:finalColor}">{{ message }}</h2>     <h2 :style="getStyles()">{{ message }}</h2> </div>  <script src="../js/vue.js"></script> <script>   const app = new Vue({     el: '#app',     data: {       message: "你好,有勇气的牛排",       finalSize: 60,       finalColor: 'red'     },     methods:{       getStyles:function () {         return {fontSize: this.finalSize + 'px',color:this.finalColor}       }     }   }) </script> 
  1. 数组语法
<div id="app">     <h2 :style="[baseStyle, baseStyle1]">{{ message }}</h2> </div>  <script src="../js/vue.js"></script> <script>   const app = new Vue({     el: '#app',     data: {       message: "你好,有勇气的牛排",       baseStyle: {backgroundColor: 'red'},       baseStyle1: {fontSize: '100px'}     }   }) </script> 

3 计算属性

  1. 某些情况下,我们可能需要对数据进行一些转换后再显示,或者需要将多个数据结合起来进行显示
  • 比如:有firstName和lastName两个变量,我们需要显示完整的名称。

  • 但是如果多个地方都需要完整的名称,就需要写多个{{ firstName }} {{ laseName }}

  1. 我们可以将上面的代码转换成计算属性

3.1 基本操作

<div id="app">     <h2>{{ name + ' : ' + nameValue }}</h2>     <h2>{{ name }} : {{ nameValue }}</h2>      <h2>{{ getFullName() }}</h2>      <!-- 计算属性 -->     <h2>{{ fullName }}</h2>  </div>  <script src="../js/vue.js"></script> <script>   const app = new Vue({     el: '#app',     data: {       name: "昵称",       nameValue: "灰太狼"     },     // computed: 计算属性()     computed: {       fullName() {         return this.name + ' : ' + this.nameValue       }     },     methods: {       getFullName() {         return this.name + ' : ' + this.nameValue       }     }    }) </script> 

3.2 复杂操作

<div id="app">     <h2>总价格: {{ totalProce }}</h2> </div>  <script src="../js/vue.js"></script> <script>   const app = new Vue({     el: '#app',     data: {       books: [         {id: 110, name: "C语言", price: 50},         {id: 111, name: "操作系统", price: 60},         {id: 112, name: "统计学习方法", price: 70},         {id: 113, name: "鬼谷子", price: 30},         {id: 114, name: "即兴演讲", price: 35}       ]     },     computed: {       totalProce: function () {         let result = 0         for (let i = 0; i < this.books.length; i++) {           result += this.books[i].price         }         return result          // for (let i in this.books){         //   this.books[i]         // }         //         // for(let book of this.books){         //         // }        }     }   }) </script> 

3.3 计算属性的setter和getter

<div id="app">     <h2>{{ fullName }}</h2> </div>  <script src="../js/vue.js"></script> <script>   const app = new Vue({     el: '#app',     data: {       name: '昵称',       nameValue: '有勇气的牛排'     },     computed: {       // 计算属性一般是没有set方法,只读属性       fullName: {         // app.fullName='cc|cc'         set: function (newValue) {           const names = newValue.split('|');           this.name = names[0];           this.nameValue = names[1];         },         get: function () {           return this.name + ' : ' + this.nameValue         }       },       // 简洁写法       // fullName: function () {       //   return this.name + ' : ' + this.nameValue       // }     }   }) </script> 

3.4 计算属性和methods的对比

<div id="app">     <!-- 1. 直接拼接: 语法过于繁琐 -->     <h2>{{ name }} {{ nameValue }}</h2>     <!-- 2. 通过定义methods -->     <h2>{{ getFullName() }}</h2>     <!-- 3. 通过computed -->     <h2>{{ fullName }}</h2> </div>  <script src="../js/vue.js"></script> <script>   const app = new Vue({     el: '#app',     data: {       name: '昵称',       nameValue: '有勇气的牛排'     },     computed: {       fullName: function () {         return this.name + ' : ' + this.nameValue       }     },     methods: {       getFullName: function () {         return this.name + ' : ' + this.nameValue       }     }   }) </script> 

3.5 计算属性的缓存

计算属性会进行缓存,如果多次使用时,计算属性只会调用一次

4 事件监听

4.1 v-on基本使用

  • 作用:绑定时间监听器

  • 缩写:@

  • 预期:Function | Inline Statement | Object

  • 参数:event

<div id="app">     <!-- v-bind 语法糖 -->     <!--    <h2 v-bind:title></h2>-->     <!--    <h2 :title></h2>-->      <h2>{{ counter }}</h2>      <!-- <button v-on:click="counter++">+</button>-->     <!-- <button v-on:click="counter--">-</button>-->      <!-- button v-on:click="increment">+</button>-->     <!-- <button v-on:click="decrement">-</button>-->     <!-- v-on 语法糖 -->     <button @click="increment">+</button>     <button @click="decrement">-</button> </div>  <script src="../js/vue.js"></script> <script>   const app = new Vue({     el: '#app',     data: {       counter: 0     },     methods: {       increment() {         this.counter++       },       decrement() {         this.counter--       }     }   }) </script> 

4.2 v-on参数

<div id="app">     <!-- 1. 时间调用的方法没有参数 -->     <button @click="btn1Click()">按钮1</button>     <button @click="btn1Click">按钮1</button>     <br>      <!--     2. 在事件定义时,写函数时省略了小括号,但是方法本身需要一个参数的,      这个时候Vue会默认将浏览器生产的event事件对象作为参数传入到方法      -->     <button @click="btn2Click(123)">按钮2</button>     <button @click="btn2Click()">按钮2</button>     <button @click="btn2Click">按钮2</button>     <br>      <!-- 3. 方法定义时,我们需要event对象,同时又需要其他参数 -->     <!-- 在多用方法时,如何手动的获取到浏览器的event参数对象:$event -->     <button @click="btn3Click(123,$event)">按钮3</button>       <button>按钮4</button> </div>  <script src="../js/vue.js"></script> <script>   const app = new Vue({     el: '#app',     data: {       message: "你好,有勇气的牛排"     },     methods: {       btn1Click() {         console.log('btn1Click');       },       btn2Click(event) {         console.log("按钮2:" + event);         console.log(event);       },       btn3Click(abc, event) {         console.log("按钮3");         console.log(abc, event);       }     }   }) </script> 

4.3 v-on修饰符

Vue提供了修饰符来帮助我们方柏霓处理一些事件

  • .stop:调用event.stopPropagation()

  • prevent:调用event.preventDefault()

  • .{keyCode | keyAlias}:只当事件是从特定键触发时才触发回调

  • .native:监听组件根元素的原生事件

  • .once:只触发一次回调

<div id="app">     <!-- 1. .stop修饰符的使用:阻止冒泡 -->     <div @click="divClick">         6666666         <button @click.stop="btnClick">按钮</button>     </div>       <!-- 2. .prevent修饰符的使用 ->form表单失效 -->     <form action="test">         <input type="submit" value="提交" @click.prevent="submitClick">     </form>      <!-- 3. 监听某个键盘的键帽 -->     <!--    <input type="text" @keyup="keyup">-->     <!-- 监听 回车 -->     <input type="text" @keyup.enter="keyup">      <!-- 4. .once修饰符的使用 -->     <button @click.once="btn2Click">按钮2</button> </div>  <script src="../js/vue.js"></script> <script>   const app = new Vue({     el: '#app',     data: {       message: "你好,有勇气的牛排"     },     methods: {       btnClick() {         console.log("btnClick")       },       divClick() {         console.log("divClick")       },       submitClick() {         console.log('submitClick')       },       keyup() {         console.log('keyup')       },       btn2Click() {         console.log('btn2Click')       }     }   }) </script> 

5 条件判断

5.1 v-if

<div id="app">     <div v-if="isShow">         <div>666</div>     </div> </div>  <script src="../js/vue.js"></script> <script>   const app = new Vue({     el: '#app',     data: {       isShow: true     }   }) </script> 

5.2 v-if v-else

<div id="app">     <div v-if="isShow">         <div>666</div>     </div>     <div v-else>         <div>isShow为false时, 显示我</div>     </div> </div>  <script src="../js/vue.js"></script> <script>   const app = new Vue({     el: '#app',     data: {       isShow: true     }   }) </script> 

5.3 v-if v-else-if v-else

<div id="app">     <h2 v-if="score>=90">优秀</h2>     <h2 v-else-if="score>=80">良好</h2>     <h2 v-else-if="score>=60">及格</h2>     <h2 v-else>不及格</h2>      <h1>{{ result }}</h1> </div>  <script src="../js/vue.js"></script> <script>   const app = new Vue({     el: '#app',     data: {       score: 99,       // showMessage:"无"     },     computed: {       result() {         let showMessage = ''         if (this.score >= 90) {           showMessage = '优秀'         } else if (this.score >= 80) {           showMessage = '良好'         } else if (this.score >= 60) {           showMessage = '及格'         } else {           showMessage = '不及格'         }         return showMessage       }     }   }) </script> 

5.4 用户登录切换的案例(小问题)

<div id="app">      <span v-if="isUserLogin">       <label for="username">用户账号</label><input type="text" id="username" placeholder="用户账号" key="username">     </span>     <span v-else>         <label for="email">用户邮箱</label><input type="text" id="email" placeholder="用户邮箱" key="email">     </span>      <button @click="isUserLogin = !isUserLogin">切换类型</button>  </div>  <script src="../js/vue.js"></script> <script>   const app = new Vue({     el: '#app',     data: {       isUserLogin: true     }   }) </script> 

5.5 v-show

v-if和v-show对比

  • v-if当条件为false时,压根不会有对应的元素在DOM中。

  • v-show当条件为false时,仅仅是将元素的display属性设置为none而已

开发中国如何选择

  • 当需要在显示与隐藏之间切片很频繁时,使用v-show

  • 当只有一次切换时,通常使用v-if

<div id="app">      <!-- v-if:当条件为false时,包含v-if指令的元素,根本就不会存在dom中-->     <h2 v-if="isShow">{{ message }}</h2>      <!-- v-show:当 条件为false时,v-show只是给我们的元素添加一个行内样式:display:none -->     <h2 v-show="isShow">{{ message }}</h2>  </div>  <script src="../js/vue.js"></script> <script>   const app = new Vue({     el: '#app',     data: {       message: "你好,有勇气的牛排",       isShow: true     }   }) </script> 

6 循环遍历

6.1 v-for遍历数组

语法格式案例:

# 不需要索引 v-for="movie in movies"  # 需要索引 v-for=(item,index) in items 
<div id="app">     <!-- 1. 在遍历的过程中,没有使用索引值(下标值) -->     <ul>         <li v-for="item in names">{{ item }}</li>     </ul>      <!-- 2. 在遍历的过程中,获取索引值 -->     <ul>         <li v-for="(item, index) in names">             {{ index + 1 }} - {{ item }}         </li>     </ul> </div>  <script src="../js/vue.js"></script> <script>   const app = new Vue({     el: '#app',     data: {       names: ['灰太狼', '有勇气的牛排', '导演']     }   }) </script> 

6.2 v-for遍历对象

<div id="app">     <!-- 1. 在遍历对象的过程中,如果知识获取一个值,那么获取到的是value -->     <ul>         <li v-for="item in info">{{ item }}</li>     </ul>      <!-- 2. 获取index, key和value 格式:(value, key) -->     <ul>         <li v-for="(value, key) in info">{{ key }} : {{ value }}</li>     </ul>       <!-- 3. 获取key和value和index 格式:(value, key, index) -->     <ul>         <li v-for="(value, key, index) in info">{{ index + 1 }}-{{ key }} : {{ value }}</li>     </ul> </div>  <script src="../js/vue.js"></script> <script>   const app = new Vue({     el: '#app',     data: {       info: {         name: '灰太狼',         age: 18,         height: 1.88       }     }   }) </script> 

6.3 使用过程添加key

 <div id="app">     <ul>         <li v-for="item in letters" :key="item">{{ item }}</li>     </ul> </div>  <script src="../js/vue.js"></script> <script>   const app = new Vue({     el: '#app',     data: {       letters: ['A', 'B', 'C', 'D', 'E']     }   }) </script> 

6.4 数组方法

<div id="app">     <ul>         <li v-for="item in letters" :key="item">{{ item }}</li>         <!--        <li v-for="item in letters">{{ item }}</li>-->     </ul>     <button @click="btnClick">按钮</button> </div>  <script src="../js/vue.js"></script> <script>   const app = new Vue({     el: '#app',     data: {       letters: ['A', 'B', 'C', 'D', 'E']     },     methods: {       btnClick() {         // 1 push方法         // this.letters.push('666','777')          // 2 pop()  删除数组中最后一个元素         // this.letters.pop();          // 3 shift() 删除数组中第一个元素         // this.letters.shift();          // 4 unshift() 在数组最前面添加元素         // this.letters.unshift('666', '777');          // 5 splice作用:删除元素/插入元素/替换元素         // 删除元素:第二个参数传入你要删除几个元素(如果没有传,就删除后面所有的元素         // 替换元素:第二个参数,表示我们要替换几个元素,后面是用于替换前面的元素         // 插入元素:第二个参数,传入0,并且后面跟上要插入的元素         // this.letters.splice(1, 0, '1', '2')          // 6 sort()         // this.letters.sort();          // 7 reverse()         this.letters.reverse();           // 修改         // 1非响应式         // 通过索引值修改数组中的元素         // this.letters[0] = '666'         // 2响应式         // this.letters.splice(0, 1, '666')         // set(要修改的对象, 索引值,修改后的值)         Vue.set(this.letters, 0, '666');       }     }   }) </script> 

7 阶段案例

购物车案例:

https://gitee.com/net920vip/vue-framework/tree/master/LearnVuejs01

https://github.com/net920vip/vue-framework/tree/master/LearnVuejs01

8 v-model

  • Vue中使用v-model指令来实现单元数和数据的双向绑定
<input type="text" v-model="message"> 

等同于

<input type="text" :value="message" @input="message = $event.target.value"> 

8.1 v-model结合checkbox类型

<div id="app">     <!-- 1 checkbox单选框-->     <!--    <label for="protocol">-->     <!--        <input type="checkbox" id="protocol" v-model="isAgree">同意协议-->     <!--    </label>-->     <!--    <h2>您选择的是:{{ isAgree }}</h2>-->     <!--    <button :disabled="!isAgree">下一步</button>-->      <!-- 2 checkbox多选框-->     <label for="">         <input type="checkbox" value="轻音乐" v-model="hobbies">轻音乐         <input type="checkbox" value="国学" v-model="hobbies">国学         <input type="checkbox" value="思考" v-model="hobbies">思考     </label>     <h2>您的爱好是:{{ hobbies }}</h2>      <label v-for="item in originHobbies">         <input type="checkbox" :value="item" :id="item" v-model="hobbies">{{ item }}     </label>  </div>  <script src="../js/vue.js"></script> <script>   const app = new Vue({     el: '#app',     data: {       isAgree: false,   // 单选框       hobbies: [],       // 多选框       originHobbies: ['国学', '轻音乐', '绘画', '摄影', 'dj', '吉他']     }   }) </script> 

8.2 v-model结合select类型

<div id="app">     <!-- 1 选择一个 -->     <select name="" id="" v-model="hobby">         <option value="国学">国学</option>         <option value="轻音乐">轻音乐</option>         <option value="绘画">绘画</option>     </select>     <h2>您的选择是:{{ hobby }}</h2>      <!-- 1 选择多个 -->     <select name="" id="" v-model="hobbies" multiple>         <option value="国学">国学</option>         <option value="轻音乐">轻音乐</option>         <option value="绘画">绘画</option>     </select>     <h2>您的选择是:{{ hobbies }}</h2> </div>  <script src="../js/vue.js"></script> <script>   const app = new Vue({     el: '#app',     data: {       hobby: "绘画",       hobbies:[]     }   }) </script> 

8.3 v-model修饰符

<div id="app">     <!-- 1 修饰符:lazy -->     <input type="text" v-model.lazy="message">     <h2>{{ message }}</h2>      <!-- 2 修饰符:number -->     <input type="number" v-model.number="age">     <h2>{{ age }}---{{ typeof age }}</h2>      <!-- 3 修饰符:trim -->     <input type="text" v-model.trim="name">     <h2>您输入的名字:{{ name }}</h2>  </div>  <script src="../js/vue.js"></script> <script>   const app = new Vue({     el: '#app',     data: {       message: "你好,有勇气的牛排",       age: 0,       name: ''     }   }) </script> 

转载于:
https://www.920vip.net/article/154