vue2浓缩的精华笔记,小白一看就会(上)

​1.vue 是什么?
快速构建UI的JS框架.2015年1.0, 2016年2.0(人数最多最经典,被阿里巴巴收购), 2020年3.0.

特点: 数据驱动(最小粒度更新) , 组件化开发(使用组件进行UI构建), 拥有指令(低代码做更多的事)
2. vue 项目搭建
2.1 安装脚手架( @vue/cli 和 node 版本有必然联系, 如果不对, 卸载重装 )
yarn global add @vue/cli

2.2 创建项目
vue create 项目名 (一般公司的guim xxxxxweb 移动端: xxxxapp)

2.3 运行项目
yarn serve || npm run serve (先cd到项目中)

但是重点来了 我推荐使用 vue ui 可视化来创建 vue2 项目!!! 巨好用

添加图片注释，不超过 140 字（可选）
先安装脚手架 再输入 vue ui 会自动在浏览器中打开一个创建项目页面

添加图片注释，不超过 140 字（可选）
然后进行创建(这里就不展开讲了,需要教程的留言,我会单独出一个教程)
组件开发
传统开发当项目过大后,会造成难以维护,最早 Facebook 公司提出了组件化开发模式(解决了传统开发的弊端)
组件化开发: 使用组件来构建用户视图.
组件: 封装起来具有独立功能的UI部件.
3.1 创建组件

3.2 使用组件

import XXX from ‘./组件路径’

export default {

components: {

新的自定义标签名: XXX组件

}

}

<新的自定义标签名/>

<新的自定义标签名><新的自定义标签名/>

4. 数据驱动
   把界面要变化的数据, 抽取到 vue 的 data 中.通过修改 data 数据, 让 vue 自动更新视图! 最小粒度更新, 只更新有变化的部分.
   4.1 具体实现 4.1.1 把数据装入到 data 中
   data(){

return {

a: 1

}

}

4.1.2 使用 Mustach 获取动态数据. Mustach 模板, 允许在结构部分使用{{ 表达式 }}, 获取 vue 的动态值(data.methods. computed…等)

{{ a }}

4.1.3 修改 data, vue 自动更新视图

this.a = 2 (methods. computed…等中修改data中的数据必须加上this. !!! )

5. 指令()

v-on: 绑定动态事件,简写@ 例: @click=“函数”

v-bind: 绑定动态属性,允许属性访问data等动态值,简写:  例:  <p :title="xxx" />

v-for: 根据动态数据循环创建DOM元素, 循环次数为数组的长度.  key是区分元素的唯一性, 不能重复, 给vue使用的.

index 可能会重复,注意一下

  item: 每次循环的数据

  index: 索引

  {{ item }}

 </div>

v-model: 表单数据(value值)双向绑定. 当value发生变化, 改变data对应的值. 反之亦然

v-show: 显示/隐藏元素

v-if: 增加/删除DOM

v-text: 相当于innerText, 插入纯文本到元素中

v-html: 相当于innerHTML, 插入一些内容到元素中, 能解析标记

6. 动态 style, 动态 class (都通常使用动态切换颜色使用)

   动态 style 采用对象的形式进行

   :style="{ key样式名称: value样式的值 }"
   
   例: <p :style="{color: 'red', fontWeight: data中的数据}">
   

   动态 class 采用对象

   :class="{ key类名: value是否挂载(true | false) }"
   
   例: <p :class="{ cls1: true , cls2: data中的数据 }">