甘肃龙网

  1. 首页 > 生活 > >

Vue 实例之数据绑定，事件，组件，生命周期！！！

生活百科vue

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

{{yzxname}}
>var vm = new Vue({el: '#app', // 通过 el 与 div 元素绑定data: {yzxname: 'yzx成功创建Vue实例！'}})
data:
data初始数据：Vue实例的数据对象为data ， Vue会将data的属性转换为、 ， 从而让data的属性能够响应数据变化 。data选项的值是对象 ， 对象里面可以写多个值 。
{{name}}
>var vm = new Vue({el: '#app', // 通过el与div元素绑定data: {name: 'yzx定义初始数据'}})// js中获取 data数据 两种方法都可以~console.log(vm.$data.name)console.log(vm.name)
：
属性用来定义方法 ， 通过Vue实例可以直接访问这些方法 。在定义的方法中 ， this指向Vue实例本身 。定义在属性中的方法可中的事件处理方法使用 。
{{msg}}
>var vm = new Vue({el: '#app',data: {msg: '原始的值'},methods: {// 定义事件处理方法showInfoshowInfo () {this.msg = 'yzx触发单击事件'}}})
：
计算属性：计算属性结果会被缓存起来 ， 当依赖的响应式属性发生变化时 ， 才会重新计算 ， 返回最终结果 。
总价格：{{totalPrice}}
单价 yzx：{{price}}
数量 yzx：{{num}}
>var vm = new Vue({el: '#app',data: {price: 20,num: 0},computed: {// 总价格totalPricetotalPrice() {console.log("totalprice执行了")return this.price * this.num}},methods:{logTotalPrice(){console.log('totalprice的计算结果为'+this.totalPrice)}}})
watch:
通过 watch 获取的新值和旧值
>var vm = new Vue({el: '#app',data: {cityName: 'yzxyzx'},watch: {cityName(newName, oldName) {console.log(newName, oldName)}}})
:
过滤器：在页面中直接操作数据 ， 返回最终结果
{{message | toUpcase}}
>var vm = new Vue({el: '#app',data: {message: 'hello yzx'},filters: {// 将 hello yzx 转换为 HELLO YZXtoUpcase(value) {return value ? value.toUpperCase() : ''}}})
2.Vue 数据绑定 绑定样式：
Vue提供了样式绑定功能 ， 可以通过绑定内联样式和绑定样式类这两种方式来实现 。
绑定内联样式：
在vm实例的data中定义myDiv样式对象 ， 通过v-bind绑定data中定义的myDiv对象 。
>var vm = new Vue({el: "#app",data: {pink: 'pink',width: '100%',height: '200px',myDiv: {backgroundColor: 'red',width: '100px',height: '100px'}}});
绑定样式类名：
通过绑定data中的类名实现元素的样式 。
>.box {background-color: pink;width: 100%;height: 200px;}.inner {background-color: red;width: 100px;height: 50px;border: 2px solid white;}


上一篇：猫猫兔 猫猫兔为什么不能养

下一篇：快速添加功能或内容包