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:'水果'},
]
}
})
