浅了——vue

一楠吖
101 阅读8分钟

vue

一 、vue 是什么？

vue是一个构建用户界面的（UI） 的js 库

是一个构建数据驱动的渐进式框架，vue.js的目标是通过尽可能的简单的API实现响应的数据绑定和组合的视图组件。基于MVVM （Model View ViewModel ) 设计的模式书写。

vue 只关注视图层，可以快速的创建用户界面。

vue的目标是通过尽可能的简单的API 实现响应的数据绑定和组合的视组件。

二、Vue 的特点

体积小

gzip 压缩之后20k,并且不依赖其他基础库。

更高的运行效率

基于虚拟的dom ，一种可以预先通过js (在内存中)进行各种运算，把最终的dom 操作计算出来，并优化的技术，由于这种对dom操作的预处理操作，并没有真的是操作dom,所以叫做虚拟dom.

数据的双向绑定

让开发者不用再去操作dom 对象，把更多的精力投入到业务逻辑上。

生态丰富、学习成本本

市场上拥有大量常熟、稳定的基于vue.js 的UI 框架、常用组件！ 拿来即用。快速开发

vue的优点：

渐进式的框架、轻量级。数据的双向绑定，指令系统v-xx,组件化系统，单页面应用。操作虚拟的dom 节点。

三、vue 项目的环境搭建

vue是一个JavaScript 框架，是一个以JavaScript 编写的库。

vue是一个JavaScript 文件形式发布的，可以通过script 标签添加到网页中。

3.1 CDN 引入

<script src="https://cdn.bootcss.com/vue/2.3.3/vue.js"></script>

CDN 全称是content delivery network ，即内容分发网络，CDN 的通俗的理解就是网站加速，可以让客户端快速访问资源。

3.2 使用vue 官方脚手架（vue-cli)

vue-cli 是一个基于vue.js 进行的快速开发的完整系统，是一个官方的脚手架。可以帮助我们快速创建vue 项目目录。

分为：
1、生产环境，项目开发结束，部署上线阶段
2、开发坏境，项目属于开发阶段

安装过程：
下载脚手架
yarn  add vue-cli -g

查看vue-cli 的版本
vue -V

创建项目
vue init webpack 项目名 或者 vue creade 项目名称

接下来就是选项了。废话不多说，你可以根据你需要的选项进行选择。有一个口诀可以分享给你们。
前面4个enter，后面4个N,最后一个enter

建立好项目之后，cd  项目名称。 进入项目
让你的项目跑起来：
yarn  start  或者 npm run dev  / yarn  serve (具体的可以看你的package.json)

如果是想要运行完了之后自动打开网页： 需要找到你的根目录下的config.js 文件

image.png

四、正式进入vue项目：

4.1vue项目-目录文件说明：

image.png

4.2文件目录说明:

1.main.js 是我们的入口文件，也初始化了vue的实例对象，并且也是对所需要的的插件的引用。

image.png

2.app.vue 是我们的根组件，所有页面都是app.vue 下面切换的，可以理解为所有的组件都是app.vue 的子组件，可以把头部底部每个页面都出现的文件都放在app.vue 里面，以及在里面写公用的css代码。

image.png

3、index.html 文件入口，内容简单

image.png

4.package.json 主要存放的项目依赖的目录，dependencies 为生产依赖，devDependencies 为开发依赖。

image.png

5、node_modules 为依赖的模块，文件较大，项目管理（git，svn) 提交的时候记得忽略此项。

image.png

6.config - index.js 文件，项目的配置（全局变量js文件），是默认的配置，没有问题，基本上就不用去改。根据需要，更改。

image.png

接下来，我们就进入文件的目录：

image.png

注意：所有的是vue的文件，后缀名都是**.vue** ,快速搭建基本结构 vbase,自行选择：vbase-less，vbase-scss等等

4.3插件说明：

