一.安装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>
<body>
<div id="app"></div>
<script src="vue.js"></script>
<script src="day03/moment.js"></script>
<script>
//创建语法
Vue.filter("showTime",function(val,style,a){
return moment(val).format(style)
})
new Vue({
el:"#app",
data(){
return{time:new Date()}
},
//使用语法
template:`<div>现在的时间是:{{ time | showTime("YYYY-MM-DD",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
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
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.编程式导航