vue 学习

一.声明式渲染：

文本插值

vue.js的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进DOM系统：

<div id="app"> {{ message }} </div>

var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } })

这跟渲染一个字符串模板非常类似，但是vue在后面做了大量的工作。数据和DOM已经建立了关联，所有的东西都是响应式。

二.绑定元素特性

指令：指令带有前缀v-，以表示他们是vue提供的特殊特性，它们会在渲染的DOM上应用特殊的响应式行为

<div id="app-2"> <span v-bind:title="message"> 鼠标悬停几秒钟查看此处动态绑定的提示信息！ </span> </div>

var app2 = new Vue({ el: '#app-2', data: { message: '页面加载于 ' + new Date().toLocaleString() } })

v-bind：title=“message”

将这个元素节点的title特性和vue实例的message属性保持一致

三.条件与循环

控制切换一个元素是否显示也非常简单

<div id="app-3">
  <p v-if="seen">现在你看到我了</p>
</div>

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

不仅可以把数据绑定到DOM文本或特性，还可以 绑定到DOM结构

四.v-for指令

v-for指令可以绑定数组的数据来渲染一个项目列表

五.处理用户输入

为了让用户和你的应用进行交互，可以用v-on指令添加一个事件监听器，通过它调用在vue实例当中定义的方法

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

 var app5=new Vue({
        el:'#app5',
        data:{
            message:'Hello Vue.js!'
        },
        methods:{
            reverseMessage:function(){
                this.message=this.message.split('').reverse().join('');
            }
        }
    });

六.vue还提供了V-model命令，它能够轻松实现表单输入和应用状态之间的双向数据绑定

  <div id="app6">
        <p>{{message}}</p>
        <input v-model="message">
    </div>

var app6=new Vue({
   el:'#app6',
   data:{
       message:'你好'
   }
});

七.组件化应用构建

组件系统是vue的一个重要概念，因为它是一种抽象的，允许我们使用小型，独立，可复用的组件构建大型应用，任意类型的应用界面都

可以抽象为一个组件树。

在vue里一个组件本质上是拥有一个预定义选项的一个vue实例

在vue中注册组件很简单：

// 定义名为 todo-item 的新组件

Vue.component('todo-item',{

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

})

现在可以用它构建另一个组件模板：

<ol>

 <!-- 创建一个 todo-item 组件的实例 -->

	<todo-item></todo-item>

</ol>