Vue基础1

Vue基础（1）

学习目标

1. 掌握Vue实例的创建及数据的绑定；
2. 掌握Vue的事件和监听操作；
3. 掌握Vue组件的注册及组件之间的数据传递的方法；
4. 掌握Vue生命周期钩子函数的使用

Vue实例

通过new关键字实例化Vue({})构造函数

	<script>
	 var vm = new Vue({
	 // 选项
	 })
	<script>

一、Vue实例对象

选项	说明
data	Vue实例对象
methods	定义Vue实例中的方法
components	定义子组件
computed	计算属性
filters	过滤器
el	唯一根元素
watch	监听数据变化

1.el 唯一根标签

el表示唯一根标签，calss或id选择器可用来将页面结构与Vue实例对象vm的el绑定

唯一根元素

通过id值与Vue中的el选项绑定。

<!-- 定义唯一根元素div -->
<div id="app">{{name}}</div>
<script>
	var vm = new Vue({
	    el: '#app', // 通过el与div元素绑定
	    data: {name: 'Vue实例创建成功！'}
	})
<script>

2.data 初始数据

Vue实例的数据对象为data，Vue会将data的属性转换为getter、setter，从而让data的属性能够响应数据变化。

在data中定义name的初始数据为“定义初始数据”。

<!-- 定义唯一根元素div -->
	<div id="app"><p>{{name}}</p></div>
<script>
	var vm = new Vue({
	    el: '#app', // 通过el与div元素绑定
	    data: {name: '定义初始数据'}
		})
	console.log(vm.$data.name)
</script>

3.methods 定义方法

1. methods属性用来定义方法，通过Vue实例可以直接访问这些方法
2. 在定义的方法中，this指向Vue实例本身
3. 定义在methods属性中的方法可以作为页面中的事件处理方法使用
4. 当事件触发后，执行相应的事件处理方法

<div id="app">
 <!-- 为button按钮绑定click事件 -->
 	<button @click="showInfo">请单击</button>
 	<p>{{msg}}</p>
</div>
<script>
<!-- 在methods选项中定义showInfo()方法，实现页面内容的更新。-->
	var vm = new Vue({
	    el: '#app',
	    data: {
	    msg: ''
	    },
	    methods: {
		 // 定义事件处理方法showInfo
		 	showInfo () {
		 		this.msg = '触发单击事件'
			}
		}
	})
 </script>

效果如下：
单击页面中的“请单击”按钮，更新页面内容

4.computed计算属性

计算属性结果会被缓存起来，当依赖的响应式属性发生变化时，才会重新计算，返回最终结果

首先编写总价格页面结构。

<div id="app">
	 <p>总价格：{{totalPrice}}</p><p>单价：{{price}}</p>
	 <p>数量：{{num}}</p>
	 <div>
	 <button @click="num == 0 ? 0 : num--">减少数量</button>
	 <button @click="num++">增加数量</button>
 </div>
</div>

在computed中定义totalPrice函数返回计算后的总价格。

var vm = new Vue({
    el: '#app',
    data: {price: 20, num: 0},
    computed: {
 // 总价格totalPrice
    	totalPrice () {return this.price * this.num}
 }
})

5.watch状态监听

通过watch获取cityName的新值和旧值

<div id="app">
 <!-- input中的v-model用于在表单控件元素上创建双向数据绑定 -->
 	<input type="text" v-model="cityName">
</div>

定义vm实例对象

<script>
	var vm = new Vue({
	    el: '#app',
	    data: {
	    	cityName: 'shanghai‘
	 	},
	    watch: {
	    	cityName (newName, oldName) {
	    		console.log(newName, oldName)
	 	    }
	 	}
	})
</script>

在配置对象中再定义watch监听cityName属性

效果如下

6. filters过滤器

在页面中直接操作数据，返回最终结果

在插值表达式中使用filters过滤器，将小写字母转换成大写字母

<div id="app">
 <div>{{message | toUpcase}}</div>
</div>

创建Vm实例对象并定义message初始数据

<script>
	var vm = new Vue({
	    el: '#app',
	    data: {
	 		message: 'helloworld'
	 	},
	 
	//在vm中定义filters过滤器，并在filters中定义toUpcase()方法
		filters: {
	 // 将 helloworld 转换为 HELLOWORLD
		 	toUpcase (value) {
	 			return value ? value.toUpperCase() : ''
	 		}
	 	}
	 })
 </script>

第2行代码中的|是管道符，管道符之前代码执行的结果会传到后面作为参数处理

• v-bind属性绑定中使用过滤器
  就是给当前元素绑定添加id属性

<div id="app">
 	<div v-bind:id="dataId | formatId">helloworld</div>
</div>
<script>
	var vm = new Vue({
		el: '#app',
		data: {
	 		dataId: 'dff1'
	 	},
	    filters: {
	 		formatId (value) {return value ? value.charAt(1) + value.indexOf('d') : ''}
	 }})
</script>

charAt（）是字符串处理方法，参数为索引值，当前获取的是索引为1的字符串f，而indexOf（）方法的参数是指定字符，当前获取的是字符d所在的索引0
之后helloworld的id绑定为 “f0”