基础配置
绞手架下载安装
npm install -g @vue/cli
vue-element-admin 下载安装
# 克隆项目 git clone https://github.com/PanJiaChen/vue-element-admin.git # 进入项目目录 cd vue-element-admin # 安装依赖 npm install # 建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题 npm install --registry=https://registry.npm.taobao.org # 本地开发 启动项目 npm run dev
vue-element-template 下载安装
# 克隆项目 git clone https://github.com/PanJiaChen/vue-admin-template.git # 进入项目目录 cd vue-admin-template # 安装依赖 npm install # 建议不要直接使用 cnpm 安装以来，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题 npm install --registry=https://registry.npm.taobao.org # 启动服务 npm run dev
知识点
v-bind :
使用 v-bind 可以快速将 数据绑定到某个组件的属性上
比如：
<img class="image" />
绑定数据
1. 绑定文本
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值
<span>Message: {{ msg }}</span>
Mustache 标签将会被替代为对应数据对象上 `msg` 属性的值。无论何时，绑定的数据对象上 `msg`属性发生了改变，插值处的内容都会更新。
2.绑定html
双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 `v-html`指令：
<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span></span></p>
Mustache 语法不能作用在 HTML 特性上，遇到这种情况应该使用 [v-bind 指令](https://cn.vuejs.org/v2/api/#v-bind)：
参照 v-bind
缩写
1. v-bind 缩写
<!-- 完整语法 --> <a>...</a> <!-- 缩写 --> <a>...</a>
2. v-on 缩写
<!-- 完整语法 --> <a>...</a> <!-- 缩写 --> <a>...</a>
条件渲染
v-if` 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
<h1>Vue is awesome!</h1> <h1>Oh no ?</h1>
列表渲染
我们可以用 `v-for` 指令基于一个数组来渲染一个列表。`v-for` 指令需要使用 `item in items` 形式的特殊语法，其中 `items` 是源数据数组，而 `item` 则是被迭代的数组元素的**别名**。
<ul id="example-1">
<li>
{{ item.message }}
</li>
</ul>
在 `v-for` 块中，我们可以访问所有父作用域的属性。`v-for` 还支持一个可选的第二个参数，即当前项的索引。
<ul id="example-2">
<li>
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
</ul>
表单输入绑定
你可以用 `v-model` 指令在表单 、textarea及 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 `v-model` 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
<label for="checkbox">{{ checked }}</label>
组件基础
组件是可复用的 Vue 实例，且带有一个名字。
**一个组件的 data 选项必须是一个函数**，因此每个实例可以维护一份被返回对象的独立的拷贝：
data: function () {
return {
count: 0
}
}
Prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候，它就变成了那个组件实例的一个属性。
