目录
导读
1.Vue实例
1.1创建Vue实例
根标签el
初始数据data
定义方法methods
计算属性computed
状态监听watch
过滤器filters
2 数据绑定
v-model
v-text
v-html
v-bind
v-on
v-for
v-if和v-show
3.组件
3.1了解组件
3.2 两种组件注册类型:全局注册和局部注册
全局注册
局部注册组件
3.3组件之间数据传递
4.组件的生命周期 钩子函数
4.1钩子函数
导读本章着重在:
Vue实例的创建和数据绑定Vue的事件监听操作Vue组件的注册和组件之间的数据传递的方法Vue生命周期钩子函数的使用 1.Vue实例 1.1创建Vue实例Vue实例:通过new关键字实例化Vue({})构造函数
var vm = new Vue({// 选项 })选项中可以添加的内容:
选项 说明dataVue实例数据对象methods定义Vue实例中的方法components定义子组件computed计算属性filters过滤器el唯一根元素watch监听数据变化 根标签el说明:
在创建Vue实例时,el表示唯一根标签,class或id选择器可用来将页面结构与Vue实例对象vm中的el绑定。
用法:
{{name}} //唯一根元素通过id值与Vue中的el选项绑定var vm = new Vue({ el: '#app', // 通过el与div元素绑定 data: {name: 'Vue实例创建成功!'}}) 初始数据data说明:
Vue实例的数据对象为data,Vue会将data的属性转换为getter、setter,从而让data的属性能够响应数据变化。
用法:
{{name}}
var vm = new Vue({ el: '#app', // 通过el与div元素绑定 data: {name: '定义初始数据'}})console.log(vm.$data.name)console.log(vm.name)console.log(vm._data.name)console.log(vm.$data.name===vm.name)console.log(vm.$data.name===vm._data.name)说明:
methods属性用来定义方法,通过Vue实例可以直接访问这些方法
在定义的方法中,this指向Vue实例本身
定义在methods属性中的方法可以作为页面中的事件处理方法使用
当事件触发后,执行相应的事件处理方法
用法:
var vm = new Vue({ el: '#app', data: { msg: '' }, methods: { // 定义事件处理方法showInfo showInfo :function() { this.msg = '触发单击事件' } }})说明:
计算属性结果会被缓存起来,当依赖的响应式属性发生变化时,才会重新计算,返回最终结果。
用法:
总价格:{{totalPrice}}
单价:{{price}}
数量:{{num}}
减少数量增加数量 var vm = new Vue({ el: '#app', data: {price: 20, num: 0}, computed: {// 总价格totalPricetotalPrice () {return this.price * this.num} }})说明:
事件处理方法是根据用户所需自行定义的,通过单击事件、键盘事件等条件触发,但不能自动监听当前Vue对象的状态变化。 watch状态监听功能,监听当前Vue实例中的数据变化,就会调用当前数据所绑定的事件处理方法。
用法:
var vm = new Vue({ el: '#app', data: {cityName: ‘shanghai’ },watch: {cityName (newName, oldName) { console.log(newName, oldName)} }})监听过程:
说明:
在前端页面开发中,通过数据绑定可以将data数据绑定到页面中,页面中的数据经过逻辑层处理后展示最终的结果。 数据的变化除了在Vue逻辑层进行操作外,还可以通过过滤器来实现。即在页面中直接操作数据,返回最终结果。
用法:
{{message | toUpcase}}var vm = new Vue({ el: '#app', data: {message: 'helloworld' }, filters: {// 将 helloworld 转换为 HELLOWORLDtoUpcase (value) { return value ? value.toUpperCase() : ''} }})两种样式绑定方法:绑定内联样式、绑定样式类
var vm=new Vue({ el:'#app', data: {myDiv: { backgroundColor: 'red',width: '100px', height: '100px‘} pink:'pink', width:'100%',height: '200px'}})内置指令:
路径说明v-model双向数据绑定(语法糖)v-on/@监听事件v-bind/:单向数据绑定v-text插入文本内容v-html插入包含HTML的内容v-for列表渲染v-if条件渲染v-show显示隐藏 v-modelv-model主要实现数据双向绑定,通常用在表单元素上,例如input、textarea、select等。
用法:
var vm = new Vue({ el: '#app', data: {msg: 'v-model指令' }})v-text是在DOM元素内部插入文本内容
用法:
var vm = new Vue({ el: '#app', data: {msg: '我是v-text ' }})v-html是在DOM元素内部插入HTML标签内容
用法:
var vm = new Vue({el: '#app',data: { msg: '我是v-html' } })v-bind可以实现单向数据绑定
用法:
var vm = new Vue({ el: '#app', data: {msg: '我是v-bind ' }})v-on是事件监听指令,直接与事件类型配合使用
用法:
{{msg}}
请单击var vm = new Vue({ el: '#app', data: {msg: '请单击按钮查看内容' }, methods: {showInfo () { this.msg = '我是v-on指令'} }})→→→→
v-for可以实现页面列表渲染,常用来循环数组
用法:
索引是:{{key}},元素内容是:{{item}}var vm = new Vue({el: '#app',data: { list: [1, 2, 3]} })v-if用来控制元素显示或隐藏,属性为布尔值。 v-show可以实现与v-if同样的效果
用法:
我是v-if 显示/隐藏var vm = new Vue({el: '#app',data: { isShow: true} })人面对复杂问题的处理方式:
将一个复杂的问题,拆分成很多个可以处理的小问题。
组件化思想:
将一个逻辑复杂的页面拆分成一个个小的功能块,每个功能块完成独立的功能,整个页面的管理和维护就变得容易。
每个组件都用于实现页面的一个功能块。 每一个组件又可以进行细分。
组件:在Vue中,组件是构成页面中独立结构单元,组件主要以页面结构形式存在,不同组件也具有基本交互功能。
组件必须先注册,再使用
3.2 两种组件注册类型:全局注册和局部注册 全局注册Vue.component()方法实现全局注册组件。
局部组件:注册的组件是挂载在某个实例中的
注册局部组件:通过Vue实例的components属性来实现
我是vm实例中的局部组件
' } var vm = new Vue({el: '#app',// 注册局部组件components: {myComponent: com1 } })3.3组件之间数据传递
上层传递到下层:
一个页面会从服务器请求到很多的数据,可能需要多个子组件进行展示。
不会让子组件发送网络请求,而是直接让大组件(父组件)将数据传递给小组件(子组件)。
props传值:
props即道具,用来接收父组件中定义的数据,其值为数组,从上到下的实现单向数据流传递。
![](https://i-blog.csdnimg.cn/blog_migrate/14d94a76108bc3f2d64f0dffac4cea31.png)
4.组件的生命周期 钩子函数 4.1钩子函数
钩子
说明
beforeCreate
创建实例对象之前执行:在实例初始化之后,数据观测 (data observer)
和 event/watcher 事件配置之前被调用。
created
创建实例对象之后执行:在实例创建完成后被立即调用。
在这一步,实例已完成以下的配置:数据观测 (data observer),property 和方法的运算,
watch/event 事件回调。然而,挂载阶段还没开始,$el property 目前尚不可用。
beforeMount
页面挂载成功之前执行:在挂载开始之前被调用:相关的 render 函数首次被调用。
mounted
页面挂载成功之后执行:实例被挂载后调用,这时 el 被新创建的 vm.$el 替换了。
如果根实例挂载到了一个文档内的元素上,当 mounted 被调用时 vm.$el 也在文档内。
beforeUpdate
组件更新之前执行:数据更新时调用,发生在虚拟 DOM 打补丁之前。
这里适合在更新之前访问现有的 DOM,比如手动移除已添加的事件监听器。
updated
组件更新之后执行:
由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。
当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。
然而在大多数情况下,你应该避免在此期间更改状态。如果要相应状态改变,
通常最好使用计算属性或 watcher 取而代之。
beforeDestroy
实例销毁之前执行:实例销毁之前调用。在这一步,实例仍然完全可用。
destroyed
实例销毁之后执行:
实例销毁后调用。该钩子被调用后,对应 Vue 实例的所有指令都被解绑,
所有的事件监听器被移除,所有的子实例也都被销毁。