阅读数:27 评论数:0

0. 安装

(1) Vue Devtools

在使用Vue时, 我们推荐在你的浏览器上安装Vue Devtools. 它允许你在一个更友好的界面中审查和调试Vue应用.

(2) 直接<script>引入

直接下载并用<script>标签引入, Vue会被注册为一个全局变量.

(3) npm

在用Vue构建大型应用时推荐使用npm安装, npm能很好的和诸如webpac或Browserify模块打包器配合使用.

(4) 命令行工具CLI

Vue提供一个官方的CLI, 为单页面应用快速搭建繁杂的脚手架.

https://cn.vuejs.org/v2/guide/#Vue-js-%E6%98%AF%E4%BB%80%E4%B9%88

1. 声明式渲染

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

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

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

现在数据和DOM已经建立了关联, 所有东西都是响应式的.

2. 条件与循环

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

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

vue也提供一个强大的过渡效果系统, 可以在Vue插入/更新/移除元素时自动应用过滤效果 .

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})

3. 处理用户输入

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

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

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指令, 它能轻松实现表单输入和应用状态之间的双向绑定.

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

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

4. 组件化应用构建

组件系统是Vue的另一个重要概念, 它允许我们使用小型, 独立和通常可复用的组件构建大型 应用.

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

/ 定义名为 todo-item 的新组件
Vue.component('todo-item', {
  template: '<li>这是个待办项</li>'
})

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