Vue（3）- 安装脚手架、过滤器、生命周期的钩子函数、vue-router基本使用
一、安装脚手架
1、下载node.js，本文下载版本为node-v8.12.0-x64.msi，一键式安装。
2、安装完成后，打开终端，输入node，可进入node环境（两次ctrl+c退出），如下图：
3、查看版本，如下图：
4、在成功安装node.js（即能够成功查看版本如上图）的前提下，再安装淘宝npm（http://npm.taobao.org/），命令如下：
npm install -g cnpm --registry=https://registry.npm.taobao.org
执行结果如下：
5、安装脚手架
依次执行下面两条命令：
npm install -g @vue/cli
npm install -g @vue/cli-init // 注释：这是拉取cli版本2的命令
CLI3版本的文档：https://cli.vuejs.org/zh/guide/
CLI2版本的文档：https://github.com/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(){ return { } }, components:{ App } }); </script>
总结：
1）局部过滤器：在当前组件内部使用；
2）全局过滤器：只要过滤器一创建，在任何组件中都能使用；
3）过滤器其实就是给某些数据“添油加醋”；
4）上面示例用到了moment.js（一个处理时间的类库：http://momentjs.cn/）中moment方法；
三、生命周期的钩子函数
每个 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>
`,
methods:{
change(){
this.msg = '修改后的数据';
// 查询选择器，获取id=box的元素
document.querySelector('#box').style.color='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(()=>{
this.count++;
},1000);
},
beforeMount(){
// 挂载数据到DOM之前会调用，无法获取到该组件DOM
console.log(document.getElementById('app'));
},
mounted(){
// 这个地方可以操作DOM，重要
// 但是能用数据驱动完成的就不要做DOM操作
// 挂载数据到DOM之后会调用，可以获取到真实存在的DOM元素
console.log(document.getElementById('app'));
},
beforeUpdate(){
// 数据更新时调用，发生在虚拟 DOM 打补丁之前
// 应用：获取更新之前的DOM
console.log(document.getElementById('app').innerHTML);
},
updated(){
// 由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子
// 应用：获取最新的DOM
console.log(document.getElementById('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('组件被停用了');
}
};
// 声明一个局部组件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。
为什么要使用单页面应用？
因为传统的路由跳转，如果后端资源过多，会导致页面出现白屏现象，让前端来做路由，在某个生命周期的钩子函数中发送ajax，数据驱动视图。为了用户体验。
单页面应用的网站有路飞学城、稀土掘金（https://juejin.im），和网易云音乐。
五、vue-router的基本使用
Vue Router是Vue.js的官方路由器。它与Vue.js核心深度集成，使用Vue.js构建单页应用程序变得轻而易举。
注意：如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)，相当于给Vue的原型上挂载了一个属性。
1、vue-router基本使用
<div id="app"></div>
<!-- 先引入vue.js，再引入vue-router.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
// 创建Home组件
const Home = {
data(){
return {}
},
template: `<div>我是首页</div>`
};
// 创建Course组件
const Course = {
data(){
return {}
},
template: `<div>我是免费课程</div>`
};
// 创建路由
const router = new VueRouter({
// 定义路由规则
routes: [
{
path: '/',
redirect: '/home' // 重定向
},
{
path: '/home',
component: Home
},
{
path: '/course',
component: Course
}
]
});
// 声明一个组件App
let App = {
data(){
return {}
},
// router-link和router-view是vue-router提供的两个全局组件
// router-link会渲染成a标签，to属性会被渲染成href属性
// router-view是路由组件的出口，就是组件内容会被渲染到router-view中
template:`
<div class="app">
<div class="header">
<router-link to='/'>首页</router-link>
<router-link to='/course'>免费课程</router-link>
</div>
<router-view></router-view>
</div>
`
};
// Vue实例对象
new Vue({
el: '#app',
router, // 使用router属性挂载router，相当于router:router
data() {
return {}
},
template:`<App></App>`,
components:{
App // 挂载组件App
}
})
</script>
2、命名路由
有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。你可以在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称。如下：
// 创建路由 const router = new VueRouter({ // 定义路由规则 routes: [ { path: '/', redirect: '/home' // 重定向 }, { path: '/home', name: 'home', component: Home }, { path: '/course', name: 'course', component: Course } ] });
要链接到一个命名路由，可以给 router-link 的 to 属性传一个对象，如下：
<router-link :to='{name:"home"}'>首页</router-link> <router-link :to='{name:"course"}'>免费课程</router-link>
3、动态路由
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <script> // 创建User组件 const User = { data(){ return { user_id: null } }, template: `<div>我是用户{{ user_id }}</div>`, // 通过注入路由器，我们可以在任何组件内 // 通过 this.$router 访问路由器，也可以通过 this.$route 访问当前路由 // 注意，当使用路由参数时，如从/user/1到/user/2原来的组件实例会被复用 // 因为两个路由都渲染一个组件，比起销毁再创建，复用则显得更加高效 // 不过，这也意味着组件的生命周期钩子不会再被调用 // 所以在/user/1与/user/2 切换时，created方法只调用一次，即只打印一次 created(){ console.log(this.$route); // 路由信息对象 console.log(this.$router); // 路由对象VueRouter }, // 复用组件时，想对路由参数的变化作出响应的话，你可以用 watch (监测变化) 检听$route 对象 watch: { '$route'(to, from) { console.log(to); console.log(from); // 模拟修改数据 this.user_id = to.params.id; // 实际中可以发送ajax } } }; // 创建路由 const router = new VueRouter({ // 定义路由规则 routes: [ { path: '/user/:id', // 例：/user/2 name: 'user', component: User } ] }); // 声明一个组件App let App = { data(){ return {} }, // router-link和router-view是vue-router提供的两个全局组件 // router-link会渲染成a标签，to属性会被渲染成href属性 // router-view是路由组件的出口，就是组件内容会被渲染到router-view中 template:` <div class="app"> <div class="header"> <router-link :to='{name:"user", params:{id:1}}'> 用户1 </router-link> <router-link :to='{name:"user", params:{id:2}}'> 用户2 </router-link> </div> <router-view></router-view> </div> ` }; // Vue实例对象 new Vue({ el: '#app', router, // 使用router属性挂载router，相当于router:router data() { return {} }, template:`<App></App>`, components:{ App // 挂载组件App } }) </script>
示例中$route对象在从控制台输出结果如下：
4、编程式导航vs声明式导航
除了使用<router-link>创建 a 标签来定义导航链接（声明式导航），我们还可以借助 router 的实例方法，通过编写代码来实现（编程式导航）。如下：
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <script> // 创建User组件 const User = { data(){ return { user_id: null } }, template: `<div> <p>我是用户{{ user_id }}</p> <button @click="clickHandler">跳转首页</button> </div> `, methods:{ // 编程式导航 clickHandler(){ this.$router.push({ name:"home" }) } } }; // 创建Home组件 const Home = { data(){ return {} }, template:` <div>我是首页</div> ` }; // 创建路由 const router = new VueRouter({ // 定义路由规则 routes: [ { path: '/user/:id', name: 'user', component: User }, { path: '/home', name: 'home', component: Home } ] }); // 声明一个组件App let App = { data(){ return {} }, // 下面使用router-link创建a标签是声明式导航 template:` <div class="app"> <div class="header"> <router-link :to='{name:"user", params:{id:1}}'> 用户1 </router-link> <router-link :to='{name:"user", params:{id:2}}'> 用户2 </router-link> </div> <router-view></router-view> </div> ` }; // Vue实例对象 new Vue({ el: '#app', router, // 使用router属性挂载router，相当于router:router data() { return {} }, template:`<App></App>`, components:{ App // 挂载组件App } }) </script>
5、注意
组件中的函数写在methods属性中，created等属性中也可以定义函数，我们有时候可以将在created中执行的方法定义在methods中，在created中执行。
