Vue基础之模板语法介绍

前言

上篇我分享了关于Vue的入门，简单的入了个门。本篇文章将要分享的内容为Vue的模板语法。

一、插值

1.1、文本

1.2、html

1.3、属性

1.4、class、style绑定

1.5、表达式

在Vue的模板语法中，插值是一种常用的方式来动态地将数据渲染到视图中。Vue使用双大括号{{}}作为插值的语法标记。

最简单的用法是在模板中直接插入数据值，例如：
<p>{{ message }}</p>
上面的代码将把Vue实例中的message属性的值插入到<p>元素中。

插值还支持JavaScript表达式，你可以在插值中使用表达式来执行计算或调用函数，例如：
<p>{{ message.toUpperCase() }}</p>
上面的代码将把message属性的值转换为大写后插入到<p>元素中。

另外，插值还可以用在HTML属性中，例如：
<a v-bind:href="url">{{ linkText }}</a>
上面的代码使用v-bind指令将url属性的值绑定到<a>元素的href属性上，并将linkText属性的值插入到<a>元素中显示的文本内容中。

需要注意的是，在插值中不能使用括号或赋值语句，因为插值只接受单个表达式。

总结起来，Vue的模板语法中的插值提供了一种简洁而灵活的方式来将数据动态地渲染到视图中可以直接插入数据值，也可以使用JavaScript表达式进行计算和函数调用。此外，插值还可以用在HTML属性中。

案例：

完整代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>插值</title><!-- 引入vue.js的依赖 --><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script></head><body><!-- 定义边界 --><div id="app"><h1>{{msg}}</h1><h6>{{msg}}</h6><h3>演示适用html样式</h3><div v-html="htmlstr"></div><h3>演示vue 中的属性值</h3><input type="text" v-bind:value="val" /><h3>演示Class与style绑值</h3><span :class="f200" v-bind:style="colorblue">二者合为一体</span><h3>演示表达式</h3>{{str.substr((0,5))}}<br />月薪：{{number-2000}}<br />{{ok ? '好' : '不好'}}<br /><span :id="id+'id'">商品id</span></div></body><script>// 绑定边界new Vue({el: '#app',data() {return {msg: '七里香的名字很美',htmlstr: '<span style="color:red;">雨水</span>',val: '输入的值',str: '人生苦短，我用Java',number: 19999,ok: false,id: 'goods_',colorblue: 'color: blue;',f200: 'f200'}}})</script>
</html>

二、指令

核心指令

(v-if|v-else|v-else-if)/v-show/v-for/v-bind/v-on/v-model

v-if|v-else|v-else-if：根据其后表达式的bool值进行判断是否渲染该元素

他们只能是兄弟元素

v-else-if上一个兄弟元素必须是v-if

v-else上一个兄弟元素必须是v-if或者是v-else-if

v-show：与v-if类似，只是会渲染其身后表达式为false的元素，而且会给这样的元素添加css代码：style="display:none"

v-for：类似JS的遍历，

遍历数组: v-for="item in items", items是数组，item为数组中的数组元素

遍历对象: v-for="(value,key,index) in stu", value属性值,key属性名，index下标

v-model：用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值

v-for/v-model一起绑定[多选]复选框和单选框

v-bind插值：v-bind指令用于在HTML属性中插入动态的数据。可以简写为:。
<img :src="imageSrc">
上述代码中，:src将会把imageSrc变量的值作为src属性的值进行插值。

v-on插值：v-on指令用于在HTML事件处理程序中插入动态的方法。可以简写为@。
<button @click="handleClick">Click Me</button>
上述代码中，@click将会将handleClick方法插入到click事件处理程序中。

v-html插值：v-html指令用于将数据作为原始HTML插入到元素中。
<div v-html="htmlString"></div>
上述代码中，htmlString变量的值将会被作为原始HTML插入到<div>元素之中。

v-text插值：v-text指令用于替代双大括号插值，将指定的数据直接作为文本内容插入到元素中。
<p v-text="message"></p>
上述代码中，message变量的值将会作为<p>元素的文本内容。

注意重点：面试考题！！！

区别v-if与v-show？

v-if：
v-if指令根据条件表达式的值来控制元素的存在与否。当条件为true时，元素会被添加到DOM中；当条件为false时，元素会被从DOM中移除。它是惰性的，在条件变为true时才会进行渲染，可以避免不必要的DOM操作。
<div v-if="isShown">This is shown</div>
当isShown为true时，<div>元素会被渲染到视图中；当isShown为false时，<div>元素不会被渲染。

v-show：
v-show指令根据条件表达式的值来控制元素的显示或隐藏，但不会对DOM结构进行改变。当条件为true时，元素会以CSS的方式进行展示；当条件为false时，元素会以CSS的方式隐藏。即使在条件为false时，元素仍然存在于DOM中，只是在视觉上被隐藏了。
<div v-show="isShown">This is shown</div>
当isShown为true时，<div>元素会以可见的方式展示；当isShown为false时，<div>元素通过display: none隐藏，但仍然在DOM中存在。

区别总结：

v-if：根据条件决定元素是否存在于DOM中，惰性渲染。
v-show：根据条件决定元素的显示与隐藏，通过CSS控制。

一般而言，如果需要在条件变化频繁的情况下切换元素的显示与隐藏，或者初始渲染时元素可能不会被显示的情况下，推荐使用v-show。而如果需要在条件改变时有更高的渲染开销，或避免初始化时不必要的渲染，使用v-if更为合适。

案例：

代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>指令</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script></head><body><!-- 定义边界 --><div id="app"><h3>演示v-if 使用</h3>请输入成绩：1-100 <input type="text" v-model="degree" style="color: red;" /><div v-if="degree<=60">等级E</div><div v-else-if="degree<=70">等级D</div><div v-else-if="degree<=80">等级C</div><div v-else-if="degree<=90">等级B</div><div v-else-if="degree<=100">等级A</div><div v-else="">输入成绩不合法</div><h3>演示v-show 与 v-if区别</h3><div v-show="ok">show</div><div v-if="ok">if</div><h3>演示v-for</h3><select><option v-for="h in hobby" :value="h.id">{{h.name}}</option></select><div v-for="h in hobby"><input :value="h.id" type=checkbox />{{h.name}}</div></div></body><script>new Vue({el: '#app',data() {return {degree: 78,ok: false,hobby: [{id: "1",name: "乒乓球"},{id: "2",name: "滑板"},{id: "3",name: "跑步"}],};}})</script>
</html>

三、过滤器

过滤器

全局过滤器

Vue.filter('filterName', function (value) {
// value 表示要过滤的内容

});

局部过滤器

new Vue({
filters:{'filterName':function(value){}}

});

vue允许你自定义过滤器，被用作一些常见的文本格式化，格式如下：



{{ name | capitalize }}



<div v-bind:id="rawId | formatId"></div>

注1：过滤器函数接受表达式的值作为第一个参数

注2：过滤器可以串联

{{ message | filterA | filterB }}

注3：过滤器是JavaScript函数，因此可以接受参数：

{{ message | filterA('arg1', arg2) }}

注4：js定义一个类

function Stu(){};

Stu.prototype.add(a,b){};//添加一个新的实例方法

Stu.update(a,b){};//添加一个新的类方法