Vue.js 基础语法

Vue.js 基础语法

• Vue 实例

• 基础选项

• 指令

• 其他选项Vue 实例Vue 实例

• Vue 实例是通过 Vue 函数创建的对象，是使用 Vue 功能的基础

 

el 选项el 选项

• 用于选取一个 DOM 元素作为 Vue 实例的挂载目标。

• 只有挂载元素内部才会被 Vue 进行处理，外部为普通 HTML 元素。

• 代表 MVVM 中的 View 层（视图）。el 选项

• 可以为 CSS 选择器格式的字符串 或 HTMLElement 实例，但不能

为 html 或 body。

 

 

el 选项

• 挂载完毕后，可以通过 vm.$el 进行访问。

 

el 选项

• 未设置 el 的 vue 实例，也可以通过 vm.$mount() 进行挂载，参

数形式与 el 规则相同

 

插值表达式

• 挂载元素可以使用 Vue.js 的模板语法，模板中可以通过插值表

达式为元素进行动态内容设置，写法为 {{ }}。

注意点：

• 插值表达式只能书写在标签内容区域，可以与其它内容混合。

• 内部只能书写 JavaScript 表达式，不能书写语句

 

data 选项

• 用于存储 Vue 实例需要使用的数据，值为对象类型。

data 中的数据可以通过 vm.$data.数据 或 vm.数据 访问。

 

 

data 中的数据可以直接在视图中通过插值表达式访问。

• data 中的数据为响应式数据，在发生改变时，视图会自动更新。

 

data 选项

• data 中存在数组时，索引操作与 length 操作无法自动更新视图，

这时可以借助 Vue.set() 方法替代操作。

methods 选项

• 用于存储需要在 Vue 实例中使用的函数。

 

 

 

methods 选项

• methods 中的方法可以通过 vm.方法名 访问。

• 方法中的 this 为 vm 实例，可以便捷的访问 vm 数据等功能。