2020-2-13 seo達人
使用 vue-cli 創建 vue 項目：
cd 到指定的目錄下 命令行輸入：
vue init webpack-simple <項目名稱>
根據提示設置Project name
設置Project description
設置Author
設置License
設置Use sass?
cd到剛剛創建的項目名稱目錄
命令行輸入：npm install
等待安裝完成后 執行 npm run dev 命令
注：以下部分練習是在https://jsfiddle.net 中進行
創建組件：（創建全局組件）
Html 部分：
<div id="app">
<div>練習</div>
<!-- 這里的 inline-template 取代組件函數中的 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提取成公共的部分，則多次使用同一個組件則這部分數據在內存中使用的是同一塊存儲 如下演示：
html部分：
<div id="app">
<div>練習</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代碼當點擊按鈕的時候兩個組件引用的數據均會發生變化
局部注冊組件：
html部分：
<div id="app">
<div>局部注冊組件練習</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}
})