Vue基礎語法1

新建Vue實例

const myVue = new Vue({
    el: '#app', //指定vue實例控制的模板區域
    data: {msg: 'Hello Vue'}, //定義數據
    methods: {} //定義方法
})

模板語法

插值表達式

<div id="app">
{{msg}}
</div>

指令

• v-text 在模板中輸入變量,不會解析變量中的HTML標籤

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

• v-html 在模板中輸入變量,會解析變量中的HTML標籤解析

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

• v-show 控制元素的顯示和隱藏,通過css樣式display:none方式實現

<div v-show="true|false"></div>

• v-if 控制元素的顯示與隱藏,通過銷燬DOM元素實現.

<div v-if="true|false"></div>

• v-on 註冊事件

<div v-on:click="click()"></div>
<!-- 上面代碼可以簡寫爲以下格式 -->
<div @click="click()"></div>

• v-bind 動態綁定屬性

<div v-bind:class="className"></div>
<!-- 上面代碼可以簡寫爲以下格式 -->
<div :class="className"></div>