一、Vue 基礎(chǔ)使用
<body>
<div id="app">
<p v-text="username"></p>
</div>
</body>
<script src="./vue.js"></script>
<script>
// 引用vue js框架后媒楼， 瀏覽器加載完畢vue 框架乐尊，window全局就有了一個Vue的構(gòu)造函數(shù)
// 創(chuàng)建Vue 實例對象
const vm = new Vue({
// el屬性是固定的寫法，表示當前vm實例要控制頁面上的哪個區(qū)域划址，接收的值是一個選擇器
el: '#app',
data: {
username: '張三'
}
})
</script>
二 扔嵌、 Vue的指令與過濾器
1、指令的概念
指令： 是vue為開發(fā)者提供的模板語法 夺颤， 用于輔助開發(fā)者渲染頁面的基本結(jié)構(gòu)痢缎。
Vue中的指令按照不同的用途可以分為如下6大類：
1）、內(nèi)容渲染指令
內(nèi)容渲染指令用來輔助開發(fā)者渲染DOM元素的文本內(nèi)容 世澜， 常用的內(nèi)容渲染指令有如下3個：
1》 v-text;
// v-text 代表把變量值渲染到 標簽的內(nèi)容區(qū)域（會覆蓋標簽內(nèi)部內(nèi)容）
<div id="app" v-text="username"></div>
// 會覆蓋p標簽原有內(nèi)容
<p v-text="gender">性別</p>
2》{{ }} 插值表達式
Vue 提供的{{ }} 表達式 独旷， 只是內(nèi)容的占位符，不回覆蓋原有內(nèi)容寥裂。
// 只替換占位符的內(nèi)容
<p>性別：{{ gender }}</p>
// 插值表達式嵌洼，也支持javascript表達式的運算。
{{ flag ? "YES":"NO"}}
3》v-html
可以把帶有標簽的字符串抚恒， 渲染成真正的 html
data: {
username: '張三',
gender : '女',
info:'<div style=\'color:red\'>sssss</div>'
}
// 會把文本內(nèi)容 咱台， 直接顯示成文本， 而不認識html標簽
<p v-text="info"></p>
// 會識別html 標簽俭驮，并識別
<p v-html="info"></p>
2）回溺、屬性綁定指令
插值表達式只能用于內(nèi)容節(jié)點中， 不能用于屬性節(jié)點中混萝。
如果要給某個屬性遗遵，動態(tài)綁定值，可用 v-bind 指令逸嘀，直接在某個屬性前面加v-bind: 即可车要。同時這個指令可以簡寫成 “:”
// 這兩種寫法都可以
<input v-bind:placeholder="tip"/>
<input :placeholder="tip"/>
屬性表達式里面， 也支持簡單的表達式運算
// 在data 中定義了 index變量崭倘，如果告訴vue 翼岁， 要查找一個叫 index的變量
// 如果在屬性綁定指令中类垫，運用表達式，則把固定的字符串用單引號括起來琅坡，然后用 + 拼接變量即可 悉患。 實例如下：
<div :id="'id_'+index" :title="'id_'+index">aaaa</div>
3）、事件綁定指令
要想綁定事件榆俺，先在Vue構(gòu)造函數(shù)中售躁， 添加: methods 屬性，并在methods 對象中添加方法
const vm = new Vue({
// el屬性是固定的寫法茴晋，表示當前vm實例要控制頁面上的哪個區(qū)域陪捷，接收的值是一個選擇器
el: '#app',
data: { count : 1 }
methods:{
// 這里可以使用簡寫的方式，去掉 :function 即可
myclick :function(n) {
// 這里vm 诺擅，可以使用this 替代市袖，即：this.count += n
vm.count += n
},
myclick1 (n,e) {
this.count += n
if(this.count % 2 == 0){
e.target.style = "background:red"
}else{
e.target.style = "background:yellow"
}
console.log("================",e)
}
}
})
// 然后在元素中 click 屬性綁定這個方法，也可以簡寫方式：
<button v-on:click="myclick(3)">click</button>
// 簡寫
<button @click="myclick(3)">click</button>
<!--vue 提供了一個內(nèi)置對象：$event , 代表的就是原生事件對象 , 如果不傳自定義參數(shù)烁涌，自帶了原生事件對象-->
<button @click="myclick1(1, $event)">click</button>
事件修飾符
在事件處理程序中調(diào)用 event.preventDefault() 或 event.stopPropagation() 是非常常見的需求凌盯。
event.preventDefault() 這個是停止默認事件處理流程
// 阻止單擊事件繼續(xù)傳播
<a v-on:click.stop="doThis"></a>
// 提交事件不再重載頁面 ，
<form v-on:submit.prevent="onSubmit"></form>
4）烹玉、雙向綁定指令
示例
<p>用戶名：{{ username }}</p>
// 通過v-model 指令進行雙向綁定 ， v-model 在底層監(jiān)聽的就是value屬性
<input v-model="username" />
// 通過v-bind 屬性綁定阐滩， 也可以顯示數(shù)據(jù)二打，但是當input內(nèi)容變化時，變量不會變化
<input :value="username"/>
// 通常情況下掂榔，可以用 v-model 替換 v-bind:value
v-model 修飾符
v-model.number
<input type="text" v-model.number="n1"/> + <input type="text" v-model="n2"/> = <span>{{n1 + n2}}</span>
// 如果不做限制继效，input 可以輸入任意字符串，有時候我們只允許用戶輸入數(shù)字装获，那么就可以修飾符的方式控制瑞信。
v-model.trim
<input type="text" v-model.trim="username"/>
// 用戶在輸入框 中字符串前后輸入空格，會被自動清理
v-model.lazy
<input type="text" v-model.lazy="username"/>
// 默認情況下穴豫，輸入框的內(nèi)容變化會實時同步到變量中凡简，但有時候，我們只需要在輸入框失去焦點的時候精肃，才去監(jiān)聽內(nèi)容秤涩。
5）、條件渲染指令
v-if
如果條件是true 司抱，就加載元素筐眷，否則就不會解析加載元素
v-show
如果條件是true， 瀏覽器也會解析元素习柠，但是會把元素隱藏
6）匀谣、列表渲染指令
v-for
基礎(chǔ)使用照棋，在想要循環(huán)生成的元素標簽上加上 v-for 指令即可
list:[
{id:1,name :'張三'},
{id:2,name :'李四'},
{id:3,name :'王五'},
]
...
<li v-for="item in list">
{{item.name}}
</li>
// 添加一個列表索引 ， 用到了索引 index 武翎， 就要添加一個:key 屬性綁定烈炭，并綁定索引 ， 且:key 的值只能是 數(shù)字或者字符串后频，且值不能重復(fù)
<li v-for="(item,idx) in list" :title="'id_'+item.name + '_' +idx" :key="idx">
{{item.name}}
</li>
key的注意事項
key的值只能是字符串或數(shù)字類型
key的值必須具有唯一性
建議把屬性的id屬性的值 作為key的值
建議使用v-for指令時梳庆，一定要指定key的值
使用index的值當作key的值 沒有任何意義
2、過濾器
需要注意的點
過濾器在Vue3.x中已經(jīng)被作廢卑惜，
過濾器只用于 插值表達式和 v-bind 屬性綁定指令 中
過濾器 由管道符 進行調(diào)用
過濾器函數(shù)必須有返回值膏执，最后顯示的是過濾器函數(shù)的返回值
在過濾器的第一個形參就能拿到 實際參數(shù)
過濾器函數(shù)，必須聲明在 filters 屬性中（與data露久、methods 同級）
三更米、偵聽器
偵聽變量變化
1、 函數(shù)格式的偵聽器
<div id="app">
<input type="text" v-model="username">
</div>
const vm = new Vue({
el: '#app',
data: {
username: '張三',
},
// 所有的偵聽器 毫痕， 都要定義在watch 屬性節(jié)點下面
watch :{
// 本質(zhì)上是一個函數(shù)征峦， 要偵聽哪個變量，就用這個變量作為方法的名稱
username(newVal , oldVal){
console.log("=============newVal ---oldVal", newVal, oldVal)
}
}
})
缺點：
1消请、進入頁面不會自動觸發(fā)偵聽器
2栏笆、如果偵聽的是一個對象 ，如果對象中的屬性發(fā)生了變化臊泰，不會觸發(fā)偵聽器
2蛉加、屬性格式偵聽器
<div id="app">
<input type="text" v-model="info.username">
</div>
const vm = new Vue({
el: '#app',
data: {
info:{
username: '張三',
}
},
// 所有的偵聽器 ， 都要定義在watch 屬性節(jié)點下面
watch :{
username:{
// 里面的方法名稱必須是 handler 缸逃， 否則報錯
handler(newVal , oldVal){
console.log("=====newVal ---oldVal", newVal, oldVal)
},
// immediate 默認值是false 针饥， 作用是：控制偵聽器是否立即執(zhí)行
immediate : true ,
// deep 默認值是 false , 開啟深度偵聽 ， 只要對象中的任何屬性發(fā)生變化需频，就會觸發(fā)
deep:true
}
// 偵聽對象中的某個屬性丁眼，需要用單引號括起來，這樣只會偵聽指定的屬性
'info.username':{
handler(newVal , oldVal){
console.log("==========newVal , oldVal" , newVal , oldVal)
},
}
}
})
好處：
1昭殉、可以通過immediate 控制苞七，是否立即偵聽
2、可以通過deep 控制饲化，是否要深度偵聽
3莽鸭、可以偵聽對象中的某個具體屬性的變化
三、計算屬性
通過一些列運算后吃靠， 得到一個屬性值硫眨，這個計算得到的屬性值， 可以在模板結(jié)構(gòu)或methods 方法中使用
const vm = new Vue({
el: '#app',
data: {
r: 0,
g: 0,
b: 0,
},
// 所有的計算屬性都要放在 computed 節(jié)點中
computed: {
// 計算屬性要寫成函數(shù)的形式
rgb() {
return `rgb(${this.r},${this.g},${this.b})`
}
}
})
// 通過打印vm 對象， 可以發(fā)現(xiàn)vm多了一個 rgb 的屬性
console.log("=====", vm)
計算屬性 與 偵聽器的區(qū)別
1礁阁、computed 是同步的巧号， watch 可以實現(xiàn)異步
2、computed 必須有返回值姥闭， watch 里面的函數(shù)可以不寫返回值
3丹鸿、同時偵聽多個屬性變量時，盡量用計算屬性
