Vue實例
1、el：實例
new Vue({
el: '#app'
})
// 實例與頁面掛載點一一對應
// 一個頁面中可以出現多個實例對應多個掛載點
// 實例只操作掛載點內部內容
2、data：數據
<div id='app'>
{{ msg }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
msg: '數據',
}
})
console.log(app.$data.msg);
console.log(app.msg);
</script>
<!-- data為插件表達式中的變量提供數據 -->
<!-- data中的數據可以通過Vue實例直接或間接訪問-->
3、methods：方法
<style>
.box { background-color: orange }
</style>
<div id='app'>
<p class="box" v-on:click="pClick">測試</p>
<p class="box" v-on:mouseover="pOver">測試</p>
</div>
<script>
var app = new Vue({
el: '#app',
methods: {
pClick () {
// 點擊測試
},
pOver () {
// 懸浮測試
}
}
})
</script>
<!-- 了解v-on:為事件綁定的指令 -->
<!-- methods為事件提供實現體-->
4、computed：計算
<div id="app">
<input type="text" v-model="a">
<input type="text" v-model="b">
<div>
{{ c }}
</div>
</div>
<script>
// 一個變量依賴於多個變量
new Vue({
el: "#app",
data: {
a: "",
b: "",
},
computed: {
c: function() {
// this代表該vue實例
return this.a + this.b;
}
}
})
</script>
5、watch：監聽
<div id="app">
<input type="text" v-model="ab">
<div>
{{ a }}
{{ b }}
</div>
</div>
<script>
// 多個變量依賴於一個變量
new Vue({
el: "#app",
data: {
ab: "",
a: "",
b: "",
},
watch: {
ab: function() {
// 邏輯根據需求而定
this.a = this.ab[0];
this.b = this.ab[1];
}
}
})
</script>
6、delimiters：分隔符
<div id='app'>
${ msg }
</div>
<script>
new Vue({
el: '#app',
data: {
msg: 'message'
},
delimiters: ['${', '}']
})
</script>
