第四天（ref获取dom元素和组件以及路由的讲解）
1.7.1. ref获取dom元素和组件
1.首先为要被获取的dom元素或者组件设置id
2.设置 ref属性为id （组件的id，在引用标签ref）例如
<tempalte id="seven">...</tempalte> <login ref="seven"><login>
3.使用方法 this.$refs.seven.数据（innerText）
代码例子：
<body><div id="app"><input type="button" value="操作" @click="ccc()" /><h2 id="re1" ref="re1">科比</h2><h3 id="re2" ref="re2">{{s1}}</h3><duiixiang ref="tmp"></duiixiang></div><template id="tmp"><div><h1 id="tempre" ref="tempre">哈哈哈哈哈哈哈</h1></div></template><script type="text/javascript">var duiixiang = {template: '#tmp',data: function() {return{id: 1,name: '小小怪'}},methods:{shuchu() {console.log('组件里的方法');}}}var vm = new Vue({el:'#app',data:{s1:'贾真琦'},components:{duiixiang},methods:{ccc() {console.log(this.$refs.re1.innerText);//获取domconsole.log(this.$refs.re2.innerText);console.log(this.$refs.tmp.$refs.tempre.innerText); //获取组件里的domconsole.log(this.$refs.tmp.id);console.log(this.$refs.tmp.name); //获取 组件里data的数据this.$refs.tmp.shuchu(); //获取组件里的方法}}});</script></body>
1.7.2. 路由
##什么是路由
**后端路由: **对于普通的网站，所有的超链接都是URL地址， 所有的URL地址都对应服务器上对应的资源;
**前端路由: **对于单页面应用程序来说，主要通过URL中的hash (#号)来实现不同页面之间的切换，同时，hash有一个特点: httP请求中不会包含hash相关的内容;所以，单页面程序中的页面跳转主要用hash实现;
3.在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由(区别于后端路由) ;
• 路由的基本使用
1.首先引入 vue.js再引入 vue-router.js
2.创建组件
<template id="tmp2"><div><button type="button" @click="dd">登录</button></div></template>
3.创建路由对象
var routerobj = new VueRouter({//路由匹配规则,每个匹配规则都是一个对象(有两个属性)//属性1 是 path, 表示监听,那个路由链接地址//属性2 是 component 对应的组件routes: [{path: '/login', component: login},{path: '/register', component: register}]});
4.在vm对象里 添加 router: 路由对象
例子：var vm = new Vue({el:'#app',data:{},methods:{},router: routerobj});
5.使用 标签显示
<div id="app"><router-link to="/login">登录</router-link><router-link to="/register">注册</router-link><router-view></router-view></div>
•
用来显示路由的组件的
•
用来做链接路由地址，默认渲染成标签
可通过tag属性更改
<router-link to="/login" tag="p">登录</router-link><router-link to="/register">注册</router-link>
通过添加 repalce可以设置 mode的 history为 repalce
• 路由的redirect重定向
{path:’/’, redirect: login}
• 选中路由高亮显示
• .router-link-active
路由会自动的激活这个类
为.router-link-active添加高亮样式即可
• 可自定义.router-link-active的类名
在路由对象的linkActiveClass选项中可以修改.router-link-active的名字，
<style type="text/css">.gaoliang {color: #1B6D85;background-color: red;font-size: 30px;}</style>var routerobj = new VueRouter({//路由匹配规则,每个匹配规则都是一个对象(有两个属性)//属性1 是 path, 表示监听,那个路由链接地址//属性2 是 component 对应的组件routes: [{path:'/', redirect: login},{path: '/login', component: login},{path: '/register', component: register}],linkActiveClass:'gaoliang'});
• 路由用动画控制
直接使标签被包裹进即可实现动画效果
• 路由传参
• 使用 query实现
1.在转入此路由时，以？传值。值会保存在这个路由this.$route.query中
<router-link to="/a?id&name">登录</router-link>
2.使用 this.$route.query.变量调用即可
• 使用params实现
{path:’/a/:id/:name’, component: login}
1.设置传值为 /:变量的时候传入的值会保存到this.$route.params
2.使用this.$route.params.id调用传入的值
• 使用children实现路由嵌套
主要实现： 在 父级路由规则里 加children选项列表，存错子路由{path, component}
注意事项：
1.子路由的链接标签 要写全（有父级路由路径）例子：
<!-- 这里要带上父级路由路径 --><router-link to="/a/login">登录</router-link><router-link to="/a/register
2.子路由的路径不可带/,否则在根目录开始找，会出错
children:[
//这里的路径不能带/,否子以根路径为基本
{path:‘login’, component:login},
{path:‘register’, component:register}
]
具体实现
创建父级组件包含两个子路由链接与路由显示标签
<template id="tmp1"><div><h1>seven</h1><!-- 这里要带上父级路由路径 --><router-link to="/a/login">登录</router-link><router-link to="/a/register">注册</router-link><router-view></router-view></div></template>
2.在父路由里添加children选项
var viue = {template:'#tmp1'}var login = {template:'#tmp2'}var register = {template:'#tmp3'}var routerobj = new VueRouter({routes:[{path:'/', redirect:viue},{path:'/a',component:viue,children:[//这里的路径不能带/,否子以根路径为基本{path:'login', component:login},{path:'register', component:register}]}]});
• 实现经典布局
1.为显示的容器设置name
<router-view></router-view><div class="xxx"><router-view name="left"></router-view><router-view name="main"></router-view></div>
2.在设置路由规则的第二个属性，用components
{path:’/’, components:{
‘default’: header,
‘left’: leftBox,
‘main’: mainBox
}}
1.7.3. 属性
• watch选项实现监听data数据
watch : { ‘data数据’ : function(newVal, oldVal) {
} }
• watch监听路由
1.监听路由实现： 基于 $route.path保存了当前的路由情况
2.在使用条件判断是否为当前路由时，注意使用有参数的函数 的参数 newVal进行判断，不要使用route.path或者‘route.path或者‘route.path或者‘route.path’，无效果。
使用===判断数值相同且类型相同
watch:{
‘$route.path’: function(newVal, oldVal) {
console.log(newVal + “-----” + oldVal);
if (newVal === ‘/login’){
alert(“欢迎登录！”);
}
if (newVal === ‘/register’){
alert(“欢迎注册！”)
}
}
}
• 使用computed计算属性
// 在computed中,可以定义一些属性,计算属性的本质,就是一个方法,只不过我
// 们在使用这些属性的时候.是把他们的名称,直接当作属性来用.并不会把计算属性当方法去调用
注意事项：
计算属性， 引用的时候，不可以加上()去调用，直接把它当成普通的属性用就行
只要计算属性的function内部，所用到的任何data发生变化，就会重新计算这个属性的值
计算属性的求值结果，会被缓存起来，方便下次的直接使用
computed:{'s4': function() {console.log('ok');return this.s1+'-'+this.s2;}}
• 对比methods、watch、computed
[ computed ]属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算。主要当作属性来使用;[ methods ]方法表示一个具体的操作,主要书写业务逻辑;[ watch]-个对象,键是需要观察的表达式,值是对应回调函数。主要用来监听某些特定数据的变化,
从而进行某些具体的业务逻辑操作;可以看作是[ computed ]和[ methods ]的结合体;
谢谢观看~~
