Vue整理

  • A+
所属分类:Web前端
摘要

Vue是遵循MVVW架构模式实现的前端框架npm导入路径:https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js


一、Vue

Vue是遵循MVVW架构模式实现的前端框架

npm导入路径:https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js

MVVM架构 Model数据 View模板 ViewModel处理数据

1、ES6的常用语法:

变量的定义,var,let,const

  1. Var 变量的提升,函数作用域 全局作用域,重新定义不会报错,可以重新赋值
  2. let 块级作用域 { },重新定意会报错,可以重新赋值
  3. const 定义不可修改的常量,不可以重新赋值

箭头函数的this取决于当前的上下文环境:类似于python的匿名函数

this指当前函数最近的调用者,距离最近的调用者

解构:
字典解构 {key,key,...} 注:要使用key才行
数组结构 [x,y,.....]

    let obj = {         a:1,         b:2     };     let hobby = ["吹牛", "特斯拉", "三里屯"];     let {a,b} = obj;     let [hobby1,hobby2,hobby3] = hobby;     console.log(a);     console.log(b);     console.log(hobby1);     console.log(hobby2);     console.log(hobby3); 

2、Vue的核心思想是数据驱动视图

1)Vue的常用指令

v-text:获取文本内容

v-html:获取html内容

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> </head> <body> <div id="app">     <h2 v-text="name"></h2>     <h3 v-text="age"></h3>     <div v-html="hobby"></div> </div> <script> const app = new Vue({     el:"#app",     data:{         name:"PDD",         age:18,         hobby:"<ul><li>学习</li><li>刷剧</li><li>Coding</li></ul>"     } }); </script> </body> </html> 

v-for:循环获取数组

v-for:循环获取字典

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> </head> <body> <div id="app">     <ul>         <li v-for="(course,index) in course_list" :key="index">{{index}}:{{course}}</li>         <li v-for="(item,index) in one" :key="index">             {{index}}:{{item.name}}:{{item.age}}:{{item.hobby}}         </li>     </ul> </div> <script> const app = new Vue({     el:"#app",     data:{         course_list:["classname","teacher","student"],         one:[{name:"eric",age:"18",hobby:"music"},             {name:"bob",age:"18",hobby:"dance"}]     } }) </script> </body> </html> 

