8 获取dom对象和组件的对象
ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例：
<!-- `vm.$refs.p` will be the DOM node -->
<p ref="p">hello</p>
<!-- `vm.$refs.child` will be the child component instance -->
<child-component ref="child"></child-component>
关于 ref 注册时间的重要说明：因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！$refs 也不是响应式的，因此你不应该试图用它在模板中做数据绑定。
使用ref属性用于对象或组建获取
<div id="app">
<button type="button" @click="getdom">获取dom对象</button>
<div id="div1" ref="myDiv">Hello VueJs</div>
<button type="button" @click="getComponents">获取组件对象</button>
<login ref="mycomponents"></login>
</div>
new Vue({
el:'#app',
methods:{
getdom:function(){
//获取到id="div1"的div对象
//有两种方式可以完成
//1.通过传统的document方式
console.log(document.getElementById("div1").innerHTML)
//2.vuejs的写法,在元素上添加v-el
console.log(this.$refs.myDiv)
},
getComponents:function(){
//获取组件对象
console.log(this.$refs.mycomponents)
//获取组件中的值
console.log(this.$refs.mycomponents.subname)
}
},
//定义私有组件(子组件)
components:{
'login':{
data:function(){
return {subname:'这是一个组件名称'}
},
template:'<h1>这是一个子组件</h1>'
}
}
})
9 vue-router路由
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：
- 嵌套的路由/视图表
- 模块化的、基于组件的路由配置
- 路由参数、查询、通配符
- 基于 Vue.js 过渡系统的视图过渡效果
- 细粒度的导航控制
- 带有自动激活的 CSS class 的链接
- HTML5 历史模式或 hash 模式，在 IE9 中自动降级
- 自定义的滚动条行为
9.1 路由写法和传参
引入vuejs和vue-router
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
//准备组件
var Ap = Vue.extend({});
var login = Vue.extend({
template:'<div><h1>登陆</h1></div>'
})
var regist = Vue.extend({
template:'<div><h1>注册{{name}}</h1></div>',
data:function(){
return {
name:''
}
},
created:function() {//在页面渲染是将参数赋值给name
this.name = this.$route.params.name
}
})
//实例化路由规则对象
var router = new VueRouter({
routes:[
{path:'/',redirect:'/login'},//如果是/则自动重定向到login
{path:'/login',component:login},
{path:'/regist/:name',component:regist}//获取参数
]
});
//开启路由对象
new Vue({
el:'#app',
router:router//开启路由对象
})
<div id="app">
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/login">登陆</router-link>
<!--通过router-link指定参数 -->
<router-link to="/regist/zhangsan">注册</router-link>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
9.2 嵌套路由
//准备组件
//准备组件
var App = Vue.extend({});
var account = Vue.extend({
template:'<div><h1>账号组件</h1></div>'
})
var login = Vue.extend({
template:'<div><h1>登陆</h1></div>'
})
var regist = Vue.extend({
template:'<div><h1>注册</h1></div>'
})
//实例化路由规则对象
var router = new VueRouter({
routes:[
{
path:'/account',
component:account,
children:[
{
path:'login',
component:login
},
{
path:'regist',
component:regist
}
]
}
]
});
//开启路由对象
new Vue({
el:'#app',
router:router//开启路由对象
})
