目錄
前言
一，初入Vue大陸
1.Vue的初體驗
1.Vue的特點
2.引入vue
3.可能出現(xiàn)的問題
4.創(chuàng)建Vue實例
5.模板語法
6.數(shù)據(jù)綁定
7.連接容器的方法
8.data的寫法
二，MVVM模型
三，數(shù)據(jù)代理
1.對數(shù)據(jù)進行讀取和修改
?2.事件修飾符
3.鍵盤事件
最后
?文章來源地址http://www.zghlxwxcb.cn/news/detail-481612.html
前言
??對于看到這篇文章的小伙伴呢！肯定是即將到達(dá)四周目Vue篇了吧，從此刻開始正式踏入Vue篇，內(nèi)容絕對真實有效，本欄會細(xì)致的將Vue劃分為兩大模塊，基礎(chǔ)篇，進階篇。想要順利通關(guān)vue篇首先要擁有三劍客，當(dāng)然其他的node ajax法寶也會輔佐你通關(guān)的，在學(xué)習(xí)的途中如果遇到了問題，可以試著回顧一下之前的情節(jié)，以便于更好的推進主線劇情，準(zhǔn)備出發(fā)!
一，初入Vue大陸
1.Vue的初體驗
一套用于構(gòu)建用戶界面的漸 進式JavaScript框架
1.Vue的特點1
1.采用的是組件化模式，提高代碼復(fù)用率且讓代碼更好維護。
2.聲明式編碼，讓程序猿 / 媛無需直接操作DOM,提高開發(fā)效率。
3.使用虛擬DOM和優(yōu)秀的Diff算法，盡量復(fù)用DOM節(jié)點。
2.引入vue
找到官網(wǎng)：Vue官網(wǎng)
點擊教程
然后選擇安裝，（這里有倆版本，一個是開發(fā)的，一個是生產(chǎn)的，一般我們使用vue.js進行學(xué)習(xí)）
這倆的區(qū)別就是有無提示的問題
?下載完成之后將vue.js文件放到我們的包里面并且引入
下載Vue擴展Vue擴展?提取碼：1127
下載成功并且開啟后就會顯示這個vue的圖標(biāo)，這個可以更好的輔助我們進行vue的相關(guān)操作?
3.可能出現(xiàn)的問題
問題1：控制臺出現(xiàn)提示
?文章來源：http://www.zghlxwxcb.cn/news/detail-481612.html
如何關(guān)閉呢？（打開vue.js文件然后CTRL+f查找 productionTip ，最后再將該語句的true改為false）也可以直接 寫上這串代碼 Vue. config. productionTip = false；
?問題2：出現(xiàn)404的錯誤
直接去比特沖將一張圖片轉(zhuǎn)換為ico圖標(biāo)的樣式并且將名稱改為favicon.ico即可
?問題3：啥錯誤提示也沒看到
打開vscode點擊插件，查找一個“ Live Serve”的插件即可
4.創(chuàng)建Vue實例
這里遵循一對一原則，一個vue實例只能操作一個容器
<body>
<!-- 創(chuàng)建一個容器 -->
<div id="root">
<h1>hello,{{name}}</h1> <!-- 使用插值語法用雙重花括號包裹{{}} 也就是【vue模板】-->
</div>
<h1>{{name}}</h1><!-- 這里的Vue實例只是接管了id名為root的容器，所以只能再該容器中使用 -->
<script>
// 創(chuàng)建Vue實例,直傳一個參數(shù)
new Vue({
el: '#root',// el用于指定當(dāng)前Vue實例為那個容器服務(wù)，值一般為css選擇器字符串
data: {
name: 'Vue小嘎魚'
}
})
</script>
</body>注：使用Vue的第一步就是創(chuàng)建實例?，容器里的代碼在符合html規(guī)范的語法基礎(chǔ)上新增了Vue的一些特殊語法，容器里的代碼被稱為[Vue模板]，Vue實例和容器是一 一對應(yīng)的，在實際開發(fā)中有且只有一個Vue實例并且會配合著組件起使用，{{js表達(dá)式}}且js表達(dá)式可以自動讀取到data中的所有屬性，如果data中的數(shù)據(jù)發(fā)生改變，那么頁面中所有用到該數(shù)據(jù)的地方也會自動更新
5.模板語法
1.插值語法:
功能:用于解析標(biāo)簽體內(nèi)容。
寫法: {{js表達(dá)式}}，且可以直接讀取到data中的所有屬性。
2.指令語法:
功能:用于解析標(biāo)簽(包括:標(biāo)簽屬性、標(biāo)簽體內(nèi)容、綁定事件等)
例: v- bind:href="xx"或簡寫為 ：href="xxx", xxx同樣要寫js表達(dá)式且可以直按讀取到data中的所有屬性。
注: Vue中有很多的指令，且形式都是: v-xxx(還有v-model，v-if等)
6.數(shù)據(jù)綁定
Vue中有2種數(shù)據(jù)綁定的方式
1.單向綁定(v-bind):數(shù)據(jù)只能從data傳入頁面。
2.雙向綁定(v-model):數(shù)據(jù)不僅能從data傳入頁面，還可以從頁面?zhèn)魅雂ata
3.雙向綁定一 般都應(yīng)用在表單類元素上(如: input、 select等)
4.v-model:value可以簡寫為v- model,因為v- model默認(rèn)收集的就是value值。
<body>
<div class="inp">
<!-- 單向數(shù)據(jù)綁定只能從data流向頁面，而雙向數(shù)據(jù)綁定可以互相流動 -->
單向數(shù)據(jù)綁定：<input type="text" :value="name"><br>
<!-- 注：v-model只能應(yīng)用到表單類元素上 -->
雙向數(shù)據(jù)綁定：<input type="text" v-model:value="name">
</div>
<script>
new Vue({
el: ".inp",
data: {
name: '山魚'
}
})
</script>
</body>7.連接容器的方法
<body>
<div class="one">
<h1>你好，{{name}}</h1>
</div>
<script>
const a= new Vue({
// el:'.one', 第一種寫法
data:{
name:'shanyu'
}
})
a.$mount('.one')// 第二種寫法
</script>
</body>直接使用el更簡單
?使用 實例使用對象原型里面的$mount也可以實現(xiàn)綁定 ，名.$mount('容器名')的方法更靈活
8.data的寫法
分別為對象式和函數(shù)式
<script>
new Vue({
el: '.one',
// 第一種對象式
data: {
name: '山魚'
},
// 第二種函數(shù)式
// 這里不可以使用箭頭函數(shù)，箭頭函數(shù)自身木有this
data() {
return {
name: '山魚'
}
}
})
</script>二，MVVM模型
為什么要了解MVVM模型？其實Vue的尤大大也是收到了MVVM的啟發(fā)，但并不完全使用MVVM，我們也可以在官網(wǎng)上看到這段話
vm
那MVVM到底代表著什么呢？
其中：M（model模型）：其實就是data中的數(shù)據(jù)，V（View試圖）：模板，也就是DOM的頁面，VM（試圖模型ViewModel）：Vue實例
其中的vm就是這個b藍(lán)色框內(nèi)的也就是ViewModel，他身上的所有屬性方法vm都可以使用，包括原型對象內(nèi)的屬性方法也可以使用
三，數(shù)據(jù)代理
這里的數(shù)據(jù)代理為何物呢?通過一個對 象代理對另一個對 象中屬性的操作(讀/寫)
1.Vue中的數(shù)據(jù)代理:通過vm對象來代理data對象中屬性的操作
2.Vue中數(shù)據(jù)代理的好處:更加方便的操作data中的數(shù)據(jù)
3.基本原理:通過0bject . defineProperty( )把data對象中所有屬性添加到vm上。為每一個 添加到vm上的屬性，都指定個getter/setter，在getter/setter內(nèi)部去操作(讀/寫) data中對應(yīng)的屬性。簡單來說就是把data的屬性全部都復(fù)制給了_data了一份，可以讓vm進行使用
Object.defineProperty方法（給對象添加屬性方法的一個方法）這個方法會傳入三個參數(shù)分別是對象名，屬性名，配置項。
? ?<script>
? ?let person = {
? ? ? ?name:'山魚',
? ? ? ?sex:'男',
? } ? ?
? ?Object.defineProperty(person,'address',{
? ? ? ?value:18
? })
? ?console.log(person);
? ?</script>在這里我們可以看到，這個顏色稍微的有點變化（這里就是使用Object.defineProperty方法進行添加的，這里的address是不可以進行枚舉的，即不參與遍歷）
這里可以使用Object.keys()進行驗證一下，結(jié)果的確沒有拿到這個address（使用for....in也可以）
<script>
let person = {
name:'山魚',
sex:'男',
}
Object.defineProperty(person,'address',{
value:18
})
for(k in person){
console.log(k);
}
console.log(Object.keys(person));
console.log(person);
</script>如何讓address參與遍歷？【這里就使用了之前學(xué)過的 enumerable 只要將它的值改為true即可 】
enumerable : true （是否可以被枚舉）
writable:true（是否可以修改屬性）
configurable: true（是否可以刪除改屬性）
這四個基本配置項 的內(nèi)容（包括value）他們的默認(rèn)值為false
1.對數(shù)據(jù)進行讀取和修改
這里用到了兩個方法，get和set
<script>
let number = 19;
let person = {
name: '山魚',
sex: '男',
}
Object.defineProperty(person, 'address', {
//當(dāng)有人讀取person的address屬性時，get函 數(shù)(getter)就會被調(diào)用，且返回值就是age值
get() {
console.log('address屬性已被讀取');
return number;
},
//當(dāng)有人修改person的address屬性時，set函數(shù)(setter)就會被調(diào)用，且 會收到修改的具值
set(value) {
console.log('address屬性已被修改');
number = value
}
})
</script>?2.事件修飾符
1.prevent:阻止默認(rèn)事件(常用）
2.stop: 阻止事件冒泡(常用)
3.once:事件只觸發(fā)一次(常用)
4.capture: 使用事件的捕獲模式
5.self: 只有event.target是當(dāng)前操作的元素是才觸發(fā)事件
6.passive: 事件的默認(rèn)行為立即執(zhí)行，無需等待事件回調(diào)執(zhí)行完畢
<div id="user">
<h1>歡迎來到{{name}}的博客之家</h1>
<!-- 1，阻止默認(rèn)事件 -->
<a @click.prevent = "showInfo">點我不跳轉(zhuǎn)</a>
<!-- 2，阻止事件冒泡 -->
<div class="one" @click = 'showInfo'>
<button @click.stop = 'showInfo'>點我</button>
</div>
<!-- 3,事件只觸發(fā)一次 -->
<button @click.once = 'showInfo'>只能點一次哦</button>
</div>
<script>
const vm = new Vue({
el:'#user',
data:{
name:'山魚',
},
methods:{
showInfo(e){
alert('泥嚎！同學(xué)')
}
}
})
</script>3.鍵盤事件
常用的按鍵別名:
回車=> enter ，刪除=>delete(捕獲“刪除”和“退格”鍵) ，退出=> esc ，空格=> space ，上=>up ，下=> down ，左=> left ，右=> right
特殊的按鍵別名：
1.換行=> tab (特殊，必須配合keydown使用)
2.系統(tǒng)修飾鍵 ctrl，alt，shift，meta（meta就是win鍵也就是windows徽標(biāo)）
注：配合keyup使用:按下修飾鍵的同時，再按下其他鍵，隨后釋放其他鍵，事件才被觸發(fā)。配合keydown使用:正常觸發(fā)事件。
<div class="user">
<h1>歡迎加入{{uname}}</h1>
<!--.enter 就是按下回車觸發(fā)事件，也成為按鍵別名-->
<input type="text" placeholder="按下回車提示輸入" @keyup.enter = 'showInfo'>
<!--刪除 del -->
<input type="text" placeholder="按下del提示輸入" @keyup.delete = 'showInfo'>
<!-- 退出esc -->
<input type="text" placeholder="按下ESC提示輸入" @keyup.esc = 'showInfo'>
<!-- 特殊按鍵別名 -->
<input type="text" placeholder="一同按下ctrl+‘其他按鍵’并釋放提示輸入" @keyup.ctrl = 'showInfo'>
<!-- 自定義別名 -->
<input type="text" placeholder="按下回車提示輸入" @keyup.huiche = 'showInfo'>
</div>
<script>
// 也可以自定義按鍵別名
Vue.config.keyCodes.huiche = 13;
const vm = new Vue({
el:'.user',
data:{
uname:'山魚社區(qū)'
},
methods:{
showInfo(e){
console.log(e.target.value);
}
}
})
</script>寫在最后
點贊??：您的贊賞是我前進的動力！收藏?：您的支持我是創(chuàng)作的源泉！
評論?：您的建議是我改進的良藥！山魚??社區(qū):歡迎大家加?山魚社區(qū)? ！
我依舊是小山??并且依然在逐漸成長，勵志成為大撒魚，感謝大家的一路支持
?
?
?
到了這里，關(guān)于【學(xué)Vue就跟玩一樣】學(xué)習(xí)vue就像打游戲一樣簡單的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
