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(){

　　　　}

　　}

})