Vue自学之路4-vue模版语法（v-clock)

Vue模板Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。在底层的实现上，Vue 将模板...

Vue模板

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。

在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量，你也可以不用模板，直接写渲染 (render) 函数，使用可选的 JSX 语法。

模版语法

• 插值表达式
• 指令
• 事件绑定
• 属性绑定
• 样式绑定
• 分支循环结构

什么是指令？

指令是一种特殊的自定义属性，其本质就是自定义属性，指令格式由：v-开始。（例如：v-cloak)

v-cloak指令

作用：解决插值表达式的闪动问题。

现象：F5不断刷新的过程中，差值表达式：{{msg}} 和 hello,world 会偶尔交互出现。原因：vue先展示{{msg}},然后再渲染成具体的html。

背后原理：先通过样式隐藏内容，然后在内存中进行值的替换，替换好之后再显示最终的结果。

例子

<style>
    //添加css样式
    [v-cloak] {
        display: none;
    }
</style>
<div id='app'>
    <!-- 插值表达式，div中添加v-cloak属性 -->

    <div v-cloak >{{msg}}</div>
    <!-- 插值表达式，msg在F5刷新的时候会不断地闪动（一会儿是{{msg}}一会儿是"hello world" -->
    <div>{{ msg }}</div>
</div>

<!-- 先下载vue.js -->
<script type='text/javascript' src='js/vue.js'></script>
<script>
//1. html中书写标签
//2. 引入vue.js
//3. 使用vue进行数据渲染。
var vm = new Vue(
    {
        el: '#app', //绑定到id选择器
        data: {
           "msg": "hello world"
        }
    }
)
</script>

传送门：2021最新测试资料&大厂职位

博主：测试生财（一个不为996而996的测开码农）

座右铭：专注测试开发与自动化运维，努力读书思考写作，为内卷的人生奠定财务自由。

内容范畴：技术提升，职场杂谈，事业发展，阅读写作，投资理财，健康人生。

csdn：https://blog.csdn.net/ccgshigao

博客园：https://www.cnblogs.com/qa-freeroad/

51cto：https://blog.51cto.com/14900374

微信公众号：测试生财（定期分享独家内容和资源）