模板语法
Vue使用了基于HTML的模板语法，语序开发这声明式将dom绑定在底层Vue实例的数据。Vue的模板都是合法的HTML，可以被浏览器和html构造器解析
Vue将模板编译成虚拟DOM渲染函数，结合响应式系统，Vue可以只能计算最少需要重新渲染多少组件，将dom操作次数减少的最少。
如果不想使用模板，可以不用模板，直接写渲染（render)函数，使用可选的jsx语法
插值
1.文本
Mustache 语法（双大括号）。Mustanche标签将会被替代为对应数据对象的值。当绑定数据对象上的属性发生了改变，插值处的内容都会更新
v-once 指令，可以执行一次性的插值，当数据改变时，插值处的内容不会更新。但这会这会影响到该节点上其他数据的绑定
2.原始HTML
双大括号会将数据解释为普通文本，而不是html代码，为了输出真正的html，需要使用v-html指令
以下实例为 v-once和v-html使用实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo1</title>
<script type="text/javascript" src='vue.js'></script>
</head>
<body>
<div id="app">
<span v-once>这个将不会改变: {{ msg }}</span>
<div>{{msg}}</div>
<div id="app"> {{htmlStr}} </div>
<p>Using v-html directive: <span v-html='htmlStr'></span></p>
</div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data: function() {
return {
htmlStr: '<span style="color:red;">this is html block</span>',
msg: 'this is a message'
}
}
});
app.$data.msg = '123'
</script>
</body>
</html>
执行结果：
<span style="color:red;">this is html block</span>
Using v-html directive: this is html block
注意： 不能使用v-html来复合局部模板，因为Vue不是基于字符串的模板引擎。对于用户界面（UI），组件更适合作为可重用和可组合的基本单位
如果在站点上使用动态渲染任意html，可能会非常危险，因为很容易导致XSS攻击。请只对可信任内容使用html插值，绝对不可以使用用户提供的内容使用插值
3 Attribute
Mustache语法不能作用在HTML Attribute上， 遇到这种情况应该使用v-bind执行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo1</title>
<script type="text/javascript" src='vue.js'></script>
</head>
<body>
<div id="app">
<div v-bind:id="id"></div>
<button v-bind:disabled="ifDisabled" >测试脚本</button>
</div>
<script type="text/javascript">
var data = {id: "testid",
ifDisabled : true}
var app = new Vue({
el:'#app',
data: data
});
app.$data.msg = '123'
</script>
</body>
</html>
- 非布尔
- 布尔
渲染出来的html如下：
<div id="app"><div id="testid"></div> <button disabled="disabled">测试脚本</button></div>
4 使用javaScript
针对所有类型的绑定，Vue提供了javaScript的支持
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo1</title>
<script type="text/javascript" src='vue.js'></script>
</head>
<body>
<div id="app">
<div v-bind:id="'stitic_' + id"></div>
{{ifDisabled ? "yes" : "no"}}
</div>
<script type="text/javascript">
var data = {id: "testid",
ifDisabled : true}
var app = new Vue({
el:'#app',
data: data
});
app.$data.msg = '123'
</script>
</body>
</html>
执行结果：
<!-- 这些表达式作为JavaScript被解析 -->
<div id="app"><div id="stitic_testid"></div>
yes
</div>
有个限制，每个绑定都只能是包含单个表达式，否则是不会生效的
<!--非表达是-->
{{var a = 1}}
<!--流程控制也不生效，要使用三元表达似乎-->
{{ if(ifDisabled){ return "mesage"}}}
指令
指令（Directives)事带有v-前缀的特殊 attribute。指令attribute的值预期是单个javascript表达式（v-for是例外情况）。指令的指职责是，当表达是的值变动时，将其产生的连带影响，响应式的作用与Dom。
<p v-if='seen'>现在你看到我了</p>
这里v-if指令将根据表达是seen的值真假来插入和移除<p> 元素
参数
一个指令可以接收一个参数，在指令名称之后以冒号标识。，例如 v-bin指令可以用于响应式的更新HTML attribute
html <a v-bind:href='url'>...</a>
href是参数，告知v-bind质量将该元素的href属性与表达式url的值绑定，再来一个v-on指令，用于监听DOM事件
<a v-on:click='doSomething'> ... </a>
监听 点击事件
动态参数-新增属性（2.6）
<!-- 参数表达式的写法存在一些约束-->
<a v-bind:[attributeName]="url">xxx </a>
这里的 attributeName会被作为一个js的表达式进行动态求值，求得值后将作为最终参数来使用。同样的，可以使用动态参数未一个动态事件名绑定处理函数
<a v-on:[enventName]="doSomeThing">xxx</a>
动态参数的约束
-
值的约束
动态参数预期会求出一个字符串，异常情况下值未null,这个特殊的null值可以被显示的用于移除绑定。任何其他非字符串类型的值都会触发一个警告 -
表达式的约束
动态参数表达式有一些语法约束，某些字符串，入空格和引号，放在html里的attribute名里式无效的。
<!-- 这会触发一个编译警告 -->
<a v-bind:['foo' + bar]="value"> ... </a>
变通的办法是使用没有空格或引号的表达式，或用计算属性替代这种复杂表达式。
在DOM中使用模板时（直接在一个html文件里撰写模板），还需要避免使用大写字符来命名键名，因为浏览器会把attribute名全部强转未小写。
<!--
在 DOM 中使用模板时这段代码会被转换为 `v-bind:[someattr]`。
除非在实例中有一个名为“someattr”的 property，否则代码不会工作。
-->
<a v-bind:[someAttr]="value"> ... </a>
修饰符
（modifier）是以半角句号. 指明的特殊后缀，用于指定一个指令需要以特殊方式绑定。
.prevent修饰v-on指令，对于触发的事件调用 event.preventDefault()
<form v-on:submit.prevent='onSubmit'> ... </form>
缩写
<!-- v-bind -->
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>
<!-- v-on -->
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>
<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>
网友评论