vue.js学习（一）

（准备用vue.js写毕业设计，记录下学习的东西，之后可能会用到）
代码编译可以使用这个网站：https://jsfiddle.net

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

起步

通过如下方式引入vue

或者

声明式渲染

（文本插值）
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

{{message}}

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

修改app.message的值即可更新值
（绑定元素特性）

  
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  

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

v-bind 特性被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊特性。它们会在渲染的 DOM 上应用特殊的响应式行为。这里，该指令的意思是：“将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致”。

条件循环

（控制一个元素是否显示）

  
现在你看到我了

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

在控制台输入 app3.seen = false，之前显示的消息消失了。
不仅可以把数据绑定到 DOM 文本或特性，还可以绑定到 DOM 结构。此外，Vue 也提供一个强大的过渡效果系统，可以在 Vue 插入/更新/移除元素时自动应用[过渡效果]
还有其它很多指令，每个都有特殊的功能。（eg:v-for）

用户处理输入

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

  
{{ message }}
  逆转消息

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

Vue 还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。

  
{{ message }}
  

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

组件化应用构建

组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树。
在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。在 Vue 中注册组件很简单：

使用v-bind指令将待办项传到循环输出的每个组件中

Vue.component('todo-item', {
  props: ['todo'],
  template: '
{{ todo.text }}
'
})

var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { id: 0, text: '蔬菜' },
      { id: 1, text: '奶酪' },
      { id: 2, text: '随便其它什么人吃的东西' }
    ]
  }
})

我们已经设法将应用分割成了两个更小的单元。子单元通过 prop 接口与父单元进行了良好的解耦。我们现在可以进一步改进 组件，提供更为复杂的模板和逻辑，而不会影响到父单元。