Vue 实例
Vue 实例是通过 Vue 函数创建的对象,是使用 Vue 功能的基础
var vm=new Vue({
//选项对象
})
el 选项
• 用于选取一个 DOM 元素作为 Vue 实例的挂载目标。
• 只有挂载元素内部才会被 Vue 进行处理,外部为普通 HTML 元素。
• 代表 MVVM 中的 View 层(视图)。
可以为 CSS 选择器格式的字符串 或 HTMLElement 实例,但不能 为 html 或 body
挂载完毕后,可以通过 vm.$el 进行访问
var vm = new Vue({
el:'#app'
})
console.log(vm.$el)
var app = document.querySelector('#app')
var vm = new Vue({
el:app
})
• 未设置 el 的 vue 实例,也可以通过 vm.$mount() 进行挂载,参 数形式与 el 规则相同。
插值表达式
• 挂载元素可以使用 Vue.js 的模板语法,模板中可以通过插值表 达式为元素进行动态内容设置,写法为 {{ }}。
• 注意点: • 插值表达式只能书写在标签内容区域,可以与其它内容混合。 • 内部只能书写 JavaScript 表达式,不能书写语句
data 选项
• 用于存储 Vue 实例需要使用的数据,值为对象类型
• data 中的数据可以通过 vm.$data.数据 或vm.数据 访问
• data 中的数据可以直接在视图中通过插值表达式访问。
• data 中的数据为响应式数据,在发生改变时,视图会自动更新。
• data 中存在数组时,索引操作与 length 操作无法自动更新视图, 这时可以借助 Vue.set() 方法替代操
methods 选项
• 用于存储需要在 Vue 实例中使用的函数
• methods 中的方法可以通过 vm.方法名 访问。
• 方法中的 this 为 vm 实例,可以便捷的访问 vm 数据等功能