Vue模板语法

所有的Vue.js的模板都是合法的HTML，能够被遵循规范的浏览器和HTML解析器解析

插值

插文本

<div id="app">
<p>message is :{{message}}</p>
</div>

js代码

var data={message:"hello vue.js"};
var app=new Vue({
el:"#app",
data:data,
})
app.message="21212";

插html

<div id="app">
<p v-html="html">message is :{{html}}</p>
</div>

var data={html:"<h1>sasas</h1>"};
var app=new Vue({
el:"#app",
data:data,
})

但是这个不建议使用，会造成XSS漏洞

绑定属性

v-bind指令

<div id="app">
<p v-html="html">message is :{{html}}</p>
<p v-bind:id="cc"></p>
</div>

js代码

var data={html:"<h1>sasas</h1>",cc:"dd"};
var app=new Vue({
el:"#app",
data:data,
})

最后p的id变成了dd，

过滤器

使用自定义的过滤器的目的是对一些常见的文本对其进行格式化

过滤器的使用：

(1)全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面

(2) 过滤器函数始终以表达式的值作为第一个参数。带引号的参数视为字符串，而不带引号的参数按表达式计算

(3)可以设置两个过滤器参数,前提是这两个过滤器处理的不冲突

(4)用户从input输入的数据在回传到model之前也可以先处理

但是在vue2.0以后支持度不好

<div class="test">
<p>{{message | sum}}</p>
</div>

js代码

Vue.filter("sum", function(value) {   //全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面
return value + 4;
});

var myVue = new Vue({
el: ".test",
data: {
message:12
}
});

指令接受参数

v-bind:class v-on:click 其中的class和click都是指令的参数

同时值得注意的是因为vue中经常使用的两个指令：

v-bind:href=”url”和v-on:click=”ccc”有缩写的形式:href和@click

<div class="test">
<button @click="sum">saas</button>
</div>

js代码

var myVue = new Vue({
el: ".test",
data: {
message:12
},
methods:{
sum:function () {
console.log(11);
}
}
});