一、基本語(yǔ)法
為什么組件內(nèi)的data必須是函數(shù)？
為了讓每個(gè)組件有自己的保存對(duì)象的實(shí)例，實(shí)現(xiàn)復(fù)用
v-xxx指令
-
v-bind數(shù)據(jù)綁定，語(yǔ)法糖為:-
:class動(dòng)態(tài)綁定class，例：對(duì)象語(yǔ)法:class="{classA:true,classB:false}" -
:style綁定style，例：對(duì)象語(yǔ)法:style="{fontSize:'20px',color:'red'}"
-
-
v-on事件監(jiān)聽(tīng)，語(yǔ)法糖為@-
.stop阻止事件冒泡 -
.self當(dāng)事件在該元素本身觸發(fā)時(shí)才觸發(fā)事件 -
.capture添加事件偵聽(tīng)器是，使用事件捕獲模式 -
.prevent阻止默認(rèn)事件 -
.once事件只觸發(fā)一次 -
.<keycode>監(jiān)聽(tīng)按鍵按下
-
-
v-model數(shù)據(jù)雙向綁定-
.lazy把oninput事件改成onchange事件 -
.number把 v-model 的值轉(zhuǎn)換成數(shù)值類型 -
.trim過(guò)濾輸入時(shí)首尾的空格字符
-
-
v-forfor循環(huán)，遍歷元素，建議綁定唯一標(biāo)識(shí):key -
v-if、v-else-if、v-else為true時(shí)顯示 -
v-show為true時(shí)顯示 -
v-if和v-show效果一樣，如果頻繁切換狀態(tài)請(qǐng)用v-show -
v-once只渲染一次，后面改動(dòng)數(shù)據(jù)也不會(huì)重新渲染 -
v-html以html方式進(jìn)行渲染 -
v-text把綁定的數(shù)據(jù)覆蓋標(biāo)簽內(nèi)的內(nèi)容 -
v-pre原封不動(dòng)的展示，不進(jìn)行解析 -
v-cloak用來(lái)解決瀏覽器會(huì)顯示未編譯的mustache語(yǔ)法，防止閃動(dòng)
//.css
[v-cloak]{
display:none;
}
- 在
html中展示data數(shù)據(jù)，使用mustache語(yǔ)法，即雙括號(hào){{}}包裹
Vue實(shí)例中的options
-
el管理的域，用id屬性來(lái)獲取 -
data存放變量 -
methods存放函數(shù) -
computed計(jì)算屬性，用來(lái)動(dòng)態(tài)計(jì)算獲取屬性 -
watch監(jiān)聽(tīng)某個(gè)變量的變化
注:深度watch監(jiān)聽(tīng)對(duì)象內(nèi)部的改變，數(shù)組的改變不需要使用深度watch
二、創(chuàng)建簡(jiǎn)單app
<html>
<head>
<style>
[v-cloak] {
display:none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<h1 :title="msg">名字是：{{name}}</h1> //頁(yè)面顯示 '名字是：張三'，鼠標(biāo)放在h1上面顯示'這是message'
<h1>{{name11}}</h1>//顯示計(jì)算后的名字 '張三11'
<h2 :class="{classA:true,classB:false}">動(dòng)態(tài)綁定class</h2>
<h3 v-html="url"><h3> //顯示百度a鏈接
<h3 v-text="msg">該內(nèi)容會(huì)被"這是message"覆蓋</h3>
<ul>
<li v-for="(item,index) in charArr" :key="index">{{item}}</li>//遍歷li元素
</ul>
<button @click="btnclick">按鈕</button>
</div>
<script src="vue.js"></script> //先下載vue.js 或者 使用cdn遠(yuǎn)程引入
<script>
const app = new Vue({
el: '#app',
data: {
name: "張三",
msg: "這是message",
url: '<a ，
charArr: ['a','b','c']
},
methods: {
btnclick() {
console.log('按鈕被點(diǎn)擊了')
}
},
computed: {
name11() {
return this.name + '11'
}
/* computed中的getter和setter
name11(){
set: function(newvalue) { //基本不用
this.name = newvalue
},
get: function() {
return this.name + '11'
}
}
*/
},
watch: {
name(newvalue,oldvalue){
this.name = newvalue + ',' + oldvalue
}
/* 另一種寫法
name: {
handler(newvalue,oldvalue){
},
immediate: true, //第一次綁定也執(zhí)行handler
deep: true //深度監(jiān)聽(tīng)
}
*/
}
})
</script>
</body>
</html>
