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

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

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