Vue简单的总结三
⼀、安装脚⼿架
1、下载node.js，本⽂下载版本为node-v8.12.0-x64.msi，⼀键式安装。
2、安装按成后，打开终端，输⼊node，可进⼊node环境（两次ctrl+c退出），如下图：
3 , 查看版本:
4、在成功安装node.js的前提下（即查看版本如上图），再安装淘宝npm（/），如下图：
命令：npm install -g cnpm --registry=registry.
5、安装脚⼿架
依次执⾏下⾯两条命令：
npm install -g @vue/cli
npm install -g @vue/cli-init              注释：这是拉取cli版本2的命令CLI3版本的⽂档：/zh/guide/
CLI2版本的⽂档：github/vuejs/vue-cli/tree/v2#vue-cli--6、执⾏完毕后输⼊vue -V验证是否成功，如下图：
⼆、过滤器
1、过滤器分为局部过滤器和全局过滤器，定义和使⽤如下：
<div id="app">
<App />
</div>
<script>
// 定义全局过滤器（任意组件都可以使⽤）
Vue.filter('myTime', function (val, formatStr) {
return moment(val).format(formatStr)
});
let App = {
data(){
return {
msg: "hello world",
time: new Date()
}
},
// 在template中使⽤过滤器
template:`
<div>
<h3>我是⼀个APP</h3>
<p>局部过滤器{{ msg | myReverse }}</p>
<p>全局过滤器{{ time | myTime('YYYY-MM-DD') }}</p>
</div>
`,
/
/ 定义局部过滤器（只能在本组件内使⽤）
filters:{
myReverse:function (val) {
return val.split('').reverse().join('')
}
}
};
new Vue({
el: "#app",
data(){
}
},
components:{
App
}
});
</script>
总结：
1）局部过滤器：在当前组件内部使⽤；
2）全局过滤器：只要过滤器⼀创建，在任何组件中都能使⽤；
3）过滤器其实就是给某些数据“添油加醋”；
4）上⾯⽰例⽤到了moment.js（⼀个处理时间的类库：momentjs/）中moment⽅法；
三、⽣命周期的钩⼦函数
- beforeCreate
- created 组件创建完成，可以发起ajax（XMLHttpRequest 简称XHR  axios  fetch  $.ajax()）请求，实现数据驱动视图
- beforeMount
- mounted DOM挂载完成
- beforeUpdate 获取原始DOM
- updated  获取更新之后的DOM
- beforeDestory 组件销毁之前
- destoryed 组件销毁之后
- activated  激活当前组件  vue提供的内置组件`<keep-alive></keep-alive>`
- deactivated 停⽤当前组件
每个 Vue 实例在被创建时都要经过⼀系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新DOM 等。同时在这个过程中也会运⾏⼀些叫做⽣命周期钩⼦的函数，这给了⽤户在不同阶段添加⾃⼰的代码的机会。
我们可以在官⽅⽂档的API 的选项/⽣命周期钩⼦看到有如下⽣命周期钩⼦函数：
<div id="app">
<App></App>  <!-- 使⽤局部组件App -->
</div>
<script>
// 声明⼀个局部组件Test
let Test = {
data(){
return {
msg: "原数据",
count: 0,
timer: null
}
},
template:`
<div id="test">
<div id="box">{{ msg }}</div>
<p>定时器{{ count }}</p>
<button @click="change">修改</button>
</div>
`,
change(){
this.msg = '修改后的数据';
// 查询选择器，获取id=box的元素
document.querySelector('#box').lor='red';
}
},
beforeCreate(){
// 组件创建之前，获取不到数据属性
console.log(this.msg);  // undefined
},
created(){
// 在该组件实例创建完成后被⽴即调⽤，可以获取数据属性，重要
// 数据观测 (data observer)，属性和⽅法的运算，watch/event 事件回调
// 然⽽，挂载阶段还没开始，$el 属性⽬前不可见
// created中可以操作数据，可实现vue==》页⾯(即数据驱动视图)的影响
// 应⽤：发送ajax请求
console.log(this.msg);
// this.msg = '嘿嘿⿊';
// 开⼀个定时器，在destroyed中销毁
this.timer = setInterval(()=>{
},1000);
},
beforeMount(){
// 挂载数据到DOM之前会调⽤，⽆法获取到该组件DOM
console.ElementById('app'));
},
mounted(){
// 这个地⽅可以操作DOM，重要
// 但是能⽤数据驱动完成的就不要做DOM操作
// 挂载数据到DOM之后会调⽤，可以获取到真实存在的DOM元素
console.ElementById('app'));
},
beforeUpdate(){
// 数据更新时调⽤，发⽣在虚拟 DOM 打补丁之前
// 应⽤：获取更新之前的DOM
console.ElementById('app').innerHTML);
},
updated(){
// 由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调⽤该钩⼦
// 应⽤：获取最新的DOM
console.ElementById('app').innerHTML);
},
beforeDestroy(){
// 实例销毁之前调⽤。在这⼀步，实例仍然完全可⽤
console.log('beforeDestroy');
},
destroyed(){
// Vue 实例销毁后调⽤。调⽤后，Vue 实例指⽰的所有东西都会解绑定，
// 所有的事件会被移除，所有的⼦实例也会被销毁
// 应⽤：清定时器（定时器有开就要清，占内存）
// created中开定时器，destroyed中消定时器
console.log('destroyed');
clearInterval(this.timer);
console.log('------', this.timer)
},
// 创建和销毁⽐较消耗性能，可以⽤激活（activated）和停⽤（deactivated）// 激活和停⽤要借助vue的内置组件keep-alive组件
// 它能让当前组件放在keep-alive中缓存起来
activated(){
// keep-alive 组件激活时调⽤
console.log('组件被激活了');
},
deactivated(){
// keep-alive 组件停⽤时调⽤
console.log('组件被停⽤了');
}
react router如何使用
};
// 声明⼀个局部组件App
let App = {
data(){
return {
isShow:true
}
},
template:`
<div class="app">
<keep-alive>
<Test v-if="isShow"></Test>
</keep-alive>
<button @click="clickHandler">改变test组件的⽣死</button>
</div>
`,
methods:{
// 演⽰beforeDestroy和destroyed⽅法的事件
clickHandler(){
this.isShow = !this.isShow
}
},
components:{
Test
}
};
// Vue实例对象，根组件，可以没有template属性，直接在el中使⽤⼦组件
new Vue({
el: '#app',
data() {
return {}
},
components:{
App  // 挂载局部组件App
}
})
</script>
总结（created和mounted是重点）：
created：发送ajax，获取数据，实现数据驱动视图；
mounted：获取真实DOM；
activated：激活当前组件；
deactivated：停⽤当前组件，依赖vue提供的内置组件，主要作⽤是让组件产⽣缓存；destroyed：如果开了定时器，可在此函数中关闭定时器；
四、VUE的全家桶（vue + vue-router + vuex）
vue + vue-router主要来做SPA（Single Page Application），即单页⾯应⽤。
vue-router是vue的核⼼插件，它要依赖vue。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。