如何正确使用Vue.js的组件

JavaScript023

如何正确使用Vue.js的组件,第1张

v-model 指令在表单控件元素上创建双向数据绑定。根据控件类型它自动选取正确的方法更新元素。

比如，多个勾选框，绑定到同一个数组：

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">

<label for="jack">Jack</label>

<input type="checkbox" id="john" value="John" v-model="checkedNames">

<label for="john">John</label>

<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">

<label for="mike">Mike</label>

<br>

<span>Checked names: {{ checkedNames | json }}</span>

new Vue({

el: '...',

data: {

checkedNames: []

}

})

这样用，要使用 Vue，我们可以直接在 Vue.js 的官网直接下载 vue.min.js 文件，然后在 HTML 页面中通过

或者也可以不下载 vue.min.js 文件，直接引入 Vue 文件地址，例如：

使用前(在运行时)要确保 Vue 文件已经加载完成再然后进行其他操作(代码加载的顺序是很重要的)。