一起来学Vue.js【4】

Vue的模板语法

对于像Vue前端框架而言，他是遵守html的语法基础，并在其之上进行扩展，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
1.文本显示
首先来设置文本变量message和name,这里使用的是最常见的“Mustache”语法 (双大括号) 的文本插值。并给div绑定一个Vue对象。文本的值在< script >标签中由Vue对象进行设置。

这是浏览器运行看到的文本。

此外还可以固定文本的值。先改变message的值。


然后在对于的div里加入一个属性。通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。


文本的样式过于单调，通过v-bind为html标签动态绑定属性。比如说class有一个样式标签，样式名为txtcolor,在data里设置样式为blue。


这时候运行代码是没有变化的，但是在浏览器的控制台可以看到class变成了设置的值。

所以在添加内部css标签，设置一个blue属性。

这时候的运行结果就发生改变了。

可能这里有点难于理解，设置一个有一个。首先给div标签绑定动态的class属性，然后在vue对象的data属性中加入class属性值，并给这个属性值赋予一个css样式标签名，通过内部css样式来设置。
2.声明html变量
你需要使用 v-html 指令。第一个< p>标签是用双大括号会将数据解释为普通文本，而非 HTML 代码；第二个< p>标签是使用 v-html 属性，可以把变量的值输出成真正的 HTML。这里都采用统一变量rawHtml。

3.javascript的表达式
在此简单说明第三句表达式，是从message里单个字符截取，然后进行反省排序，最后组合一个新的字符串。

https://cn.vuejs.org/v2/guide/syntax.html