2017/9/1 VUE学习

一.vue的核心库只关注视图层,易于与第三方库或既有项目整合

二.声明式渲染

1.   <div id="app">

{{message}}

</div>

var app=new Vue({

    el:'#app',

    data:{

         message:'hellow  Vue'

    }

})

2. 绑定DOM元素属性

v-bind:title="message"   (v-bind指令,改变DOM节点的title属性,将title属性与实力Vue的message属性绑定,在浏览器的控制台中输入app.message改变message值)

三. 条件与循环

1.控制元素的现实v-if

<div id="app"> <p v-if="seen">现在看见我啦</p> </div>

var app=new Vue({

el:'#app',

data:{ seen:true }

})

在控制台输入app.seen=false,DOM元素内的字体不显示

2. v-for    用来绑定数组的数据来渲染一个项目列表

<div id="app"> <ol> <li v-for="todo in todos"> { { todo.text } } </ol> </div>

var app=new Vue({

el:'#app',

data:{ todos:[

{text:'学习JavaScript'},

{text:'学习VUE'},

{text:整个牛项目}

] }

})

在控制台输入app.todos.push ( { text:'新项目' } )

四. 处理用户输入

1. 使用v-on 指令绑定一个监听器,通过调用VUE实例中定义的方法,实现用户和你的应用活动

<div> <p>{{message}}</p> <button v-on:click="reverseMessage">逆转消息</button> </div>

var app=new Vue({

el:'#app',

data:{ message:'Hellow VUE' },

methods:{

reverseMessage:function(){

this.message=this.message.split('').reverse().join('')

}

}

})

2. v-model 指令能实现表单输入和应用状态(VUE实例中的数据)之间的双向绑定

<div id="app"> <p> {{message}} </p>  <input  type="text"  v-model="message"/></div>

var app=new Vue({

el:'#app',

data:{message:'Hellow VUE'}

})

五. 组件化应用构建

使用小型,独立,和通常可复用的组件构建大型应用

//  一个组件本质上是一个拥有预定义选项的VUE实例

1. 在VUE中注册组件

Vue.component('todo-item', {

template: '<li>这是一个待办项</li>'

})

html:  <ol>

 //创建todo-item组件的实例

<todo-item></todo-item>

 </ol>

该方法为全局注册组件,需要在VUE实例化之前使用

实例:

<div id="app"> 

<ol>

<todo-item v-for="item in items"  v-bind:todo="item" v-bind:key="item.id"> </todo-item></div>

</ol>

</div>

Vue.component('todo-item', {

props:['todo'],

template:'<li>{{todo.text}}</li>'

})

new Vue({

el:'#app',

data:{

items:[

{id:0, text:'蔬菜'},

{id:1, text:'奶酪'},

{id:2, text:'水果'},

]

}

})