Vue-插值表达式、指令、属性绑定

Vue中{{}}是一种插值表达式，作为js语法的执行环境

<div id="app">
    <h1>{{title}}</h1>
    <h2>{{msg}}</h2>
    <div>{{msg2}}</div>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            title: "标题",
            msg: "6666",
            msg2:'13246'
        }
    })
</script>

打开浏览器效果

 指令：v-text  底层为 xx.innerText=""

            v-html 底层 xx.innerHTML=""

            v-pre 静默(跳过编译)

<div id="app" v-cloak>
    <div>{{msg1}}</div>
    <div>{{msg2}}</div>
    <div v-text="msg3"></div>
    <div v-html="msg4"></div>
    <div v-html="txt"></div>
    <div v-pre>{{msg1}}</div>
</div>

<script>
var vm = new Vue({
    el: '#app',
    data: {
        msg1: 'hello',
        msg2: 'hello2',
        msg3: 'hello3',
        msg4: '<b>hello4</b>',
        txt: '<i>dsnsdkfnsdkfn</i>'
    }
})
</script>

打开浏览器效果

属性绑定：属性前加上v-bind: 或 ： 

<div id="app">
    <div>{{obj.age}}</div>
    <div v-text="obj.name"></div>
    <div v-html="obj.gender"></div>
    <img v-bind:src="obj.touxiang" alt="">
    <a v-bind:href="sina[0].source">{{sina[0].site}}</a>
    <a v-bind:href="sina[0].source" v-html="sina[0].site"></a>
    <input type="text" v-bind:value="email">
    <div v-bind:class="box"></div>
    <input type="text" :value="email">
</div>
<script>
var vm = new Vue({
    el: '#app',
    data: {
        obj: {
            age: 21,
            name: 'jack',
            gender: '男',
            touxiang: 'https://img0.baidu.com/it/u=906022465,3071321602&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
        },
        sina: [{
            source: 'http://www.baidu.com',
            site: '百度'
        }],
        email: '11111@qq.com',
        box: 'div1'
    }
})
</script>

打开浏览器效果