Vue学习笔记(一)

背景

开始了Vue框架的学习，目前是根据官方文档进行学习，这里记录一下易记错的点。

指令(Directives)

Vue框架与微信小程序有一些相似的东西，减少了我对于新框架的陌生感。其中指令这一块语法易错，特此记录。指令时带有 v- 前缀的特殊特性。指令特性的值预期是 单个JavaScript表达式 （v-for 例外）。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。

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

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

参数

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

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

在这里 href 是参数，告知 v-bind 指令将该元素的 href 特性与表达式 url 的值绑定。
另一个例子时 v-on 指令，它用于监听DOM事件：

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

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

Vue框架的整体印象

目前看文档有了一点自己的理解，记录下来，便于后期学习。使用Vue框架构建页面应用时，可以理解为页面由多个组件构成的，整个页面就是一棵多级嵌套的组件树。

组件树

这里，换个角度想，如果使用原来的原生的语法写这样的页面。我会使用多个<div>进行嵌套。Vue是在<div>的基础上进行了一次封装+升级。

使用Vue组件的步骤

这里要记住，组件就是可以复用的Vue实例。这里的关键点有两处：

1. 是可复用。组件化的重要好处就是可以复用，在相似的场景可以重复使用同一个组件。这意味着组件是抽象化的东西，里面不会具体写入数据，而是使用数据的接口，类似于形参，这就叫prop。
2. 是实例，组件本质就是Vue的实例，这里暂时不展开。

然后就是使用组件的步骤，

1. 注册组件，使用组件之前，需要先进行注册。
2. 将组件写入HTML页面的适当位置。
3. 在使用组件的元素处，创建Vue实例，才能确保页面认识Vue组件。

$mount

在new 一个 Vue 实例的时候，我们是通过 给键el，赋值，从而实现挂载到某个DOM节点上的。除了这个挂在方法之外，还有一种手动挂载的方法，这种就用到了mount() 方法来挂载。（ vm.$mount("app") )

Vue绑定数据的语法

在View端，也就是HTML代码中，要进行数据的绑定，有两种写法，当位置是div等容器里面的时候，也就是绑定到DOM文本，使用Mustache语法，{{data}}

实例1

当位置处于div等标签本身的时候，即绑定到DOM特性，不用使用双括号。

实例2