vue学习笔记 模板语法（三）

<div id="kk">
<div>直接输出文本：{{msg}}</div>
<div>自定义过滤器输出文本：{{msg|capitalize}}</div>
<div v-text="msg"></div>

<div v-html="msg"></div>

<div v-once>不会更新的msg：{{msg}}</div>

<div>使用 JavaScript 表达式:{{msg + 1}}</div>
<div>使用 JavaScript 表达式: {{msg == 'hello' ? 'isHello' : 'isHi'}}</div>

指令：
<button v-if="btnIsShow">按钮是否显示</button>
<button v-bind:disabled="btnIsDisabled">按钮是否禁用</button>
<button v-bind:id="btnId" v-bind:title="btnTitle">{{ btnTitle }}</button>
<button :title="btnTitle">{{ btnTitle }}</button>

<a v-on:click="onAClick" v-bind:href="url">aaa</a>
<a @click="onAClick">aaa</a>
</div>
<script type="text/javascript">
var data = { msg: 'hello<em>!!</em>', btnId:'myBtn', btnTitle: '标题文字', btnIsDisabled: true, btnIsShow: false, url:'http://jd.com' }
var vm = new Vue({
el: '#kk',
data: data,
methods: {
onAClick: function () {
console.log('点击了按钮');
}
},
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})
</script>

最基本的功能就是输出普通文本和HTML文本：分别是v-text(也可以用{{}})，v-html

但是这些都是会双向绑定的，如果只想渲染一次，就用v-once

另外，也可以在Mustache里用表达式做一些简单的条件判断。

指令是一些和显示和用户输入相关逻辑判断，比如v-if v-show等等

如果想绑定标签属性的话，用v-bind:属性名来完成

也可以v-bind:省略成: 比如:title等价于v-bind:title

最后是侦听器v-on:click="onAClick"，onAClick是methods里面的自定义函数，v-on:省略成@，简写用@click