Vue.js使用指南：从菜鸟到高手

2020-05-0714:50:07WEB前端开发Comments2,008 views字数 3856阅读模式

vue理论基础：

vue官方网站：https://cn.vuejs.org/v2/guide/文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18603.html

1.MVVM模式是什么？

Model:负责数据存储
View:负责页面展示
View Model:负责业务逻辑处理（比如Ajax请求等），对数据进行加工后交给视图展示
MVVM要解决的问题是将业务逻辑代码与视图代码进行完全分离，使各自的职责更加清晰，后期代码维护更加简单是一个MVVM的框架如图所示：
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18603.html

此时vue扮演modelview的功能。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18603.html

2.是什么？

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计
为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
渐进式框架：Progressive，说明的轻量，是指一个前端项目可以使用一两个特性也可以整个项目都用
。
自底向上逐层应用：作为渐进式框架要实现的目标就是方便项目增量开发。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18603.html

如何使用？

的使用
1）在html页面使用script引入的库即可使用。
2）使用Npm管理依赖，使用webpack打包工具对应用打包。
大型应用推荐此方案。
3）Vue-CLI脚手架文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18603.html

4.有哪些功能？

1）声明式渲染
的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。
比如：使用的插值表达式放在Dom的任意地方，差值表达式的值将被渲染在Dom中。
2）条件与循环
dom中可以使用提供的v-if、v-for等标签，方便对数据进行判断、循环。
3）双向数据绑定
Vue 提供v-model 指令，它可以轻松实现Dom元素和数据对象之间双向绑定，即修改Dom元素中的值自动修改绑
定的数据对象，修改数据对象的值自动修改Dom元素中的值。
4）处理用户输入
为了让用户和你的应用进行交互，我们可以用 v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的
方法
5）组件化应用构建
可以定义一个一个的组件，在vue页面中引用组件，这个功能非常适合构建大型应用。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18603.html

使用流程：

代码编写步骤：
1、定义html，引入
2、定义app div，此区域作为vue的接管区域
3、定义vue实例，接管app区域。
4、定义model（数据对象）
5、VM完成在app中展示数据文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18603.html

示例：对应上面的5个流程。
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18603.html

差值表达式文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18603.html

{{ number + 1 }} 数学运算支持文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18603.html

{{ ok ? ‘YES’ : ‘NO’ }} 三目运算符支持文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18603.html

这是语句，不是表达式 {{ var a = 1 }}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18603.html

流控制也不会生效{{ if (ok) { return message } }}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18603.html

Vue基本命令：

1、v-model：

在表单控件或者组件上创建双向绑定 2、v-model仅能在如下元素中使用：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18603.html

input
select
textarea
components（Vue中的组件）

如下图所示：表单控件和模型对象相互绑定，任意一个更改都会改变
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18603.html

2、v-text和v-html

解决插值表达式闪烁问题，使用
v-text可以将一个变量的值渲染到指定的元素中,它可以解决插值表达式闪烁的问题文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18603.html

v-text和v-html文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18603.html

("div1").innerHTML="<h1>Hello</h1>";
("div2").innerText="<h1>Hello</h1>";
innerHTML处理了转义的页面
innerTest原样输出，对应vue如下：
	<div v-text="message"></div>
	<div v-html="message"></div>

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18603.html

3、v-bind

1、作用：
    v‐bind可以将数据对象绑定在dom的任意属性中。
    v‐bind可以给dom对象绑定一个或多个特性，例如动态绑定style和class
  
  2、举例：
      <img v‐bind:src="imageSrc">   
      <div v‐bind:style="{ fontSize: size + 'px' }"></div>
         
  3、缩写形式
      <img :src="imageSrc">
      <div :style="{ fontSize: size + 'px' }"></div>

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18603.html

4、v-on

绑定一个按钮的单击事件，操作事件文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18603.html

V-on:监听dom事件 可以简写：@
	v-on:click绑定点击事件：
		@click使用methods：{functiion}
	v-on:keydown键盘事件
		() 键盘阻止事件默认行为
		 键盘按下的按键码
	v-on:mouseover 鼠标移动事件
		()阻止事件传播行为
vue的事件修饰符
	表单验证必须有一个明确的boolean类型返回值
	在应用验证方法时必须加上 return  方法名称
	比如提交事件：onsubmit=”return checkForm()”
		可以用@来表示上述问题
		也可以用.prevent=()vue提供事件修饰符来处理
Vue的按键修饰符：
	@”fun1”按下的是回车

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18603.html

5、v-if和v-for：

 v-for：	
	遍历数组：根据遍历的数字角标遍历
	遍历对象，对象中包含属性，使用key,value的方式进行取值
	遍历集合方式，集合是一个json字符串数组。
v-if,v-else
	满足展示v-if
	否则展示v-els

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18603.html

Vue的生命周期：

8个生命周期：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18603.html

创建前创建后
挂载前挂载后
更新前更新后
销毁前销毁后文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18603.html

3个阶段：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18603.html

