2017/9/1 VUE学习

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

二.声明式渲染

1.  

{{message}}

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

现在看见我啦

var app=new Vue({

el:'#app',

data:{ seen:true }

})

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

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

1. { { todo.text } }

var app=new Vue({

el:'#app',

data:{ todos:[

{text:'学习JavaScript'},

{text:'学习VUE'},

{text:整个牛项目}

] }

})

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

四. 处理用户输入

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

{{message}}

逆转消息

var app=new Vue({

el:'#app',

data:{ message:'Hellow VUE' },

methods:{

reverseMessage:function(){

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

}

}

})

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

{{message}}

 

var app=new Vue({

el:'#app',

data:{message:'Hellow VUE'}

})

五. 组件化应用构建

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

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

1. 在VUE中注册组件

Vue.component('todo-item', {

template: '

这是一个待办项

'

})

html: 

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

 

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

实例:

 

Vue.component('todo-item', {

props:['todo'],

template:'

{{todo.text}}

'

})

new Vue({

el:'#app',

data:{

items:[

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

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

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

]

}

})