1、使用less步骤：
安装
 yarn  add  less@3.10.3 --save
 yarn  add  less-loader@5.0.0 --save
 备注：担心node版本过高用不起less ，我是特意下载了对应的版本，大家根据自己的情况，可以不指定版本
 
 备注：
 -S　即--save（保存）
 包名会被注册在package.json的dependencies里面，在生产环境下这个包的依赖依然存在。
 -D,即dev（生产）
 包名会被注册在package.json的devDependencies里面，仅在开发环境下存在的包用-D，如less、sass-loader这些解析器
 
 区别：
  -S 是--save 的简写， -D 是 --save-dev 
 devDependencies 中的插件只用于开发坏境，不用于生产坏境，而dependencies是需要发布到生产坏境中，像babel、webpack这些压缩代码、打包的工具，在实际运行中不需要，所以用-D；想elementui、echarts这些插件在实际运行中也是需要的，所以用-S。
　
　如果是你的less 安装了还运行不了，那就看一下，你安装的版本了。
　
　卸载less 
　yarn remove less-loader
　yarn remove les45s

可以安装两个插件，有助于我们快速开发

image.png

五、基础知识点

1、组件

1.1什么是组件？

所谓的组件，就是封装起来的具有独立功能的UI部件。

整个UI 框架是一个通过小组件构成的大组件，每个组件职位关心自己部分应该有的逻辑。彼此是独立的。

组件的特点：可复用、可组合、易维护。

1.2单文件组件

一个xx.vue 文件就是一个单文件组件，功能逻辑独立，由template、 script 、 style 三部分组成的。

<template>
    <div>
     HTML：这里是写HTML基本结构的，注意有且仅有一个根节点
    </div>
</template>
<script>
这里是写js逻辑的，默认暴露出去的是一个dom 节点
export default {}
</script>

<style lang="less" scoped>
这里写的是css 样式
</style>

注意：

style 标签可以通过lang="scss" 选择预处理语言，需要安装对应的loader模块。

style标签上可以通过scoped 让样式私有化

template有且仅有一个根节点 。原因是原生js 只可以创建父子节点，不可以创建子节点

1.3 自定义组件

​ 1、引入组件（引入一个你需要用的组件，已经写好的xx.vue）

​ 2、注册组件(需要再components 上面去注册)

​ 3、使用组件（注册叫什么名字，你就当做标签名使用就完事）

<template>
  <div>
    <!-- 使用组件 -->
    <Hollw :message="val1"></Hollw>
  </div>
</template>
<script>
import Hollw from "./components/Hello.vue";// 引入组件
export default {
  components: {
    Hollw,//注册组件
  },
};
</script>
<style lang="less" scoped>
</style>

2、Mustach 表达式和配置选项

2.1 data 配置选项 和Mustach 模板语法

目前的template 模板中数据是写死的，如何渲染动态的数据呢，这个时候就需要data配置选项和mastach 表达式了。

1、mustach 表达式
语法：{{表达式}}
2、配置选项：
el : 挂载dom
data： 准备数据，必须是函数，每次返回的是一个新的对象。
methods:{} 方法（） 函数
components:{"标签名"：引入的组件的变量名}

3、vue 提供了哪些指令？

3.1 什么是指令：

指令是写在标签上一种自定义的属性，主要是把vue 实例中的数据，输出到html 中（vue 实例对象和html 关联）

<标签 id=”” class=”” V-*=”xxx”></标签>  // “ V-“ 开头的就是指令
3.2 常用指令
v-text 和 v-html
指 令作用说明
v-text 和 v-html页面动态数据的回显，常见的v-text 直接使用“{{表达式}}”替代，v-html 显示富文本数据。v-text 不能识别html 标签，v-html可以解析html
v-show和v-if控制页面内容的显示和隐藏，常见的v-show 显示或者隐藏切换频繁，v-if 显示v-show 是通过控制display来显示和隐藏，而v-if 是操作dom节点。如果频繁的切换显示和隐藏就用v-show,使用v-if 性能低。绑定数据发生改变时，v-if 会重新渲染页面，而v-show不会。
v-if 和v-else-if 和 v-else用于页面结构中的逻辑判断。配合使用，逻辑和js 中的条件判断语句一致，会从上往下，找到满足条件的第一个表达式，渲染该dom 。指令元素之间必须要紧密相间
v-for循环数组和对象循环数组：v-for=”(元素的值， 元素的索引) in 数组”；循环对象： v-for=”(元素的值， 键名，元素的索引) in 对象”
v-mode只能使用表单。让表单和数据双向绑定。适用的标签：input（输入框 单选框 多选框 ） select textarea
v-onv-on:事件名="函数名（参数1，参数2）"简写：@事件名=“函数名”
4、事件对象：

