VUE.js入门学习（1）-起步
1、hello world
<div id="app">{{content}}</div>
var app = new Vue({
el:\'#app\',
data:{
content:\'hello world\'
}
})
2、两秒后改变文字为“bye world”
setTimeout(function(){
app.$data.content=\'bye world\'
})
集中在数据的操作上面而不是在dom上。
3、基础语法 v-for、v-model、v-for、v-on
(1)<li v-for="(item,index) in list">{{item}}</li>
(2)v-on:click="" 简写 @:click=""
(3) v-model 数据的双向绑定 data中进行定义
4、组件化
（1）全局组建：
<todo-item></todo-item>
vue.component("TodoItem",{
template:"<li>todo item</li>"
})
(2)v-bind：content="item"
vue.component("TodoItem",{
props:[\'content\']
template:"<li>todo item</li>"
})
父级通过v-bind（简写 ：）绑定一个变量content把数据传给子模版。子模版用props进行接收。
（2）局部组建
var TodoItem = {
props:[\'contnet\'],
template:"<li>todo item</li>"
}
var app = new Vue({
el:"#root",
components:[TodoItem], //局部组建需要注册
data:{
}
methods:{
}
})
5、简单的组建间传值 子元素向父元素传值
子元素通过$emit定义一个"delete"向父元素传递，dom绑定一个事件@delete="fmethods"
<todo-item @delete="handleItemDelete" :content="item" :index="index" v-for="(item,index) in list"></todo-item>
var TodoItem = {
props:[\'contnet\',\'index\'],
template:"<li @click=\'handleItemClick\'>todo item</li>",
methods:{
handleItemClick:function(){
this.$emit("delete")
}
}
}
var app = new Vue({
el:"#root",
components:[TodoItem], //局部组建需要注册
data:{
}
methods:{
handleItemDelete:function(){
}
}
})