Vue.js - Vue 模板语法
2018-07-24 本文已影响0人
并亲了你一下嘀嗒嘀
双花括号，插值表达式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vue 模板语法</title>
<script src="./vue.js"></script>
</head>
<body>
<!-- 最常见的双花括号，差值表达式 -->
<div id="app">
{{ name }}
</div>
<script>
var app = new Vue({
el: "#app",
data: {
name: "Dududu"
}
})
</script>
</body>
</html>
可以在挂载元素里面使用插值表达式把 data 里的 name 数据插入到 div 标签当中。
可以看到 name 的值正常渲染到网页上：
插值表达式可以进行 JavaScript 简单运算的编写。
v-text 和 v-html ：
我们把 data 里面 name 的值改成 <h1>Dududu</h1> 。分别用 v-text 和 v-html 进行网页渲染。如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vue 模板语法</title>
<script src="./vue.js"></script>
</head>
<body>
<!-- 最常见的双花括号，差值表达式 -->
<div id="app">
<div v-text="name"></div>
<div v-html="name"></div>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
name: "<h1>Dududu</h1>"
}
})
</script>
</body>
</html>
浏览器页面显示会变成这样：
会发现输出的值不一样，而且也没有用双花括号 {{}} 进行插值，还是能显示在页面上。v-xxx 这样开头的都是 Vue 的指令，也是一种模板语法。指令等号后面的值会变成 JavaScript 表达式，也可以进行一些简单的 JavaScript 代码编写，而不是 html 里面的字符串。
v-text ：是把 data 数据的值原封不动的显示在页面上。跟插值表达式的效果是一样的。
v-html ：如果 data 数据的值里面有 html 标签 就会对标签进行编译，变成我们平时写在 html 文件 里面的效果是一样的，就像上面的，写的 <h1></h1> 就会变成它 html 的效果。
