这篇文章专为新手准备，内容比较基础，大神请转弯
这篇文章参考自vue官方文档，由于文档内容较多，而本教程涉及内容不多，所以在此精简，长期学习的读者建议去官方文档

vue是一款渐进式JavaScript框架，支持组件化，可以使用vue-cli创建大型项目。

vue文件的大体结构

vue文件大多风为html和JavaScript两个部分，html部分被称为模板，JavaScript部分通常长这样：

1
2
3
4
5
6
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

或者这样：

1
2
3
4
5
6
7
8
export default {
  name: 'Home',
  components: {
    // HelloWorld
    ArticleList,
    Banner
  },
}

其中，第一个是普通的app（APP.vue），第二个是组件化。

vue的组件化

组件化指的是将项目的每个组件分在几个文件里面，可以起到提高项目可读性和方便修改项目的作用。后面的教程中会用实践的方式让大家明白如何使用组件化。
组件化

vue的模板语法

vue的模板不仅有和html一样的语法，还有特定的模板语法。

以下内容复制自vue官方文档
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。
在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。
如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量，你也可以不用模板，直接写渲染 (render) 函数，使用可选的 JSX 语法。

变量

vue中可以调用在JavaScript中定义的所有变量，语法像这样用大括号表示：

1
数据：{{ data }}

指令

指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。回顾我们在介绍中看到的例子：

1
<p v-if="seen">现在你看到我了</p>

这里，v-if 指令将根据表达式 seen 的值的真假来插入/移除

元素。

参数

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML attribute：

1
<a v-bind:href="url">...</a>

在这里 href 是参数，告知 v-bind 指令将该元素的 href attribute 与表达式 url 的值绑定。

另一个例子是 v-on 指令，它用于监听 DOM 事件：

1
<a v-on:click="doSomething">...</a>

在这里参数是监听的事件名。

缩写

  1. v-bind缩写：
    1
    2
    3
    4
    5
    <!-- 完整语法 -->
    <a v-bind:href="url">...</a>

    <!-- 缩写 -->
    <a :href="url">...</a>
  2. v-on缩写
    1
    2
    3
    4
    5
    <!-- 完整语法 -->
    <a v-on:click="doSomething">...</a>

    <!-- 缩写 -->
    <a @click="doSomething">...</a>

这样，大家就可以对基础概念语法有一定了解了。

有任何疑问欢迎加QQ群：Python学习交流 1140464262