Vue也是基于狀態(tài)改變渲染頁(yè)面，Vue相對(duì)于React要好上手一點(diǎn)。有兩種使用Vue的方式，可以直接導(dǎo)入CDN，也可以直接使用CLI創(chuàng)建項(xiàng)目，我們先使用CDN導(dǎo)入，學(xué)一些Vue的基本概念。
<!-- 開發(fā)環(huán)境版本，包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
new Vue參數(shù)解析
我們?cè)趯?shí)例化Vue這個(gè)對(duì)象的時(shí)候，會(huì)傳入一些參數(shù)，例如
var app = new Vue({
el: '#app', // 需要掛載的節(jié)點(diǎn)
data: { // 在頁(yè)面中使用的模版變量對(duì)應(yīng)的都是data里面的數(shù)據(jù), 注意：如果使用data里面的數(shù)據(jù)，必須在掛載的節(jié)點(diǎn)里面才能使用，否則無(wú)效
},
methods: {
method1: function() {
// methods里面放的是函數(shù) 可以給事件使用 也可以相互調(diào)用
}
},
watch: {
// 監(jiān)聽data里面的數(shù)據(jù)改變并可以做出響應(yīng)
},
components: {
// 設(shè)置一些局部組件
},
filters: {
// 定義過(guò)濾器 通過(guò) `|` （管道符號(hào)） 過(guò)濾器從左往右執(zhí)行 前一個(gè)的返回會(huì)作為第二個(gè)函數(shù)的參數(shù)傳遞
},
computed: {
// 計(jì)算屬性
// 我們可以使用 methods 來(lái)替代 computed，效果上兩個(gè)都是一樣的，但是 computed 是基于它的依賴緩存，只有相關(guān)依賴發(fā)生改變時(shí)才會(huì)重新取值。而使用 methods ，在重新渲染的時(shí)候，函數(shù)總會(huì)重新調(diào)用執(zhí)行。
}
});
指令
攜帶v-前綴的都叫做指令
- v-if
條件判斷，和正常流程語(yǔ)句是一樣的 可以寫表達(dá)式 例如: v-if=“a+b === 3” - v-else-if
v-else v-else-if和v-else必須跟在v-if之后 - v-show
根據(jù)條件展示元素,和v-if有一些區(qū)別
v-show小結(jié)：
- v-show僅僅控制元素的顯示方式，通過(guò)display屬性的none,節(jié)點(diǎn)還是保存的
- 當(dāng)我們需要經(jīng)常切換某個(gè)元素的顯示/隱藏時(shí)，使用v-show會(huì)更加節(jié)省性能上的開銷
v-if小結(jié)：
- v-if會(huì)控制這個(gè)DOM節(jié)點(diǎn)的存在與否。直接刪除掉DOM
- 如果在運(yùn)行時(shí)條件很少改變，則使用 v-if 較好。
-
v-bind
綁定節(jié)點(diǎn)的屬性 如果希望節(jié)點(diǎn)屬性是變量 或者 通過(guò)什么條件才擁有屬性,可以正常編寫表達(dá)式。也可以進(jìn)行簡(jiǎn)寫v-bind:src或者:src。
例如<div :id="id=== 2 ? 'test-aoppp.com' : 'aoppp.com'"> -
v-model
這個(gè)指令比較牛，Vue的核心指令之一，我們到時(shí)候再細(xì)講一下，主要是用來(lái)在input、select、textarea、checkbox、radio等表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定，根據(jù)表單上的值，自動(dòng)更新綁定的元素的值。
例如:<input type="text" v-model="text"> -
v-for
循環(huán)遍歷 例如:v-for="item in arrays" -
v-on:event
添加事件 例如：v-on:click="method1"也可以簡(jiǎn)寫成@click -
v-html
可以添加html代碼解析文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-476094.html
組件化開發(fā)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app-2">
<todo-item
v-for="item,index in todos"
v-bind:s="item" // s 對(duì)應(yīng)的就是props 也就是這個(gè)是可以隨意命名的 只要對(duì)應(yīng)上聲明組件的props即可
v-bind:key="index"
>
</todo-item>
</div>
</body>
<script>
// 聲明一個(gè)全局組件 組件的名稱：todo-item
Vue.component('todo-item', {
props: ['s'], // 組件的props屬性
template: '<li>{{s.name}}</li>' // 變量直接就是獲取的props里面的
});
var app = new Vue({
el: '#app-2',
data: {
todos: [
{name: '李四'},
{name: '王五'},
{name: '趙六'},
]
}
});
</script>
</html>
組件的聲明周期
總的來(lái)說(shuō)可以分為四大類： 創(chuàng)建 、掛載、更新、卸載文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-476094.html
- 創(chuàng)建:
beforeCreate和created - 掛載:
beforeMount和mounted - 更新:
beforeUpdate和update - 卸載:
beforeDestroy和destroy
附上生命周期圖
來(lái)源參考：憧憬在 aoppp.com發(fā)布
到了這里，關(guān)于Vue3.0快速入門(速查)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
