2020-2-13 seo達(dá)人
使用 vue-cli 創(chuàng)建 vue 項(xiàng)目：
cd 到指定的目錄下 命令行輸入：
vue init webpack-simple <項(xiàng)目名稱>
根據(jù)提示設(shè)置Project name
設(shè)置Project description
設(shè)置Author
設(shè)置License
設(shè)置Use sass?
cd到剛剛創(chuàng)建的項(xiàng)目名稱目錄
命令行輸入：npm install
等待安裝完成后 執(zhí)行 npm run dev 命令
注：以下部分練習(xí)是在https://jsfiddle.net 中進(jìn)行
創(chuàng)建組件：（創(chuàng)建全局組件）
Html 部分：
<div id="app">
<div>練習(xí)</div>
<!-- 這里的 inline-template 取代組件函數(shù)中的 template:'' -->
<my-cmp inline-template>
<p>{{ status }}</p>
</my-cmp>
<hr>
<my-cmp inline-template>
<p>第二次使用{{ status }}</p>
</my-cmp>
</div>
Js 部分：
Vue.component('my-cmp',{
data: function () {
return {
status:'Critical'
}
},
methods: {}
});
var vm = new Vue({
el: "#app"
})
如果將data提取成公共的部分，則多次使用同一個(gè)組件則這部分?jǐn)?shù)據(jù)在內(nèi)存中使用的是同一塊存儲(chǔ) 如下演示：
html部分：
<div id="app">
<div>練習(xí)</div>
<my-cmp></my-cmp>
<hr>
<my-cmp></my-cmp>
</div>
Js 部分
var data = {status:'Critical'};
Vue.component('my-cmp',{
data: function () {
return data
},
template:'<p>Server status {{ status }} (<button @click="changeStatus">Change</button>)</p>',
methods: {
changeStatus(){
this.status = "Nomal"
}
},
});
var vm = new Vue({
el: "#app"
})
上面的js代碼當(dāng)點(diǎn)擊按鈕的時(shí)候兩個(gè)組件引用的數(shù)據(jù)均會(huì)發(fā)生變化
局部注冊(cè)組件：
html部分：
<div id="app">
<div>局部注冊(cè)組件練習(xí)</div>
<local-cmp></local-cmp>
<hr>
<local-cmp></local-cmp>
</div>
Js 部分：
var cmp = {
data: function () {
return {
status:'Critical'
}
},
template:'<p>Server status {{ status }} (<button @click="changeStatus">Change</button>)</p>',
methods: {
changeStatus(){
this.status = "Nomal"
}
},
};
var vm = new Vue({
el: "#app",
components:{'local-cmp':cmp}
})
藍(lán)藍(lán)設(shè)計(jì)的小編 http://tweetduck.com