Vue基础——简单语法和组件化应用

Vue.js是什么

Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自低向上逐层应用。

传统MVC模式：
View : 视图层，对应xml文件
Controller（Presenter）: 控制层，对应Activity和Fragment层，进行数据处理
Model ：实体层，负责获取实体数据

MVVM模式：
是Model-View-ViewModel-Model的简写，它本质上就是MVC的改进版

MVC模式面向DOM开发，MVVM模式面向数据开发

简单的语法

1.v-bind
v-bind特性被称为指令。

<span v-bind:title="message">信息</span>
这里的意思是，将这个元素节点的title特性和Vue实例中的message属性保持一致。

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

3.v-on
为了让用户和你的应用进行交互，我们可以用v-on指令添加一个事件监听器。

4.v-model
能实现表单输入和应用状态之间的双向绑定。

组件化应用的构建

组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。

1.创建全局组件

在 Vue 中注册组件：

//定义名为todo-item的新组件
Vue.component({
    template:'<li>信息</li>'
})

用它构建一个组件模板：

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

2.创建局部组件

或者我们从父作用域传到子组件，修改组件定义，使其能够接受一个prop：

Vue.component('todo-item', {
  // todo-item 组件现在接受一个"prop"，类似于一个自定义特性。
  // 这个 prop 名为 todo。
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

现在，我们将使用v-bind指令将信息循环输出每个组件中：

<div id="app">
  <ol>
    <!--
      现在我们为每个 todo-item 提供 todo 对象，todo 对象是变量，即其内容可以是动态的。
      我们也需要为每个组件提供一个“key”。
    -->
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id"
    ></todo-item>
  </ol>
</div>

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

var app = new Vue({
  el: '#app',
  data: {
    groceryList: [
      { id: 0, text: '蔬菜' },
      { id: 1, text: '奶酪' },
      { id: 2, text: '面包' }
    ]
  }
})

在一个大型应用中，有必要将整个应用程序划分为组件，以使开发更易管理。