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

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>

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>

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

我们可以使用驼峰式（cameCase）fontSize
或短横线分隔（kebab-case，记得用单引号括起来）'font-size'

绑定class有两种方式

对象语法

<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>

数组语法

<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 计算属性

某些情况下，我们可能需要对数据进行一些转换后再显示，或者需要将多个数据结合起来进行显示

比如：有firstName和lastName两个变量，我们需要显示完整的名称。
但是如果多个地方都需要完整的名称，就需要写多个{{ firstName }} {{ laseName }}

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

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 = 0for (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

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

Vue 事件绑定事件修饰符条件判断循环遍历
事件绑定 v-on:事件简写:@事件 <div id="app"><h2>{{counter}} </h2><button v-on:c ...
JS中事件绑定的方式以及事件监听和事件的委托
在javascript中,到我目前的学习中总结得到的认知是在事件触发阶段主要是由于事件流: 我们在HTML中先设置一个div: <div class="box">< ...
Vue02基础语法-插值+过滤器+计算属性+计算属性
14天阅读挑战赛努力是为了不平庸~ 目录 1.模板语法 1.1 插值 1.1.1 文本 1.1.2 html 1.1.3 属性 1.1.4 表达式 1.2 指令:指令指的是带有"v-&qu ...
Vue基础——VueJS是什么、Vue的优缺点、vue2和vue3的模板区别、MVVM数据双向绑定、Vue的安装和使用、Vue模板语法-文本渲染、常用的vue的指令
目录一.VueJS是什么? 二.Vue的优缺点三.MVVM 数据双向绑定四.Vue的安装和使用五.Vue模板语法-文本渲染六.常用的vue的指令一.VueJS是什么? 它是一个轻量级MVV ...
二、Vue基础语法学习笔记——事件监听v-on、条件判断（v-if、v-else-if、v-else、v-show）、循环遍历（v-for遍历数组对象，key属性、检测数组更新）、图书案例、双向绑定
四.事件监听在前端开发中,我们需要经常和用于交互. 这个时候,我们就必须监听用户发生的时间,比如点击.拖拽.键盘事件等等在Vue中如何监听事件呢?使用v-on指令 v-on介绍作用:绑定事件监听 ...
[Vue] 模板语法
vue的一些基础用法第一章插值操作 1.1 Mustache 1.2 v-once 1.3 v-html 1.4 v-text 1.5 v-pre 1.6 v-cloak 第二章绑定属性 2.1 ...
Vue模板语法的缩写是什么？
Vue模板语法缩写是VTL(View Template Language),这是一种用于构建用户界面的声明式编程语言.它基于HTML,但具有更强大的数据绑定功能.下面是一些VTL的例子: 绑定文本: ...
灵魂拷问：你是否懂得所有的Vue模板语法呢？
作者 | Jeskson 掘金 | https://juejin.im/user/5a16e1f3f265da43128096cb Vue.js的创建者为尤雨溪,2014年,Vue.js正式发布,20 ...
4.Vue 模板语法
Hello,我是 Alex 007,一个热爱计算机编程和硬件设计的小白,为啥是007呢?因为叫 Alex 的人太多了,再加上每天007的生活,Alex 007就诞生了. Vue模板语法这篇文章我们来 ...

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