博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Vue 教程第四篇—— Vue 实例化时基本属性
阅读量:6717 次
发布时间:2019-06-25

本文共 5719 字,大约阅读时间需要 19 分钟。

实例元素 el

实例元素指的是 Vue 实例化时编译的容器元素,或者说是 Vue 作用的元素容器

var vm = new Vue({        el: '#app'    })

也可以为实例元素指定其它选择器

var vm = new Vue({        el: '.app'    })

可以有多个实例元素

var vm = new Vue({        el: '#app1'    })    var vm = new Vue({        el: '#app2'    })

如果有多个相同的实例元素则只有第一个起效

var vm = new Vue({        el: '#app'    })

也可以在实例化的时候不指定实例元素,后面用 $mount() 手动进行挂载

var vm = new Vue({        //option    })    vm.$mount("#app");

可以通过实例获取实例元素

var vm = new Vue({        el: '#app'    })    console.log(vm.$el)

数据对象 data

在 MVVM 模式中充当着 M(Model) 数据模型层,更多的体现于将 M 层映射到 V 层

{
{key1}}
{
{key2 + key3}}
{
{key4.key4_1}}
{
{JSON.stringify(key5[0])}}
var array = [{key5_1: "key5_1"}];    var vm = new Vue({        el: '#app',        data: {            key1: '文本',            key2: 1,            key3: 10,            key4: {                key4_1: 'key4_1'            },            key5: array        }    }

可以通过实例获取数据对象

var vm = new Vue({        el: '#app',        data: {}    })    console.log(vm.$data)

事件处理器 methods

元素可以通过 v-on:事件 || @事件 进行绑定事件,事件中的 this 默认指向实例 vm

{
{count}}
var vm = new Vue({        el: '#app',        data: {            count: 0        }    })

上面的情况仅适用于很简单的处理,复杂的处理可以需要单独处理上面的情况仅适用于很简单的处理,复杂的处理可以需要单独处理

确认按钮被点击了 {

{ counter }} 次。

var vm = new Vue({        el: '#app',        data: {            count: 0        },        methods: {            counter: function(){                this.count += 1;            }        }    })

在 js 的事件中默认会有个 event 对象,Vue 在事件上对 event 对象进行继承二次封装,改名为 $event,在事件当中默认传过去

{
{count}}
var vm = new Vue({        el: '#app',        data: {            count: 0        },        methods: {            eventer: function(event){                var _count = event.target.getAttribute('count') * 1;                this.count += _count;                event.target.setAttribute('count', _count);            }        }    })

在事件中很多情况下要传参数,Vue 也可以在事件中传参数

{
{count}}
var vm = new Vue({        el: '#app',        data: {            count: 0        },        methods: {            parameter: function(n, event){                this.count += n;                event.target.setAttribute('disabled', true);            }        }    })

计算属性 computed

computed 主要是针对 data 的属性进行操作,this 的指针默认指向实例 vm

{

{reversedMessage}}

data: {        message: 'ABC'    },    computed: {        reversedMessage: function(){            return this.message.split('').reverse().join('')        }    }

渲染结果为

CBA

在 computed 的属性中默认有两个属性,一个是 get,我们称之为 getter,另一个是 set,我们称之为 setter,所以也可以这样写:

data: {        message: 'ABC'    },    computed: {        reversedMessage: {            get: function(){                return this.message.split('').reverse().join('')            }        }    }

当我们在 V 层调用 {

{reversedMessage}} 的时候会自动触发 reversedMessage.get()

setter 的逻辑也是一样,当改变对应的属性时,会自动触发 set 方法

{

{fullName}}

var vm = new Vue({        el: '#app',        data: {            firstName:'DK',            lastName: 'Lan',            newName: ''        },        computed: {            fullName:{                get: function(){                    return this.firstName + '.' + this.lastName                },                set: function(newValue){                    this.firstName = newValue                }            }        },        methods: {            changeName: function(){                this.fullName = this.newName;            }        }    })

Vue 在 getter 上面作了基于对应属性的依赖缓存,也就是说多次调用同一个属性,get 只会执行一次。而事件在每次触发时都会被调用,当然在改变该属性值的时候会再次被调用

{

{fullName}}

{

{fullName}}

{

{fullName}}

var vm = new Vue({        el: '#app',        data: {            firstName:'DK',            lastName: 'Lan',            newName: ''        },        computed: {            fullName:{                get: function(){                    return this.firstName + '.' + this.lastName                },                set: function(newValue){                    this.firstName = newValue                }            }        },        methods: {            changeName: function(txt){                this.newName = txt;                //如果在这里改变 this.fullName 的值,则会再次自动触发对应的 getter            }        }    })

监听器 watch

Vue 提供了对单个属性的监听器,当该属性发生改变的时候,自动触发,此项使用不当会影响性能,所以慎用。

    

旧值:{

{aOldVal}}

新值:{

{aNewVal}}

{        data: {            a: 1        },        watch: {            a: function (newVal, oldVal) {                //自动触发此方法                console.log('new: %s, old: %s', newVal, oldVal)            },        }        }

也可以把方法放到 data 对象中

{        data: {            a: 1,            changeA: function (newVal, oldVal) {                //自动触发此方法                console.log('new: %s, old: %s', newVal, oldVal)            }        },        watch: {            a: 'changeA'        }        }

watch 与 compute 区别:

  1. computed 创建新的属性, watch 监听 data 已有的属性
  2. compute 会产生依赖缓存
  3. 当 watch 监听 computed 时,watch 在这种情况下无效,仅会触发 computed.setter
{        computed: {            a: {                get: function(){                    return '';                },                set: function(newVal){                    //会触发此项                    console.log('set val %s', newVal);                }            }                         },        watch: {            a: function(){                //不会被触发                console.log('watch');            }        }        }

转载地址:http://bpumo.baihongyu.com/

你可能感兴趣的文章
没有这个黑客,就不会有你现在用的开源软件
查看>>
传统管理软件走在“生死边缘”,突围SaaS向死而生?
查看>>
这些数据科学技能,才是老板们最想要的
查看>>
大数据条件下政府信息化管理
查看>>
大数据+区块链将大有可为
查看>>
三大研究机构预测:6家公司吃掉80%云计算市场
查看>>
智能家居“吸金”新方式 家电或成救世主
查看>>
浙江电力使用RFID技术,有力保障电网运营
查看>>
呼叫中心管理之:让座席看见自己
查看>>
运营商全渠道建设的终极形态
查看>>
Java核心类库:内部类那点事儿
查看>>
《SAP入门经典(第5版)》——2.5 小结
查看>>
《软件建模与设计: UML、用例、模式和软件体系结构》一一1.8 软件建模和设计方法的发展...
查看>>
web 应用通用数据访问层 Fetchr
查看>>
《vSphere性能设计:性能密集场景下CPU、内存、存储及网络的最佳设计实践》一1.2 建立基准...
查看>>
绕过 Windows 10 Cloud 限制 成功运行 Win32 应用程序
查看>>
Alamofire —— Swift 的 HTTP 客户端开发包
查看>>
《程序员的呐喊》一一1.13 弱类型机制够不够强
查看>>
Windows 10 Redstone 终将引入交互式动态瓷贴
查看>>
《机器人与数字人:基于MATLAB的建模与控制》——3.1节平移和旋转
查看>>