1.组件传值-父组件向子组件传值和data与props的区别
2.组件传值-子组件通过事件调用向父组件传值
3.案例：发表评论。使用ref获取DOM元素和组件引用
4.路由-前端路由和后端路由的概念
5.路由-vue-router的基本使用
6.路由-路由redirect重定向的使用
7.路由-设置选中路由高亮的两种方式
8.路由-为路由切换启动动画
9.路由传参-使用query方式传递参数
10.路由传参-使用params方式传递路由参数
11.路由-使用children属性实现路由嵌套
12.路由-使用命名视图实现经典布局
1.组件传值-父组件向子组件传值和data与props的区别 <--返回目录
父组件向子组件传值
<!DOCTYPE html> <html> <head> <title>标题</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- 导入vue的包 --> <script type="text/javascript" src="vue2.js"></script> <style type="text/css"> div { background-color: #ccc; } /*自定义样式，来控制元素动画样式*/ .my-enter, .my-leave-to { opacity: 0; transform:translateX(150px); } .my-enter-active, /*入场动画的时间段*/ .my-leave-active { /*离场动画的时间段*/ transition: all 0.4s ease; } </style> </head> <body> <div id="app"> <a href="" @click.prevent="comName='com1'">组件1</a> <a href="" @click.prevent="comName='com2'">组件2</a> <!-- 通过mode属性，设置组件切换时的模式，out-in表示上一个组件离场动画后，新组件才开始入场动画--> <transition name="my" mode="out-in"> <!-- 父组件，可以在引用子组件的时候，通过属性绑定的形式，传递数据 注意：定义属性名称全部小写 --> <!-- [Vue tip]: Prop "parentmsg" is passed to component <Anonymous>, but the declared prop name is "parentMsg". Note that HTML attributes are case-insensitive and camelCased props need to use their kebab-case equivalents when using in-DOM templates. You should probably use "parent-msg" instead of "parentMsg". --> <component :is="comName" :parentmsg="msg" @parentshow="show"></component> </transition> </div> <script type="text/javascript"> //创建一个vue实例 var vm = new Vue({ el: '#app', data: { comName: 'com1', msg: "父组件的msg" }, methods: { show() { console.log("调用了父组件的show方法"); } }, components: { com1: { template: '<h1 @click="mymethod">这是子组件1----{{parentmsg}}</h1>', //把父组件传递过来的parentMsg属性，在props数组中定义，这样才能使用该属性 props: ['parentmsg'], methods: { mymethod() { this.$emit('parentshow'); } } }, com2: { template: '<h1>这是子组件2</h1>' } } }); </script> </body> </html>
data与props的区别：
1）子组件中所有props中的数据，都是通过父组件传递给子组件的。数据只是可读
2）子组件data中的数据是自身私有的，数据可读可写
2.组件传值-子组件通过事件调用向父组件传值 <--返回目录
<!DOCTYPE html> <html> <head> <title>标题</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- 导入vue的包 --> <script type="text/javascript" src="vue2.js"></script> <style type="text/css"> div { background-color: #ccc; } /*自定义样式，来控制元素动画样式*/ .my-enter, .my-leave-to { opacity: 0; transform:translateX(150px); } .my-enter-active, /*入场动画的时间段*/ .my-leave-active { /*离场动画的时间段*/ transition: all 0.4s ease; } </style> </head> <body> <div id="app"> <a href="" @click.prevent="comName='com1'">组件1</a> <a href="" @click.prevent="comName='com2'">组件2</a> <!-- 通过mode属性，设置组件切换时的模式，out-in表示上一个组件离场动画后，新组件才开始入场动画--> <transition name="my" mode="out-in"> <!-- 父组件，可以在引用子组件的时候，通过属性绑定的形式，传递数据 注意：定义属性名称全部小写 --> <!-- [Vue tip]: Prop "parentmsg" is passed to component <Anonymous>, but the declared prop name is "parentMsg". Note that HTML attributes are case-insensitive and camelCased props need to use their kebab-case equivalents when using in-DOM templates. You should probably use "parent-msg" instead of "parentMsg". --> <component :is="comName" :parentmsg="msg" @parentshow="show"></component> </transition> <br/> <h1>{{msg}}</h1> </div> <script type="text/javascript"> //创建一个vue实例 var vm = new Vue({ el: '#app', data: { comName: 'com1', msg: "父组件的msg" }, methods: { show(data) { console.log("调用了父组件的show方法---" + data ); this.msg = data; } }, components: { com1: { template: '<h1 @click="mymethod">这是子组件1----{{parentmsg}}</h1>', data: function(){ return { sonmsg: '子组件的msg' } }, //把父组件传递过来的parentMsg属性，在props数组中定义，这样才能使用该属性 props: ['parentmsg'], methods: { mymethod() { this.$emit('parentshow', this.sonmsg);//调用父组件传递过来的方法 } } }, com2: { template: '<h1>这是子组件2</h1>' } } }); </script> </body> </html>
3.案例：发表评论。使用ref获取DOM元素和组件引用 <--返回目录
案例：添加评论部分是子组件；父组件对所有评论进行列表展示。评论保存在本地存储localStorage
<!DOCTYPE html> <html> <head> <title>标题</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- 导入vue的包 --> <script type="text/javascript" src="vue2.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css"> </head> <body> <div id="app"> <com1></com1> <div class="container"> <ul class="list-group"> <li class="list-group-item" v-for="item in list" :key="item.id"> <span class="badge">{{item.user}}</span> {{item.comments}} </li> </ul> </div> </div> <template id="temp1"> <div class="container"> <div class="row"> <div class="col-md-3"></div> <div class="col-md-6"> <form> <div class="form-group"> <label for="user">用户名</label> <input type="text" name="user" placeholder="输入用户名" class="form-control" v-model="user"> </div> <div class="form-group"> <label for="comments">评论</label> <input type="text" name="comments" placeholder="输入评论" class="form-control" v-model="comments"> </div> <button class="btn btn-primary" @click="postCommets">发表评论</button> </form> </div><!-- /.col-md-6 --> </div><!-- /.row --> </div><!-- /.container --> </template> <script type="text/javascript"> //创建一个vue实例 var vm = new Vue({ el: '#app', data: { list: [] }, methods: { loadComments() { var list = JSON.parse(localStorage.getItem("cmts") || '[]'); this.list = list; } }, created() { this.loadComments(); }, components: { com1: { template: '#temp1', data(){ return { user: '', comments: '' } }, methods: { postCommets() { var obj = {id:Date.now(), user: this.user, comments: this.comments}; var list = JSON.parse(localStorage.getItem("cmts") || '[]'); list.unshift(obj); localStorage.setItem("cmts", JSON.stringify(list)); this.user = ''; this.comments = ''; } } } } }); </script> </body> </html>
// 问题1：我这个案例里面不需要将父组件的loadComments()方法传递给子组件；点击发表按钮后，评论列表自动更新。
// 问题2：我没有手动给输入框注册enter键盘事件，但是也有这个功能，猜测是bootstrap本身自带的。
使用ref获取DOM元素和组件引用
// vue获取dom元素 <!DOCTYPE html> <html> <head> <title>vue获取dom元素</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- 导入vue的包 --> <script type="text/javascript" src="vue2.js"></script> </head> <body> <div id="app"> <input type="button" value="获取h3标签里面的文本" @click="getEle"> <h3 ref="h3Ele">这是一个h3标签</h3> </div> <script type="text/javascript"> //创建一个vue实例 var vm = new Vue({ el: '#app', data: { }, methods: { getEle() { // this.$refs.h3Ele：得到一个原生DOM对象 alert(this.$refs.h3Ele.innerText); } } }); </script> </body> </html> // vue获取子组件 <!DOCTYPE html> <html> <head> <title>vue获取dom元素</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- 导入vue的包 --> <script type="text/javascript" src="vue2.js"></script> <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> --> </head> <body> <div id="app"> <input type="button" value="获取h3标签里面的文本" @click="getEle"> <com1 ref="com1ref"></com1> </div> <script type="text/javascript"> //创建一个vue实例 var vm = new Vue({ el: '#app', data: { }, methods: { getEle() { console.log(this.$refs.com1ref.sonmsg); this.$refs.com1ref.show(); } }, components: { com1: { template: '<div></div>', data() { return { sonmsg: '子组件的msg' } }, methods: { show() { console.log("调用子组件的show方法：" + this.sonmsg); } } } } }); </script> </body> </html>
4.路由-前端路由和后端路由的概念 <--返回目录
* 后端路由：对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上的资源
* 前端路由：对应单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，
同时，hash有一个特点：HTTP请求中不会包含hash相关的内容。所以，单页面程序中页面跳转主要用hash实现
* 在单页面应用程序中，这种通过hash改变类切换页面的方式，称做前端路由
* 路由：在URL中采用#号来作为当前视图的地址,改变#号后的参数，页面并不会重载。
* 单页Web应用（single page web application，SPA），就是只有一张Web页面的应用，
是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。
5.路由-vue-router的基本使用 <--返回目录
<!DOCTYPE html> <html> <head> <title>vue获取dom元素</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- 导入vue.js --> <script type="text/javascript" src="vue2.js"></script> <!-- 安装 vue-router 路由模块 --> <script type="text/javascript" src="vue-router.js"></script> </head> <body> <div id="app"> <h1>Hello App!</h1> <p> <!-- 使用 router-link 组件来导航. --> <!-- 通过传入 `to` 属性指定链接. --> <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 --> <router-link to="/login">Go to login</router-link> <router-link to="/register">Go to register</router-link> <!-- 下面的方式也可以,但是不推荐注意使用 --> <a href="#/login">登录</a> <a href="#/register">注册</a> </p> <!-- 路由出口 --> <!-- 路由匹配到的组件将渲染在这里 --> <router-view></router-view> </div> <script type="text/javascript"> // 组件的模板对象 var login = { template: '<h1>登录组件</h1>' }; var register = { template: '<h1>注册组件</h1>' }; // 创建一个路由对象 var routerObj = new VueRouter({ routes: [ // 路由匹配规则 {path: '/login', component: login}, {path: '/register', component: register} ] }); // 创建一个vue实例 var vm = new Vue({ el: '#app', data: { }, methods: { }, //将路由规则对象，注册到vm实例上，用来监听URL地址的变化，然后展示对应的组件 router: routerObj }); </script> </body> </html>
6.路由-路由redirect重定向的使用 <--返回目录
routes: [ // 路由匹配规则
{path: '/', redirect: '/login'},
{path: '/login', component: login},
{path: '/register', component: register}
]
7.路由-设置选中路由高亮的两种方式 <--返回目录
// 第一种方式
<style type="text/css"> .router-link-active { // vue-router默认的 color: red; background-color: #ccc; } </style>
// 设置链接激活时使用的CSS类名。默认值可以通过路由的构造选项linkActiveClass来全局配置。
var routerObj = new VueRouter({ routes: [ // 路由匹配规则 {path: '/', redirect: '/login'}, {path: '/login', component: login}, {path: '/register', component: register} ], linkActiveClass: 'myActive' }); /*修改链接激活使用的CSS类名：myActive*/ .myActive { color: #fff; background-color: #ff3300; }
8.路由-为路由切换启动动画 <--返回目录
/*自定义样式，来控制元素动画样式*/ .my-enter, .my-leave-to { opacity: 0; transform:translateX(150px); } .my-enter-active, /*入场动画的时间段*/ .my-leave-active { /*离场动画的时间段*/ transition: all 0.4s ease; } <!-- 路由匹配到的组件将渲染在这里 --> <transition mode="out-in" name="my"> <router-view></router-view> </transition>
9.路由传参-使用query方式传递参数 <--返回目录
<router-link to="/login?id=10">Go to login</router-link> var login = { template: '<h1>登录组件---{{$route.query.id}}</h1>' };
10.路由传参-使用params方式传递路由参数 <--返回目录
<router-link to="/register/20">Go to register</router-link> var register = { template: '<h1>注册组件---{{$route.params.id}}</h1>' }; // 创建一个路由对象 var routerObj = new VueRouter({ routes: [ // 路由匹配规则 {path: '/', redirect: '/login'}, {path: '/login', component: login}, {path: '/register/:id', component: register} ], linkActiveClass: 'myActive' });
11.路由-使用children属性实现路由嵌套 <--返回目录
<!DOCTYPE html> <html> <head> <title>使用children属性实现路由嵌套</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- 导入vue.js --> <script type="text/javascript" src="vue2.js"></script> <!-- 安装 vue-router 路由模块 --> <script type="text/javascript" src="vue-router.js"></script> <style type="text/css"> /*链接激活默认使用的CSS类名：router-link-active*/ .router-link-active { color: red; background-color: #ccc; } /*修改链接激活使用的CSS类名：myActive*/ .myActive { color: #fff; background-color: #ff3300; } /*自定义样式，来控制元素动画样式*/ .my-enter, .my-leave-to { opacity: 0; transform:translateX(150px); } .my-enter-active, /*入场动画的时间段*/ .my-leave-active { /*离场动画的时间段*/ transition: all 0.4s ease; } .parent { border:1px dashed #000; width: 300px; height: 500px; } </style> </head> <body> <div id="app"> <h1>Hello App!</h1> <p> <!-- 使用 router-link 组件来导航. --> <!-- 通过传入 `to` 属性指定链接. --> <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 --> <router-link to="/account">go to account</router-link> </p> <!-- 路由出口，路由匹配到的组件将渲染在这里 --> <transition mode="out-in" name="my"> <router-view class="parent"></router-view><!-- 给父组件留的坑 --> </transition> </div> <template id="temp"> <div> <h2>account--父组件</h2> <router-link to="/account/login">登陆</router-link> <router-link to="/account/register">注册</router-link> <router-view></router-view><!-- 给子组件留的坑 --> </div> </template> <script type="text/javascript"> // 组件的模板对象 var account = { template: '#temp' }; var login = { template: '<h1>login组件</h1>' }; var register = { template: '<h1>register组件</h1>' }; // 创建一个路由对象 var routerObj = new VueRouter({ routes: [ // 路由匹配规则 //{path: '/', redirect: '/account'}, {path: '/account', component: account, children: [ {path: 'login', component: login}, {path: 'register', component: register} ]} ], linkActiveClass: 'myActive', }); // 创建一个vue实例 var vm = new Vue({ el: '#app', data: { }, methods: { }, //将路由规则对象，注册到vm实例上，用来监听URL地址的变化，然后展示对应的组件 router: routerObj }); </script> </body> </html>
12.路由-使用命名视图实现经典布局 <--返回目录
<!DOCTYPE html> <html> <head> <title>使用命名视图实现经典布局</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- 导入vue.js --> <script type="text/javascript" src="vue2.js"></script> <!-- 安装 vue-router 路由模块 --> <script type="text/javascript" src="vue-router.js"></script> <style type="text/css"> .header { background-color: #abc; height: 80px; } .container { display: flex; height: 600px; } .left { flex: 2; background-color: #ccc; } .main { flex: 8; background-color: blue; } body { margin: 0; padding: 0; } h1 { margin: 0; padding: 0; font-size: 16px; } </style> </head> <body> <div id="app"> <!-- 路由出口，路由匹配到的组件将渲染在这里 --> <router-view class="header"></router-view> <div class="container"> <router-view name="left" class="left"></router-view> <router-view name="main" class="main"></router-view> </div> </div> <script type="text/javascript"> // 组件的模板对象 var header = { template: '<h1>header组件</h1>' }; var left = { template: '<h1>left组件</h1>' }; var main = { template: '<h1>main组件</h1>' }; // 创建一个路由对象 var routerObj = new VueRouter({ routes: [ // 路由匹配规则 {path: '/', components: { 'default': header, 'left': left, 'main': main }} ] }); // 创建一个vue实例 var vm = new Vue({ el: '#app', data: { }, methods: { }, //将路由规则对象，注册到vm实例上，用来监听URL地址的变化，然后展示对应的组件 router: routerObj }); </script> </body> </html>