vue.js 2.0 怎么初始化

JavaScript018

vue.js 2.0 怎么初始化,第1张

对于没有接触过es6和webpack的童鞋来说，不建议直接用官方的脚手架vue-cli构件项目。

先按文档顺序最少学习完组件那一章。直接在html文件中引入vue.js开始学习,了解vue的基础指令，和整个vue实例的基础架构。

vue的生命周期很重要，了解这点以后可以免去很多问题。

学完这些可以做一些练手的小项目，比如万年不变的todolist。

1.双向绑定可以绑定到同一个数组

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

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

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

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

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

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

<br>

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

这样可以不做任何处理，获得所有checked的checkbox。

2.可是如果需要初始化渲染，一部分checkbox被预选中，v-model需要绑定一个boolen值checked:

<tr v-for="item in list">

<td>

<input type="checkbox" :value="item.value" v-model="item.checked" />

</td>

</tr>

new Vue({

el: 'body',

data: {

list: [{checked:true,value:'a'},{checked:false,value:'b'}]

}

})

Vue.js（读音 /vjuː/, 类似于 view）是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。

另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。

vue将数据绑定到组件的原理如下：

1、当实例化一个Vue构造函数，会执行 Vue 的 init 方法，在 init 方法中主要执行三部分内容，一是初始化环境变量，而是处理 Vue 组件数据，三是解析挂载组件。