在鼠标事件或者是其他事件函数中，具有事件对象的函数，传参事件，若有实参传入，且需要事件对象的话，需要加上$event 。参数一一对应即可。而不需要其他参数时，那就直接在定义函数的地方使用形参。这个形参就是事件对象。

例如：

image.png

5、v-model:

作用表单元数据的绑定：体现了架构的思想—mvvm ,数据双向绑定，1.数据层改变，视图层跟着改变，视图层改变，数据层也跟着改变.

6、修饰符
6.1事件修饰符：
.stop  阻止事件冒泡  
.prevent 阻止默认行为
.self 只在event.target 时当前自身时触发处理函数
.one 一次性事件绑定
6.2 键盘修饰符
.enter .up  .left  .down .right
6.3 表单修饰符
.lazy  不会实时数据绷定，在change事件中进行数据绑定.number  将输入的内容，转化为number数据类型.trim  过滤手尾空白的字符
7、 computed 计算属性

计算属性的本质是属性，这个属性是通过计算得到的，说明是要函数处理之后才能拿到的值。

image.png

备注：

页面第一次加载的时，该函数会默认执行（的第一次执行）。会给这个计算属性赋一个初始的值，依赖属性变化时，该函数会再次执行。

注意：
  1. 计算属性的值，一定是个函数，而且这个函数一定要有返回值。
  2. 计算属性处理的函数里面this的指向是当前vue 实例对象
  3. 页面第一次加载时，计算属性的函数会第一次执行，给这个属性赋一个初始值
  4. 计算属性可以直接在template 里面渲染，说明他也是当前实例对象的属性
  5. 依赖的属性发生变化的时候，计算属性的值函数会再次执行。
8、监听器 watch

作用：用来监听data里面的数据变化，一旦数据发生改变，就睡自动执行相关的函数。

分类：深监听和浅监听

浅监听：监听基本类型

深监听：监听引用数据类型

watch和computed 区别

watch：监听的data和computed 中数据的变化，可以进行异步操作

computed：定义属性，该属性是通过计算得到的，不可以进行异步操作，通过return 返回处理的数据

六、生命周期

1、概念

一个vue 实例生命的周期，也就是vue实例从开始到结束的过程，从创建到销毁的过程。

2、生命周期的阶段

2.1 创建阶段

beforecreate:创建之前的钩子函数

作用：一般不适用个，在做一些需要之前需要做的事情。

注意： 这里不可以操作data中的数据，因为data没有初始化

created ： 创建之后的钩子函数

作用：一般用于数据请求，开启定时器

2.2 挂载阶段

a.看看有没有 el 或者 $mount

b.把data 中的 数据和模板 翻译生成 虚拟的dom 节点（JS 对象）

beforemount ： 挂载之前

注意：在这个函数里面，页面没有真正的渲染出来，只是有了虚拟的dom 节点（js对象）

mounted ： 挂载之后

作用： 把虚拟的dom 真正的渲染到页面上，页面上有了真实的dom 从这里开始就可以使用$refs 获取dom 节点

初始化一些插件相关的配置，也可以发送数据请求

2.3 更新阶段

beforeupdata ： 更新之前

作用：做一些判断，是否要新

updata： 更新之后

2.4 销毁阶段

beforeDestroy:销毁之前

作用：销毁之前做一些操作

beforeDestroy : 销毁之后

作用：释放定时器相关的内容，销毁之后。事件绑定都不存在

avatar
文章
阅读
粉丝