01，文本{{name}}
02，html片段v-html="name"【data对象中初始化数据的属性名】
注意：//style中的一条条规则不能含有空格,不然会被当作断字符,从而打上"号
03，v-bind指令特性绑定之布尔特性
注意：
·* 与在html直接表明布尔属性用法略有不同
* html直接填写：属性的存在与否就暗示true/false
* vue：null/defined/false都表明false，其余都表明true
04，javascrpt表达式
注意：
每个绑定都只能包含单个表达式，且不能是语句。
表达式不是语句
05，指令参数_静态参数，如v-bind:href="url"冒号后面为参数href
06，指令参数_动态参数
注意：当参数为特性名时，如href，浏览器会把特性名全部强制转为小写。
07，指令缩写
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>模板语法</title>
</head>
<body>
<div id="app">
<!-- 文本 -->
<p>{{name}}</p>
<!-- 原始HTML，进行嵌套，不推荐 -->
<p> <span v-html="rawHtml"></span> I miss you </p>
<!-- v-bind指令特性绑定之布尔特性 -->
<input type="checkbox" :checked="checked" />
<!-- javascrpt表达式 -->
<p>{{name + " I miss you"}}</p>
<!-- 指令参数_静态参数 -->
<a v-bind:href="url">静态参数</a>
<!-- 指令参数_动态参数 -->
<a v-bind:[attr]="url">动态参数</a><br />
<!-- 指令缩写 -->
<input v-bind:value="name" /><br />
<input :value="name" /><br />
<p v-on:click="click">未缩写的我</p>
<p @click="click">缩写的我</p>
</div>
</body>
<script src="js/vue2.0.js"></script>
<script type="text/javascript">
const vm = new Vue({
el: "#app",
data: {
name: "burningSnow",
//style中的一条条规则不能含有空格,不然会被当作断字符,从而打上"号
rawHtml: "<span style=color:red;>burningSnow</span>",
/**
* 与在html直接表明布尔属性用法略有不同
* html直接填写：属性的存在与否就暗示true/false
* vue：null/defined/false都表明false，其余都表明true
*/
checked: "",
url: "#111",
attr: "HREF"
},
methods: {
click: function() {
console.log("OK");
}
}
})
</script>
</html>
菜鸟爬行中…
6653
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
