vue-cli脚手架 ,过滤器,生命周期钩子函数
一.安装vue-cli脚手架
1.淘宝镜像下载
用淘宝的国内服务器来向国外的服务器请求,我们向淘宝请求,而不是由我们直接向国外的服务器请求,会大大提升请求速度,使用时,将所有的npm命令换成cnpm即可
2.vue-cli的下载
安装文档:https://cli.vuejs.org/zh/guide/cli-service.html#%E4%BD%BF%E7%94%A8%E5%91%BD%E4%BB%A4
二.过滤器
1.局部过滤器:在当前组件内使用
1 <body>2 <div id="app"></div>
3 <script src="vue.js"></script>
4 <script>
5 let App={
6 data(){return{data:"hello"}},
7 //使用语法
8 template:`<div>我是一个app {{ data | reverse }}</div>`,
9 //创建语法
10 filters:{
11 reverse:function(val){
12 return val.split('').reverse().join("")
13 }
14 }
15 }
16
17 new Vue({
18 el:"#app",
19 data(){
20 return{}
21 },
22 template:`<div class="vue"><App></App></div>`,
23 components:{
24 App
25 }
26 })
27 </script>
28 </body>
2.全局过滤器:任何组件都能使用
<body>
<div ,1) }}</div>`,
})
</script>
</body>
注:参数的个数没有限制
3.moment.js
JavaScript 日期处理类库
使用文档:http://momentjs.cn/
三.生命周期的钩子函数
1 <body>2 <div id="app"></div>
3
4 <script src="vue.js"></script>
5 <script>
6 let Test={
7 data(){
8 return {msg:"shy"}
9 },
10 template:`<div id="change">我叫{{ msg }}<button @click="change">更新</button></div>`,
11 methods:{
12 change(){
13 this.msg="dsz"
14 }
15 },
16 beforeCreate() {
17 // 组件创建之前
18 console.log('组件创建之前', this.msg);
19 },
20 created() {
21 //!!!!!!!!!!!!!!!!!!!!!!
22 // 组件创建之后,此时的DOM还没有渲染完成
23 //作用:可用来发送ajax,获取ajax数据,为DOM操作提供数据支撑
24 console.log('组件创建之后', this.msg);
25 },
26
27 beforeMount() {
28 // 挂载之前:
29 console.log(document.getElementById('app'));
30 },
31 mounted() {
32 //!!!!!!!!!!!!!!!!!!!!!!
33 //挂载之后:Test挂载在App上,App挂载在Vue上
34 //作用:可以在此处操作DOM,
35 console.log(document.getElementById('app'));
36 },
37
38 beforeUpdate() {
39 // 在更新之前，调用此钩子，应用：获取原始的DOM
40 console.log(document.getElementById('change').innerHTML);
41
42 },
43 updated() {
44 // 在更新之后，调用此钩子，应用：获取最新的DOM
45 console.log(document.getElementById('change').innerHTML);
46 },
47
48 beforeDestroy() {
49 //在组件销毁之前
50 console.log('beforeDestroy');
51 },
52 destroyed() {
53 //在组件销毁之后
54 //作用:常用于清除定时器
55 console.log('destroyed',this.timer);
56 },
57
58 activated(){
59 console.log('组件被激活了');
60 },
61 deactivated(){
62 console.log('组件被停用了');
63 }
64 };
65 let App={
66 data(){
67 return{is_show:true}
68 },
69 template: `<div><keep-alive><Test v-if="is_show"></Test></keep-alive><button @click="change_test">改变test组件的生死</button></div>`,
70 methods:{
71 change_test(){
72 this.is_show=!this.is_show
73 }
74 },
75 components:{
76 Test
77 }
78 };
79 new Vue({
80 el:"#app",
81 data(){
82 return{}
83 },
84 template: `<div><App></App></div>`,
85 components:{
86 App
87 }
88
89 })
90 </script>
91 </body>
注:keep-alive
Vue提供的内置组件
主要作用:让组件产生缓存
注:获取DOM的救命稻草
document.querySelector("#app")
四.Vue全家桶:vue,vue-router,vuex
vue-router是vue的核心插件
vue+vue-router 主要来做 SPA（Single Page Application） 单页面应用
为什么要使用单页面应用:
传统的路由跳转，如果后端资源过多，会导致页面出现白屏现象，让前端来做路由，在某个生命周期的钩子函数中发送ajax，数据驱动。为了用户体验
注:掘金,开发者资源网站
1.vue-router下载
下载地址:https://unpkg.com/vue-router/dist/vue-router.js
注:vue-router插件依赖于vue
2.vue-router下载的基本使用
1 <body>2 <div id="app">
3 <p>
4 <!--router-link和router-link是vue-router的两个全局组件-->
5 <!--router-link相当于a标签 to相当于href-->
6 <router-link to="/">首页</router-link>
7 <router-link to="/course">课程</router-link>
8 </p>
9 <!--router-view是整个路由组件的出口-->
10 <router-view></router-view>
11 </div>
12 <script src="vue.js"></script>
13 <script src="vue-router.js"></script>
14 <script>
15 //0.如果是模块化编程,必须要加这句话,相当于Vue.proptotype.$VueRouter=VueRouter,给Vue的原型上挂载一个属性
16 // Vue.use()
17
18 //3.定义路由组件
19 const Home={
20 template:`<div>我是主页内容</div>`
21 };
22 const Course={
23 template:`<div>我是课程内容</div>`
24 };
25
26 //1.创建router实例
27 const router=new VueRouter({
28 //摆脱了哈希,它使用URL的哈希来模拟一个完整的URL
29 mode:'history',
30 routes:[
31 //2.定义路由规则
32 {
33 path:'/',
34 //对访问地址重定向
35 redirect:'/home'
36 },
37 {
38 path:'/home',
39 component:Home
40 },
41 {
42 path:"/course",
43 component:Course
44 }
45 ]
46 });
47
48 //4.创建并挂载router实例
49 const app=new Vue({
50 //key和value相同写一个
51 router
52 }).$mount("#app")
53 </script>
54 </body>
3.路由命名
(1)在routes中定义name
(2)在使用时对router-link的to属性绑定
1 <body>2 <div id="app">
3 <p>
4 //(2)在使用时对router-link的to属性绑定
5 <router-link :to='{name:"Home"}'>首页</router-link>
6 <router-link :to="{name:'Course'}">课程</router-link>
7 </p>
8 <router-view></router-view>
9 </div>
10 <script src="vue.js"></script>
11 <script src="vue-router.js"></script>
12 <script>
13
14 const Home={
15 template:`<div>我是首页</div>`
16 };
17
18 const Course={
19 template:`<div>我是课程</div>`,
20 };
21
22 const router=new VueRouter({
23 routes:[
24 {
25 //(1)在routes中定义name
26 path:'/home',
27 name:'Home',
28 component:Home
29 },
30 {
31 path:'/course',
32 name:'Course',
33 component:Course
34 }
35 ]
36 });
37 const app=new Vue({
38 router,
39 }).$mount("#app")
40 </script>
41 </body>
4.动态路由匹配
如果是动态路由用parmas
如果是get请求信息用query
1 <body>2 <div id="app">
3 <p>
4 //使用时
5 <router-link :to='{name:"Home",params:{id:1}}'>第一页</router-link>
6 <router-link :to='{name:"Home",params:{id:2}}'>第二页</router-link>
7 </p>
8 <router-view></router-view>
9 </div>
10 <script src="vue.js"></script>
11 <script src="vue-router.js"></script>
12 <script>
13
14 const Home={
15 data(){
16 return{
17 user_id:3
18 }
19 },
20 template:`<div>我是首页{{ user_id }}</div>`,
21 watch:{
22 //路由信息对象(到哪里去,从哪里来)
23 '$route'(to,from){
24 console.log(111)
25 console.log(to);
26 this.user_id = to.params.id;
27 }
28 }
29 };
30
31 const router=new VueRouter({
32 routes:[
33 {
34 //定义时
35 path:'/home/:id',
36 name:'Home',
37 component:Home
38 }
39 ]
40 });
41 const app=new Vue({
42 router,
43 }).$mount("#app")
44 </script>
45 </body>
5.编程式导航
编程式通过自己的逻辑,来实现复杂的业务 声明式是通过框架自带的标签属性来完成业务 前者需要自己写大量重复的事务控制代码，后者通过设置可以一次性给所有的业务方法添加上事务特性。
以上是 vue-cli脚手架 ,过滤器,生命周期钩子函数 的全部内容， 来源链接： utcz.com/z/374887.html
