Vue基础整理2

1、获取DOM元素及组件

使用ref

<div id='app'>
	<input type='button' @click='getElement' value='获取元素'>
	<p ref='content'>来找我啊</p>
	<com  ref=‘sonContent’></com>
</div>

<template id='son'>
	<div>
		<p>哈哈哈</p>
	</div>
</template>

var com = {
	template: '#son',
	data() {
		return {
			msg: 'son msg'
		}
	},
	methods: {
		show() {
			console.log('这里是子组件的方法')
		}
	}
}

var vm = new Vue({
	el: '#app',
	data: {},
	methods: {
		getElement() {
			console.log(this.$refs.content.innerText); //来找我啊
			console.log(this.$refs.sonContent.msg); //son msg
			this.$refs.sonContent.show(); //这里是子组件的方法
		}
	},
	components: {
		com
	}
})

在这里，通过给元素添加 ref 属性，使用this.$refs.ref属性名.innerText去获取元素的内容，避免了DOM的操作，也可以给子组件添加 ref 属性，同样使用 this.$refs.ref属性名.变量名/方法名 去获取子组件中的变量或者方法。

2、路由

1、vue-router

var routerObj = new VueRouter({ //创建路由实例
	routes: [ //路由匹配规则
		{
			path: '/...', //路径
			component: 组件模板对象, //组件模板对象,不能为组件引用名称
		},
		{path: '', component: }，
		...
	]
})

var vm = new Vue({
	el: '#app',
	data: {},
	methods: {},
	router: routerObj, //将路由规则对象注册到vm实例上
})

在页面中使用`<router-view></router-view>`来显示组件内容

2、router-link

(1)、默认渲染为一个 a 标签
(2)、tag属性：将router-link转为指定的元素

<router-link to='/login' tag='span'>登录</router-link> //此时渲染为 span 标签
<router-link to='/register'>注册</router-link> //此时为默认渲染 a 标签

3、路由 redirect 重定向

【注】:此处重定向不同于 node 中的重定向

routes: [
	{path: '/', redirect: '/login'} //如果为根路径，则重定向到登录页路径
]

跳转按钮的样式修改

• 在使用<router-link>时,标签会有一个默认的类名:router-link-active,可以通过这个类名在修改被选中的标签的样式
• 可以在router的构造函数中，通过linkActiveClass属性来修改默认的类名

4、路由传参之 — query

1、获取参数: this.$route.query
2、传参：

在跳转按钮处定义点击事件，在点击事件中：
this.$router.push({
	path: '跳转的路径',
	query: {
		//传递的参数
		id: '01',
		neme: '哈哈哈'
	}
})

【注】:在<router-link>标签中，添加点击事件时，需要写成 @click.native

4、路由传参之 — pamars

1、获取参数: this.$route.params
2、传参：

在跳转按钮处定义点击事件，在点击事件中：
this.$router.push({
	name: '跳转的路径名', //不带‘/’
	params: {
		//传递的参数
		id: '01',
		neme: '哈哈哈'
	}
})

3.使用params时，在路由实例中的匹配规则内，需要加上 ‘name’ 属性，值为路径名称(不加‘/’)
【注】:params必须使用name来引入

4、路由嵌套 — children

在某个路由跳转的组件中，内部需要使用路由时，在路由匹配规则中格式应为：

<router-link to='/account/login'>登录</router-link>
routes: [
 {
 	path: '/account', 
 	component: account,
 	children: [
 		path: 'login', //此时路径不加'/'
 		component: login
 	]
 } //如果为根路径，则重定向到登录页路径
]

4、路由命名视图

图例：

图中布局分为头部(header)，左侧边栏(leftBox)，内容(mainBox)三个组件组>成

<div id="app">
	<router-view></router-view>
		<div class="content">
     	<router-view name='left'></router-view>
         <router-view name='main'></router-view>
     </div>
</div>

路由匹配规则
routes: [
	{
		path: '/',
		components: {
			'default': header,
			'left': leftBox,
			'main': mainBox
		}
	},
]

3、watch 监听

1、监听文本框内容变化

watch:{} :与 methods 同级，可以监视 data 中指定的数据的变化，然后触发 watch 中对应的 function 函数

<div id='app'>
	<input type='text' v-model='txtValue'>
</div>

data:{
	txtValue: ''
},
watch: {
	txtValue: function(newVal,oldVal) {
		//当输入框中值改变时，触发该事件
		//方法中可以包含newVal、oldVal两个参数，代表改变之前的值后改变之后的值
	}
}

2、监听路由变化

watch: {
	'$route.path': function(newVal,oldVal) {
		//当输入框中值改变时，触发该事件
		//方法中可以包含newVal、oldVal两个参数，代表改变之前的值后改变之后的值
	}
}

3、computed 计算属性

computed :{} :与 methods 同级，可以定义一些属性，为计算属性，其本质是一个方法，只不过在使用这些计算属性的时候，是将其名称直接当作属性来使用，并不会把计算属性当作方法去调用

<div id='app'>
	<input type='text' v-model='firstName'>
	<input type='text' v-model='lastName'>
</div>

data: {
	firstName: ''
},
computed: {
	lastName: function() {
		return this.firstName
	}
}
【注】:
	1、计算属性在调用的时候不加 () 调用，直接当作普通属性使用
	2、计算属性的 function 内部所用到的任何 data 中的数据发生变化，就会重新计算该 计算属性 中的值
	3、计算属性的求值结果会被缓存，方便下次直接使用，如果计算属性的方法中所依赖的任何数据都没有发生变化，则不会重新对计算属性求值