当我们使用Vue框架的时候,会用到el关联html元素与vue实例对象,data作为数据源。在本节我们会介绍el与data的两种用法。
el用法1
el在vue实例中提供el作为key, el的元素定位作为value.如下,vue实例会找到html的id = root的元素,并于vue关联。
data用法1
data作为vue的数据源,第一种用法是对象式,也作为key - value的形式放在data内容。
el与data的一种用法代码如下:
const v = new Vue({
el:"#root",
data: {
name: "大力pig"
}
})
el用法2
提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器,也可以是一个 HTMLElement 实例。
在实例挂载之后,元素可以用 vm.$el
访问。
如果在实例化时存在这个选项,实例将立即进入编译过程,否则,需要显式调用 vm.$mount()
手动开启编译。
v.$mount('#root') //第二种写法
data用法2
函数式用法
-
Vue 实例的数据对象。Vue 会递归地把 data 的 property 转换为 getter/setter,从而让 data 的 property 能够响应数据变化。对象必须是纯粹的对象 (含有零个或多个的 key/value 对):浏览器 API 创建的原生对象,原型上的 property 会被忽略。大概来说,data 应该只能是数据 - 不推荐观察拥有状态行为的对象。
当一个组件被定义,
data
必须声明为返回一个初始数据对象的函数,因为组件可能被用来创建多个实例。如果data
仍然是一个纯粹的对象,则所有的实例将共享引用同一个数据对象!通过提供data
函数,每次创建一个新实例后,我们能够调用data
函数,从而返回初始数据的一个全新副本数据对象。
代码展示
const v = new Vue({
data:function (){ //函数式用法
return{
name:'大力pig'
}
}
})
v.$mount('#root') //第二种写法
总结:
el两种写法. 1. 创建vue时候配置el属性。2.先创建vue实例,后通过vm.$mount(’#root')指定el的值。
data两种写法. 1. 对象式. 2. 函数式.
注意事项,由Vue管理的函数,不要写箭头函数,创建箭头函数之后,this就不是vue实例。