初始化阶段，更新阶段，销毁阶段文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18603.html

常用的生命周期方法异步任务：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18603.html

beforeDestory(): 做收尾工作, 如: 清除定时器文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18603.html

Vue使用的一些插件：

vue-cli: vue 脚手架
vue-resource(axios): ajax 请求
vue-router: 路由
vuex: 状态管理
vue-lazyload: 图片懒加载
vue-scroller: 页面滑动相关
mint-ui: 基于 vue 的 UI 组件库(移动端)
element-ui: 基于 vue 的 UI 组件库(PC 端)

Vue核心：

1.计算属性与监视

什么是回调函数：1.你定义的，2.你没有调用，3.但是执行了
关于回调函数应该明白：1.什么时候调用，2.用来做什么
计算：computed:回调函数计算并返回当前函数的值
计算属性：get() ：需要读取当前属性值时，计算并返回当前属性值
Set(value):当属性值发生改变时调用，更新相关的属性数据。
监视：watch:配置监视文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18603.html

计算属性：
在computed属性对象中定义计算属性的方法
在页面中使用{{方法名}}来显示计算的结果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18603.html

监视属性:
通过通过vm对象的$watch()或watch配置来监视指定的属性
当属性变化时, 回调函数自动调用, 在函数内部进行计算文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18603.html

计算属性高级:
通过getter/setter实现对属性数据的显示和监视
计算属性存在缓存, 多次读取只执行一次getter计算文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18603.html

与style绑定

在应用界面中, 某个(些)元素的样式是变化的
class/style绑定就是专门用来实现动态样式效果的技术文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18603.html

class绑定:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18603.html

:class='xxx'
xxx是字符串
xxx是对象
xxx是数组

style绑定文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18603.html

:style="{ color: activeColor, fontSize: fontSize + 'px' }"
其中activeColor/fontSize是data属性

的过滤与动画

vue动画的理解
操作css的trasition或animation
vue会给目标元素添加/移除特定的class文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18603.html

基本过渡动画的编码
1). 在目标元素外包裹文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18603.html

<transition name="xxx">

2). 定义class样式文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18603.html

指定过渡样式: transition
	指定隐藏时的样式: opacity/其它
过渡的类名
	xxx-enter-active: 指定显示的transition
 	xxx-leave-active: 指定隐藏的transition
 	xxx-enter: 指定隐藏时的样式

过滤器

理解过滤器
功能: 对要显示的数据进行特定格式化后再显示
注意: 并没有改变原本的数据, 可是产生新的对应的数据文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18603.html

编码
1). 定义过滤器文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18603.html

(filterName, function(value[,arg1,arg2,...]){
  // 进行一定的数据处理
  return newValue
})

2). 使用过滤器文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18603.html

<div>{{myData | filterName}}</div>
<div>{{myData | filterName(arg)}}</div>

5…vue指令总结

常用内置指令

v:text : 更新元素的 textContent
v-html : 更新元素的 innerHTML
v-if : 如果为true, 当前标签才会输出到页面
v-else: 如果为false, 当前标签才会输出到页面
v-show : 通过控制display样式来控制显示/隐藏
v-for : 遍历数组/对象
v-on : 绑定事件监听, 一般简写为@
v-bind : 强制绑定解析表达式, 可以省略v-bind
v-model : 双向数据绑定
ref : 为某个元素注册一个唯一标识, vue对象通过$refs属性访问这个元素对象
v-cloak : 使用它防止闪现表达式, 与css配合: [v-cloak] { display: none }文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18603.html

自定义指令：

注册全局指令文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18603.html

('my-directive', function(el, binding){
 el.innerHTML = binding.value.toupperCase()
 })

注册局部指令文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18603.html

directives : {
'my-directive' : {
    bind (el, binding) {
      el.innerHTML = binding.value.toupperCase()
    }
 }
}

使用指令文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18603.html

v-my-directive='xxx'

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18603.html

Vue.js使用指南：从菜鸟到高手

vue理论基础：

1.MVVM模式是什么？

2.是什么？

如何使用？

4.有哪些功能？

使用流程：

Vue基本命令：

1、v-model：

2、v-text和v-html

3、v-bind

4、v-on

5、v-if和v-for：

Vue的生命周期：

Vue使用的一些插件：

Vue核心：

1.计算属性与监视

与style绑定

的过滤与动画

过滤器

5…vue指令总结

常用内置指令

自定义指令：

Tailwind CSS响应式Web设计全面掌握指南

全栈开发使用Node js（Express）、MYSQL进行CRUD

TypeScript项目搭配Axios封装后端接口调用

jQuery 4.0 测试版，体积小性能好不再支持 IE 10

JavaScript实现轮播图方法，代码简单

Next.Js 与 Tailwind 项目开发笔记

使用Vite创建Vue3项目并开发第一个组件

asyncio 中并发运行的多个任务要如何精确控制

Django RESTful项目中使用Swagger文档生成器

从零开始创建vite项目

Comment