Vue学习指南入门篇

介绍

Vue.js 是什么

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

尝试 Vue.js 最简单的方法是创建一个 .html 文件，然后通过如下方式引入 Vue：

<script src="https://cdn.jsdelivr.net/npm/vue">script>

vue安装给出了更多安装 Vue 的方式。请注意我不推荐新手直接使用 vue-cli，尤其是在你还不熟悉基于 Node.js 的构建工具时。（这个我自己前期踩过很多雷）

vue的简单应用：

1.1

声明式渲染

直接代码（）

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

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

结果：

Hello Vue

除了文本插值，我们还可以像这样来绑定元素特性：

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

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

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

条件与循环

控制切换一个元素是否显示也相当简单：

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

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

结果： 现在你看到我了

继续在控制台输入 app3.seen = false，你会发现之前显示的消息消失了。

还有其它很多指令，每个都有特殊的功能。例如，v-for 指令可以绑定数组的数据来渲染一个项目列表：

<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: '整个牛项目' } ] } })

结果：

处理用户输入

为了让用户和你的应用进行交互，我们可以用 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('')
    }
  }
})

结果：

这是简单的吸引入门，下面开始正式的入门