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/），命令如下：
|
1
|
npm install -g cnpm --registry=https://registry.npm.taobao.org |
执行结果如下：
5、安装脚手架
依次执行下面两条命令：
|
1
|
npm install -g @vue/cli |
|
1
|
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中执行。
