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}
})