上篇
1.vue模板语法
Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解析器解析。
在底层的实现上,Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统,Vue 能够智能地计算出最少需要重新渲染多少组件,并把 DOM 操作次数减到最少。
(1)插值(基本的数据绑定)
在这里插入图片描述
对应的数据随绑定值的变化而变化
不能使用v-html来复合局部模板,因为Vue不是基于字符串的模板引擎。
(2)使用 JavaScript 表达式
对应数据绑定有特定的js表达式

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析,但是每次解析只能是一个表达式,否则失效。
(3)指令
指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。
3-1 v-if
v-if是条件渲染指令,它根据表达式的真假来删除和插入元素
基本语法:
v-if=“a”
a是一个返回布尔值的表达式,通过返回值的真假判断是否执行后续代码。

<div id="app">
            <div v-if="isMale">正确</div>
            <div v-if="age>=10">age:{{age}}</div>
        </div>
        
var vm = new Vue({
            el: '#app',
            data: {
                age:5,
                isMale:true,
            }
        })

3-2 v-show
v-show不管条件是否成立,都会渲染html,而v-if只有条件成立才会渲染。
在这里插入图片描述
在这里插入图片描述当条件不成立时,v-if不渲染页面,而v-show渲染页面,只是在页面中添加css样式(display:none)将内容隐藏起来。
v-else
通常配合v-if或v-show使用。当条件不成立时出现。

在这里插入图片描述
在这里插入图片描述
3-3 v-for
一个基于数组循环的指令,通常用于渲染列表,它和JavaScript的遍历语法相似;
v-for=“item in list” list是一个数组,item是当前遍历的数组元素
v-for="(item,index) in list"其中index是当前循环的索引,下标从0开始
在这里插入图片描述
在这里插入图片描述
3-4 v-bind
用于动态地绑定一个或多个特性,可以在其名称后面带一个参数,中间放一个冒号隔开,这个参数通常是HTML元素的特性(attribute),如v-bind: class
class可以和v-bind:class同时存在 ,也就是说有class了,再添加v-bind:class并不会覆盖原来的样式类,而是在原来基础上添加新的类名。
在这里插入图片描述
在这里插入图片描述
3-5 v-on
用于监听DOM事件,用法和v-bind类似。
在这里插入图片描述
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