登录
    Technology changes quickly but people's minds change slowly.

VUE 阶段学习总结

技术宅 破玉 881次浏览 0个评论

基础配置

绞手架下载安装

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 特性的时候,它就变成了那个组件实例的一个属性。


华裳绕指柔, 版权所有丨如未注明 , 均为原创|转载请注明VUE 阶段学习总结
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址