v-bind:自定制显示样式,动态绑定属性。

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>     <style>         .my_app{             width: 200px;             height: 200px;             border: 1px solid red;         }     </style> </head> <body> <div id="app">     <div v-bind:class="{my_app:is_show}">     </div>     <img :src="my_src" alt=""> <!--  v-bind: 可以简写为 : --> </div> <script> const app = new Vue({     el:"#app",     data:{         is_show:true, //true表示显示style样式,false不显示style样式         my_src:"http://i0.hdslb.com/bfs/archive/590f87e08f863204820c96a7fe197653e2d8f6e1.jpg@1100w_484h_1c_100q.jpg" alt="Vue整理"     } }) </script> </body> </html>  

v-on@事件名:事件绑定

<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head>     <meta charset="UTF-8">     <title>Title</title>     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> </head> <body> <div id="app">     <!-- v-on@click只会执行一次,是在第一次进入页面的时候,@click会循环执行 -->      <button @click="my_click('hello')" v-on="{mouseenter:my_enter,mouseleave:my_leave}">         点击弹窗     </button> <!--    <button @click="my_click('hello')" @mouseenter="my_enter",@mouseleave="my_leave">  繁琐写法--> <!--        点击弹窗     --> <!--    </button>    --> </div> <script> const app = new Vue({     el:"#app",     data:{},     methods:{         my_click:function(x){             alert("luke" + x)         },         my_enter:function(){             console.log("鼠标移入事件")         },         my_leave:function(){             console.log("鼠标移出事件")         }     } }) </script> </body> </html> 

v-if:条件判断
v-if v-else-if v-else

<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head>     <meta charset="UTF-8">     <title>Title</title>     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> </head> <body> <div id="app">     <div v-if="role == 'admin' ">管理员你好</div>     <div v-else-if="role == 'hr' ">查看简历</div>     <div v-else>没有权限</div>  </div> <script> const app = new Vue({     el:"#app",     data:{         role:"admin"     },     methods:{} }) </script> </body> </html> 

v-show:布尔值类型判断

<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head>     <meta charset="UTF-8">     <title>Title</title>     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> </head> <body> <div id="app">     <div v-show="admin">管理员你好</div>     <div v-show="hr">查看简历</div>     <div v-show="others">没有权限</div> </div> <script> const app = new Vue({     el:"#app",     data:{         admin:true,         hr:false,         others:false,     },     methods:{} }) </script> </body> </html> 

综合案例

<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head>     <meta charset="UTF-8">     <title>Title</title>     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> </head> <body> <div id="app">     <div v-show="admin">管理员你好</div>     <div v-show="hr">查看简历</div>     <div v-show="others">没有权限</div>     <button @click="my_click">点击显示或隐藏</button>     <div v-show="is_show">hello</div> </div> <script> const app = new Vue({     el:"#app",     data:{         admin:true,         hr:false,         others:false,         is_show:false     },     methods:{         my_click:function(){             this.is_show=!this.is_show         }     } }) </script> </body> </html> 

v-model:获取数据,标签的属性设置 ,获取其属性值,用户信息等,例如input,select等

<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head>     <meta charset="UTF-8">     <title>Title</title>     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> </head> <body> <div id="app">     <input type="text" v-model="username">     {{username}}     <hr>     <textarea type="text" cols="30" rows="10" v-model="article">         {{article}}     </textarea>     <hr>     <select name="" v-model="choices">         <option value="1">阿萨德</option>         <option value="2">主线程</option>         <option value="3">权威</option>     </select>     {{choices}}     <hr>     <select name="" v-model="choices_multiple" multiple>         <option value="1">阿萨德</option>         <option value="2">主线程</option>         <option value="3">权威</option>     </select>     {{choices_multiple}} </div> <script> const app = new Vue({     el:"#app",     data:{         username:"1234",         article:"123456",         choices:"",         choices_multiple:['1']     },     methods:{} }) </script> </body> </html> 

v-model.lazy:失去光标绑定数据事件
v-model.lazy.number:数据类型的转换
v-model.lazy.trim:清除空格

<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head>     <meta charset="UTF-8">     <title>Title</title>     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> </head> <body> <div id="app">     <input type="text" v-model.lazy="username">         {{username}}     <hr>     <!--  前端默认只显示一个空格,pre使数据原始化展示  -->     <input type="text" v-model.lazy="username">         <pre>{{username}}</pre>     <hr>     <!--    -->     <input type="text" v-model.lazy.trim="username_trim">         <pre>{{username_trim}}</pre>     <hr>     <input type="text" v-model.lazy.number="article">     {{article}}     {{typeof article}} </div> <script> const app = new Vue({     el:"#app",     data:{         username:"1234",         username_trim:"1234",         article:"123456"     },     methods:{} }) </script> </body> </html> 

2)自定义指令

v-自定义的函数(指令):自定制函数(指令)
Vue.directive()

<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head>     <meta charset="UTF-8">     <title>Title</title>     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>     <style>         .my_box{             width: 200px;             height: 200px;             border: 1px solid red;         }     </style> </head> <body> <div id="app">     <div class="my_box" v-pin.right.top="pinned"></div> </div> <script>     Vue.directive("pin",function(el,binding){         console.log(el); //指令的标签元素         console.log(binding); //指令的所有信息         let adr = binding.modifiers;         if(binding.value){             //定位到浏览器的右下角             el.style.position = "fixed";             // el.style.right='0';             // el.style.bottom='0';             //指令修饰符定位             for (let posi in adr){                 el.style[posi]=0;             }         }else{             el.style.position = "static";         }     });     const app = new Vue({         el:"#app",         data:{             pinned:true         }     }) </script> </body> </html> 

3)方法集合

v-text
v-html
v-for
v-if v-else-if v-else
v-bind 绑定属性
v-on 绑定事件
v-show display
v-model 数据双向绑定
input
textarea
select
指令修饰符
.lazy
.number
.trim
自定义指令
Vue.directive('指令名',function(el,参数binding){ })
el 绑定指令的标签元素
binding 指令的所有信息组成的对象
value 指令绑定数据的值
modifiers 指令修饰符组成的对象

二、Vue获取DOM,数据监听,组件,混合和插槽

注:“:” 是指令 “v-bind”的缩写,“@”是指令“v-on”的缩写;“.”是修饰符。

1、Vue获取DOM

给标签加ref属性:ref="my_box"
获取:this.$refs.my_box;

<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head>     <meta charset="UTF-8">     <title>Title</title>     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>     <style>         .my_box{             width: 200px;             height: 200px;             border: 1px solid red;         }     </style> </head> <body> <div id="app">     <div ref="my_box"></div>     <button v-on:click="my_click">点击显示文本</button> </div> <script>     const app = new Vue({         el:"#app",         data:{},         methods:{             my_click: function(){                 let ele = this.$refs.my_box;                 console.log(ele);                 ele.innerText = "hello"             }         }     }) </script> </body> </html> 

computed:计算属性,放的是需要处理的数据

<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head>     <meta charset="UTF-8">     <title>Title</title>     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>     <style>         .my_box{             width: 200px;             height: 200px;             border: 1px solid red;         }     </style> </head> <body> <div id="app">     <table>         <tr>             <th>科目</th>             <th>成绩</th>         </tr>         <tr>             <td>Python</td>             <td><input type="text" v-model.number="python"></td>         </tr>         <tr>             <td>Java</td>             <td><input type="text" v-model.number="java"></td>         </tr>         <tr>             <td>Go</td>             <td><input type="text" v-model.number="go"></td>         </tr>         <tr>             <td>总分</td>             <td>{{total}}</td>         </tr>         <tr>             <td>平均分</td>             <td>{{average}}</td>         </tr> <!-- 繁琐方法 --> <!-- <tr> --> <!-- <td>总分</td> --> <!-- <td>{{python + java + go}}</td> --> <!-- </tr>  --> <!-- <tr> --> <!-- <td>平均分</td> --> <!-- <td>{{total/3}}</td> --> <!-- </tr> -->      </table> </div> <script>     const app = new Vue({         el:"#app",         data:{             python:"",             java:"",             go:""         },         methods:{},         computed:{             total: function(){                 return this.python + this.java + this.go             },             average: function(){                 return this.total/3             }         }     }) </script> </body> </html> 

2、数据监听

watch :监听不到可以添加deep属性
deep:true :深度监听,deep监听不到,可以使用 $.set() 属性操作值
$.set()

字符串监听:监听到的新旧值不同。
数组:只能监听到长度的变化,新旧值相同,改变数组值的时候要使用 $set(array,index,value)
对象:只能监听到value的改变,必须深度监听:deep,增加对象的key必须使用:$set(array,key,value)

注:数组监听有坑

<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head>     <meta charset="UTF-8">     <title>Title</title>     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>     <style>         .my_box{             width: 200px;             height: 200px;             border: 1px solid red;         }     </style> </head> <body> <div id="app">     {{name}}     <br>     {{hobby}}     <br>     {{obj}}     <br>     <button v-on:click="my_click">点我改变数据</button> </div> <script>     const app = new Vue({         el:"#app",         data:{             name:"eric",             hobby:["打游戏","打豆豆"],             obj:{                 boy:"PDD",                 age:23             }         },         methods:{             my_click: function(){                 // 修改name数据                 this.name = "bob";                 // this.hobby.push("潜水");                 // this.hobby[0] = "潜水";                 // app.$set(this.hobby,0,"潜水");                 // this.obj.age = 20;                 // this.obj["sex"] = "男";                 app.$set(this.obj,"sex","男");             }         },         watch: {             name: {                 handler: function(val,oldVal){                     console.log(val);                     console.log(oldVal);                 }             },             hobby: {                 handler: function(val,oldVal){                     // 改变数组的长度的时候新旧值相同                     console.log(val);                     console.log(oldVal);                 },                 // deep: true             },             obj: {                 handler: function(val,oldVal){                     console.log(val);                     console.log(oldVal);                 },                 deep: true             }         }     }) </script> </body> </html> 

3、组件

可复用
全局组件的定义:Vue.component("myheader",{})
全局组件的使用:<myheader></myheader>

<!-- 全局注册组件 --> <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head>     <meta charset="UTF-8">     <title>Title</title>     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>     <style>         .my_box{             width: 200px;             height: 200px;             border: 1px solid red;         }     </style> </head> <body> <div id="app">     <myheader></myheader> </div> <div id="apps">     <myheader></myheader> </div> <script>     Vue.component("myheader",{         template: '<div><h1>{{ title }}</h1></div>',         // template: '<div><h1>Hello world!</h1></div>',         data(){  // 对象的单体模式             return{                 title: "HelloWorld!"             }         },         methods:{}     });     const app = new Vue({         el:"#app",         data:{},         methods:{}     });     const apps = new Vue({         el:"#apps",         data:{},         methods:{}     }) </script> </body> </html>  

局部组件的定义:components: {my_com: my_com_config}
局部组件的使用:<my_com></my_com>

<!-- 局部注册组件 --> <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head>     <meta charset="UTF-8">     <title>Title</title>     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>     <style>         .my_box{             width: 200px;             height: 200px;             border: 1px solid red;         }     </style> </head> <body> <div id="app">     <my_com></my_com> </div> <script>     let my_com_config = {         template: '<div><h1>局部组件</h1></div>'     };     const app = new Vue({         el:"#app",         components: {             my_com: my_com_config         }     }) </script> </body> </html> 

父子组件:
注:组件只识别一个作用域块

<!-- 父子组件的进本使用 --> <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head>     <meta charset="UTF-8">     <title>Title</title>     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>     <style>         .my_box{             width: 200px;             height: 200px;             border: 1px solid red;         }     </style> </head> <body> <div id="app">     <my_com></my_com> </div> <script>     let child_config = {         template: '<div><h2>子组件</h2></div>'     };     let my_com_config = {         template: '<div><h1>父组件</h1><child></child></div>',         components: {             child: child_config         }     };     const app = new Vue({         el:"#app",         components: {             my_com: my_com_config         }     }) </script> </body> </html> 

父子组件的通信:
父子通信(主操作在父级):
父级定义方法::father_say="f_say"
子级调用方法:props: ['father_say']
子级使用方法(模板语言直接调用):{{father_say}}

<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head>     <meta charset="UTF-8">     <title>Title</title>     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>     <style>         .my_box{             width: 200px;             height: 200px;             border: 1px solid red;         }     </style> </head> <body> <div id="app">     <my_com></my_com> </div> <script>     let child_config = {         template: '<div><h2>子组件</h2><p>father_say:{{father_say}}</p></div>',         props: ['father_say']     };     let my_com_config = {         template: '<div><h1>父组件</h1><child :father_say="f_say"></child></div>',         components: {             child: child_config         },         data(){             return {                 f_say: "滚~~"             }         }     };     const app = new Vue({         el:"#app",         components: {             my_com: my_com_config         }     }) </script> </body> </html> 

子父通信(主操作在子级):
子集定义方法:@click='my_click'
子级提交事件:this.$emit("事件名",data)
父级绑定子级提交的事件:@事件名="处理的方法"
父级处理方法: methods: {处理的方法: function(data){data 数据处理} }
父级使用方法(模板语言直接调用):{{say}}

<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head>     <meta charset="UTF-8">     <title>Title</title>     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>     <style>         .my_box{             width: 200px;             height: 200px;             border: 1px solid red;         }     </style> </head> <body> <div id="app">     <my_com></my_com> </div> <script>     let child_config = {         template: "" +             "<div>" +             "<h2>子组件</h2>" +             "<button @click='my_click'>向父级传送数据</button>" +             "</div>",         methods: {             my_click(){                 // 子组件提交事件名称                 this.$emit("son_say","滚~~")             }         }     };     let my_com_config = {         template: '' +             '<div>' +             '<h1>父组件</h1>' +             '<child @son_say="my_son_say"></child>' +             '<p>son_say:{{say}}</p>' +             '</div>',         components: {             child: child_config         },         data(){             return {                 say:""             }         },         methods: {             my_son_say: function(data){                 this.say = data             }         }     };     const app = new Vue({         el:"#app",         components: {             my_com: my_com_config         }     }) </script> </body> </html> 

非父子级通信:
定义中间调度器:let event = new Vue()
需要通信的组件向中间调度器提交事件:event.$emit("事件名", data)
接收通信的组件监听中间调度器里的事件:event.$on("事件名", function(data){data操作(注意:this的问题)})

<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head>     <meta charset="UTF-8">     <title>Title</title>     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>     <style>         .my_box{             width: 200px;             height: 200px;             border: 1px solid red;         }     </style> </head> <body> <div id="app"> <eric></eric> <jing></jing> </div> <script>     let midlen = new Vue();     let eric = {         template: "" +             "<div>" +             "<h1>This is Eric</h1>" +             "<button @click='my_click'>点击通知静静</button>" +             "</div>",         methods: {             my_click(){                 // 通知bob,晚上等我                 // 向bob,提交事件                 midlen.$emit("email","晚上,一起吃饭")             }         }     };     let jing = {         template: "" +             "<div>" +             "<h1>This is jing</h1>" +             "<p>eric和我说:{{ eric_email }}</p>" +             "</div>",         data(){             return {                 eric_email: ""             }         },         mounted(){             // 组件加载完成后执行的方法             let that = this;             midlen.$on("email", function(data){                 that.eric_email = data;                 // console.log(data);             })         }     };     const app = new Vue({         el:"#app",         components: {             eric: eric,             jing: jing         }     }) </script> </body> </html> 

4、混合

实际上在框架中用的很少
作用:复用共用的代码块
minxins:[base]

<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head>     <meta charset="UTF-8">     <title>Title</title>     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>     <style>         .my_box{             width: 200px;             height: 200px;             border: 1px solid red;         }     </style> </head> <body> <div id="app">     <button @click="show_text">点击显示文本</button>     <button @click="hide_text">点击隐藏文本</button>     <button @mouseenter="show_text" @mouseleave="hide_text">提示框</button>     <div v-show="is_show"><h1>look wyl and kjj</h1></div> </div> <script>     const app = new Vue({         el: "#app",         data: {             is_show:false         },         methods: {             show_text: function(){                 this.is_show = true             },             hide_text: function(){                 this.is_show = false             }         }     }) </script> </body> </html> 
<!-- 混合示例 --> <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head>     <meta charset="UTF-8">     <title>Title</title>     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>     <style>         .my_box{             width: 200px;             height: 200px;             border: 1px solid red;         }     </style> </head> <body> <div id="app">     <com1></com1>     <com2></com2> </div> <script>     let base = {         data(){             return {                 is_show:false             };         },         methods: {             show_text(){                 this.is_show = true             },             hide_text(){                 this.is_show = false             }         }     };     let com1 = {         template:"" +             "<div>" +             "<button @click="show_text">点击显示文本</button>" +             "<button @click="hide_text">点击隐藏文本</button>" +             "<div v-show="is_show"><h1>look wyl and kjj</h1></div>" +             "</div>",         mixins: [base],         data(){             return {                 is_show: true             }         }     };     let com2 = {         template:"" +             "<div>" +             "<button @mouseenter="show_text" @mouseleave="hide_text">提示框</button>" +             "<div v-show="is_show"><h1>look wyl and kjj</h1></div>" +             "</div>",         mixins: [base],     };     const app = new Vue({         el:"#app",         components: {             com1: com1,             com2: com2         }     }) </script> </body> </html> 

5、插槽

作用:实现组件内容的分发
slot:
直接使用slot标签:<slot></slot>
名命slot标签:
先给slot加name属性:<slot name="title"></slot>
给标签元素添加slot属性:<h3 slot="title">Python</h3>

<!-- 未命名的slot标签 --> <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head>     <meta charset="UTF-8">     <title>Title</title>     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>     <style>         .my_box{             width: 200px;             height: 200px;             border: 1px solid red;         }     </style> </head> <body> <div id="app">     <com>         <slot>This is jing</slot>     </com>     <com>         <slot>This is wyl</slot>     </com> </div> <template id="my_com">     <div>         <h1>这是一个组件</h1>         <slot></slot>     </div> </template> <script>     let com = {         template: "#my_com"     };     const app = new Vue({         el:"#app",         components: {             com: com         }     }) </script> </body> </html> 
<!-- 命名的slot标签 --> <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head>     <meta charset="UTF-8">     <title>Title</title>     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>     <style>         .my_box{             width: 200px;             height: 200px;             border: 1px solid red;         }     </style> </head> <body> <div id="app">     <com>         <h3 slot="title">Python</h3>         <p slot="brief">This is jing</p>     </com>     <com>         <h3 slot="title">Git</h3>         <p slot="brief">This is wyl</p>     </com> </div> <template id="my_com">     <div>         <h1>这是一个组件</h1>         <slot name="title"></slot>         <slot name="brief"></slot>     </div> </template> <script>     let com = {         template: "#my_com"     };     const app = new Vue({         el:"#app",         components: {             com: com         }     }) </script> </body> </html> 

三、VueRouter

特点:通过路由和组件实现一个单页面的应用。

1、路由的注册:静态路由

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>     <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>     <title>Title</title> </head> <body> <div id="app">     <router-link to="/">首页</router-link>     <router-link to="/course">课程</router-link>     <router-view></router-view> </div> <script>     // 定义路由匹配规则     let url = [         {             path:"/",             component:{                 template:'<div><h1>首页组件</h1></div>'             }         },         {             path:"/course",             component:{                 template:'<div><h1>课程组件</h1></div>'             }         }     ];     // 实例化VueRouter对象     let router = new VueRouter({         routes:url     });     // 把VueRouter的实例化对象注册到Vue的跟实例     const app = new Vue({         el:"#app",         router:router     }) </script> </body> </html> 

2、路由的注册:动态路由(路由的参数)

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>     <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>     <title>Title</title> </head> <body> <div id="app">     <!-- 路由动态绑定:to -->     <router-link :to="{name:'home'}">首页</router-link>     <router-link :to="{name:'course'}">课程</router-link>     <!--  带有参数的静态路由绑定  -->     <router-link to="/user/nepenthe?age=20">用户1</router-link>     <!--  带有参数的动态路由绑定  -->     <router-link :to="{name:'user',params:{name:'forget-me-not'},query:{age:'23'}}">用户2</router-link>     <router-view></router-view> </div> <script>     // 定义路由匹配规则     let url = [         {             path:"/",             name:"home",             component:{                 template:'<div><h1>首页组件</h1></div>'             }         },         {             path:"/course",             name: "course",             component:{                 template:'<div><h1>课程组件</h1></div>'             }         },         {             path:"/user/:name",             // 参数设置(?P<name>.*)             name: "user",             component:{                 template:'' +                     '<div>' +                         // 获取路由name:this.$route.name                         '<h1>{{this.$route.name}}用户组件</h1>' +                         // 获取路由中参数:this.$route.params.name                         '<h1>username:{{this.$route.params.name}}</h1>' +                         // 获取路由中参数(使用?的参数):this.$route.query.age                         '<h1>age:{{this.$route.query.age}}</h1>' +                     '</div>',                 // Vue属性加载完成后执行的方法                 mounted(){                     console.log(this.$route)                 }             }         }     ];     // 实例化VueRouter对象     let router = new VueRouter({         routes:url     });     // 把VueRouter的实例化对象注册到Vue的跟实例     const app = new Vue({         el:"#app",         router:router     }) </script> </body> </html> 

3、路由的注册:自定义路由

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>     <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>     <title>Title</title> </head> <body> <div id="app">     <!-- 路由绑定:to -->     <router-link to="/">首页</router-link>     <router-link to="/course">课程</router-link>     <router-link to="/login">登录</router-link>     <router-view></router-view> </div> <script>     // 定义路由匹配规则     let url = [         {             path:"/",             component:{                 template:'' +                     '<div>' +                         '<h1>首页组件</h1>' +                         '<button @click="my_click">点击跳转登录页面</button>' +                     '</div>',                 methods:{                     my_click: function(){                                                  console.log(this.$route);                         // $route 当前路由的所有信息                         console.log(this.$router);                         // $router VueRouter的实例化对象                         console.log(this.$el);                         console.log(this.$data);                         this.$router.push("/login")                         // 跳转页面 --> 跳转到登录组件                     }                 }             }         },         {             path:"/course",             component:{                 template:'<div><h1>课程组件</h1></div>'             }         },         {             path:"/login",             component:{                 template:'' +                     '<div>' +                         '<h1>登录组件</h1>' +                     '</div>'             }         }     ];     // 实例化VueRouter对象     let router = new VueRouter({         routes:url     });     // 把VueRouter的实例化对象注册到Vue的跟实例     const app = new Vue({         el:"#app",         router:router     }) </script> </body> </html> 

4、路由的钩子函数:

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>     <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>     <title>Title</title> </head> <body> <div id="app">     <!-- 路由绑定:to -->     <router-link to="/">首页</router-link>     <router-link to="/course">课程</router-link>     <router-link to="/user">用户</router-link>     <router-link to="/login">登录</router-link>     <router-view></router-view> </div> <script>     // 定义路由匹配规则     let url = [         {             path:"/",             component:{                 template:'' +                     '<div>' +                         '<h1>首页组件</h1>' +                         '<button @click="my_click">点击跳转登录页面</button>' +                     '</div>',                 methods:{                     my_click: function(){                          console.log(this.$route);                         // $route 当前路由的所有信息                         console.log(this.$router);                         // $router VueRouter的实例化对象                         console.log(this.$el);                         console.log(this.$data);                         // 跳转页面 --> 跳转到登录组件                         this.$router.push("/login")                     }                 }             }         },         {             path:"/course",             component:{                 template:'<div><h1>课程组件</h1></div>'             }         },         {             path:"/login",             component:{                 template:'' +                     '<div>' +                         '<h1>登录组件</h1>' +                     '</div>'             }         },         {             path:"/user",             meta:{                 required_login: true             },             component:{                 template:'' +                     '<div>' +                         '<h1>用户组件</h1>' +                     '</div>'             }         }     ];     // 实例化VueRouter对象     let router = new VueRouter({         routes:url,         mode:'history' // 清除路径     });     router.beforeEach(function (to, from, next) {         console.log(to); // 跳转到哪里         console.log(from); // 从哪来         console.log(next); // 下一步做什么         // 直接路径判断         // if(to.path == "/user"){         //     next("/login");         // }         // 使用meta判断(配置方便)         if(to.meta.required_login){             next("login");         }         next();     });     // router.afterEarch(function(to, from){         // 智能识别路由要去哪和从哪来,一般用于获取路由从哪来     // });     // 把VueRouter的实例化对象注册到Vue的跟实例     const app = new Vue({         el:"#app",         router:router     }) </script> </body> </html> 

5、子路由的注册:静态路由

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>     <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>     <title>Title</title> </head> <body> <div id="app">     <!-- 路由绑定:to -->     <router-link to="/">首页</router-link>     <router-link to="/course">课程</router-link>     <router-link to="/course/detail">课程详情</router-link>     <router-view></router-view> </div> <script>     // 定义路由匹配规则     let url = [         {             path:"/",             component:{                 template:'' +                     '<div>' +                         '<h1>首页组件</h1>' +                     '</div>'             }         },         {             path:"/course",             component:{                 template:'' +                     '<div>' +                         '<h1>课程组件</h1>' +                     '</div>'             }         },         {             path:"/course/detail",             component:{                 template:'' +                     '<div>' +                         '<h1>课程详情组件</h1>' +                         '<hr>' +                         '<router-link to="/course/brief">课程概述</router-link> ' +                         ' <router-link to="/course/chapter">课程章节</router-link>' +                         '<router-view></router-view>' +                     '</div>'             },             children:[                 {                     path:"/course/brief",                     component:{                         template:'' +                             '<div>' +                                 '<h1>课程概述组件</h1>' +                             '</div>'                     }                 },{                     path:"/course/chapter",                     component:{                         template:'' +                             '<div>' +                                 '<h1>课程章节组件</h1>' +                             '</div>'                     }                 },             ]         }     ];     // 实例化VueRouter对象     let router = new VueRouter({         routes:url     });     // 把VueRouter的实例化对象注册到Vue的跟实例     const app = new Vue({         el:"#app",         router:router     }) </script> </body> </html> 

6、子路由的注册:动态路由

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>     <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>     <title>Title</title> </head> <body> <div id="app">     <!-- 路由绑定:to -->     <router-link to="/">首页</router-link>     <router-link to="/course">课程</router-link>     <router-link to="/course/detail">课程详情</router-link>     <router-view></router-view> </div> <script>     // 定义路由匹配规则     let url = [         {             path:"/",             component:{                 template:'' +                     '<div>' +                         '<h1>首页组件</h1>' +                     '</div>'             }         },         {             path:"/course",             component:{                 template:'' +                     '<div>' +                         '<h1>课程组件</h1>' +                     '</div>'             }         },         {             path:"/course/detail",             redirect:{name:'brief'}, // 重定向子路由,实现默认页面显示             component:{                 template:'' +                     '<div>' +                         '<h1>课程详情组件</h1>' +                         '<hr>' +                         '<router-link :to="{name:'brief'}">课程概述</router-link> ' +                         '<router-link to="/course/chapter">课程章节</router-link>' +                         '<router-view></router-view>' +                     '</div>'             },             children:[                 {                     path:"brief",                     name:"brief",                     component:{                         template:'' +                             '<div>' +                                 '<h1>课程概述组件</h1>' +                             '</div>'                     }                 },{                     path:"/course/chapter",                     name:"chapter",                     component:{                         template:'' +                             '<div>' +                                 '<h1>课程章节组件</h1>' +                             '</div>'                     }                 },             ]         }     ];     // 实例化VueRouter对象     let router = new VueRouter({         routes:url     });     // 把VueRouter的实例化对象注册到Vue的跟实例     const app = new Vue({         el:"#app",         router:router     }) </script> </body> </html> 

7、命名的路由视图

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>     <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>     <title>Title</title> </head> <body> <div id="app">     <!-- 路由绑定:to -->     <router-link to="/">首页</router-link>     <router-link to="/course">课程</router-link>     <router-link to="/user">用户</router-link>     <router-view name="head"></router-view>     <router-view name="footer"></router-view>     <router-view></router-view> </div> <script>     // 定义路由匹配规则     let url = [         {             path:"/",             component:{                 template:'' +                     '<div>' +                         '<h1>首页组件</h1>' +                     '</div>',             }         },         {             path:"/course",             component:{                 template:'<div><h1>课程组件</h1></div>'             }         },         {             path:"/user",             components:{                 head:{                     template:'' +                     '<div>' +                         '<h1>用户head</h1>' +                     '</div>'                 },                 footer:{                     template:'' +                     '<div>' +                         '<h1>用户footer</h1>' +                     '</div>'                 }             }         }     ];     // 实例化VueRouter对象     let router = new VueRouter({         routes:url,         mode:'history' // 清除路径     });     router.beforeEach(function (to, from, next) {         next();     });     // 把VueRouter的实例化对象注册到Vue的跟实例     const app = new Vue({         el:"#app",         router:router     }) </script> </body> </html> 

8、Vue的路由:

注册:
-- 定义一个匹配规则对象
let url = [
{
path:"/",
component:{}

​ }
​ ]
​ -- 实例化VueRouter对象 并把匹配规则注册进去
​ let router = new VueRouter({
​ routes:url
​ })
​ -- 把VueRouter实例化对象注册到Vue的根实例
​ const app = new Vue({
​ el:""
​ })
​ -- router-link
​ -- router-view

子路由的注册
-- 在父路由里注册children:[{},{}]
-- 在父路由对应的组件里的template里写 router-link router-view

路由的名命
-- name
-- 注意 to 一定动态绑定 :to=" {name:' '} "

路由的参数
this.$route.params.xxxx
this.$route.query.xxxx

自定义路由
this.$router.push("/course")
this.$router.push({name:' ', params:{ },query:{}})

路由的钩子函数
router.beforeEach(function(to, from, next){
to 路由去哪
from 路由从哪来
next 路由接下来要做什么
}) # 一般用于拦截
router.afterEach(function(to, from){
}) # 一般用于获取

注意
$route 路由的所有信息组成的对象
$router VueRouter 实例化对象
redirect 路由的重定向

四、Vue的生命周期

Vue生命周期的钩子函数:

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>     <title>Title</title> </head> <body> <div id="app">     {{name}} </div> <script>     const app = new Vue({         el:"#app",         data:{             name:"eric"         },         methods:{             init:function(){                 console.log(123)             }         },         beforeCreate(){             console.group("BeforeCreate");             console.log(this.$el);             console.log(this.name);             console.log(this.init);         },         created(){             console.group("Created");             console.log(this.$el);             console.log(this.name);             console.log(this.init);         },         beforeMount(){             console.group("BeforeMount");             console.log(this.$el);             console.log(this.name);             console.log(this.init);         },         mounted(){             console.group("Mounted");             console.log(this.$el);             console.log(this.name);             console.log(this.init);         },         beforeUpdate(){             console.group("BeforeUpdate");             console.log(this.$el);             console.log(this.name);             console.log(this.init);         },         updated(){             console.group("Updated");             console.log(this.$el);             console.log(this.name);             console.log(this.init);         },         beforeDestroy(){             console.group("BeforeDestroy");             console.log(this.$el);             console.log(this.name);             console.log(this.init);         },         destroyed(){             console.group("Destroyed");             console.log(this.$el);             console.log(this.name);             console.log(this.init);         }     }) </script> </body> </html> 

Vue的生命周期的钩子 LifeCycle hooks

数据监听之前:beforeCreate();

监听数据变化:created();

虚拟dom加载完成前:beforeMount();

页面真实加载完成后:mounted();

数据改变前执行的函数:beforeUpdate();

数据改变后执行的函数:updated();

Vue实例销毁前:beforeDestroy();

Vue实例销毁后:destroyed()s

五、Vue-cli脚手架

作用:脚手架帮助搭建Vue项目

下载(下载到全局):npm i vue-cli -g

用vue-cli搭建项目:vue init webpack 项目名称

启动项目:
cd到项目目录下:npm run dev

vue-cli项目目录:

​ build 打包后存放的所有文件包括配置文件
​ config 配置文件
​ node_models 依赖包
​ src 工作目录
​ static 静态文件
​ index.html 单页面
​ pckage.json 存放所有项目信息

路由的解耦过程:

​ 下载 npm i vue-router
​ 导入 import VueRouter from 'vue-router'
​ Vue.use(VueRouter)
​ 定义匹配规则url
​ 实例化对象VueRouter
​ 把VueRouter对象注册到Vue的跟实例中