vue基础-template

<span>Message: {{msg}}</span>

<script>
 export default{
    data():{
        return {
          msg:'test ceshi'
        }
    }
}
</script>

<div id="app">
    <p>{{ foo }} </p>
    <button v-on:click="foo = 'baz'">change it</button>
</div>

<script>
var obj = {
    foo : 'bar'
}
Object.freeze(obj)

new Vue({
    el:'#app',
    data: obj
})
</script>

其他指令

• 一次赋值

<span v-once>这个将不会改变: {{ msg }}</span>

• 动态属性

<div v-bind:id="dynamicId"></div>
<a v-bind:href="url">...</a> //缩写

• 动态布尔属性

<button v-bind:disabled="isButtonDisabled">Button</button>

• v-on

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>
<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

• v-if

<p v-if="seen">现在你看到我了</p>
// 'seen' is true show <p>