Vue框架

最新推荐文章于 2024-04-15 19:56:50 发布

m0_67402026

最新推荐文章于 2024-04-15 19:56:50 发布

阅读量2.5k

点赞数 2

分类专栏：前端 html 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_67402026/article/details/123304610

版权

1. Vue 的基本认识
- 1.1. 官网
- 1.2. 介绍描述
- 1.3. Vue 的特点
- 1.4. 与其它前端 JS 框架的关联
- 1.5. Vue 扩展插件
2 Vue 的基本使用
- 2.1开发者工具调试Vue.js devtools_3.1.2_0
- 2.2 框架使用方式
- 2.3 框架使用
- 2.4 Vue数据单向传递
- 2.5 Vue数据双向绑定
3 常见指令
- 3.1 什么是指令
- 3.2 vue数据绑定的特点
4 计算属性
- 4.1 定义计算属性
- 4.2 计算属性和函数的区别
5 过滤器
- 5.1 自定义全局过滤器
- 5.2 定义局部过滤器
- - 应用场景：格式化时间
6 过渡动画
- 6.1 如何给Vue控制的元素添加过渡动画
- 6.2 过渡动画结合钩子函数
- 6.3 Velocity实现动画
- 6.4 Animate自定义实现动画
- 6.5 列表动画
7 组件
- 7.1 自定义全局组件
- 7.2 自定义局部组件
- - 全局组件和局部组件的区别：
  - 自定义一个局部组件
- 7.3 组件中的data和methods
- 7.4 组件切换
- 7.5 动态组件
- 7.6 组件动画
- 7.7 父子组件
- 7.8 组件命名注意点
- 7.9 多级传递
- 7.10 插槽
- 7.11 组件渲染方式
8 Vuex
- 8.1 使用步骤
- 8.2 getters 计算属性
- 8.3 Router切换组件
- watch属性
9 Vue生命周期方法
- 9.1 什么是生命周期方法？
- 9.2 Vue生命周期方法分类
10 特殊特性
- 10.1 vue特殊特性
- 10.2 ref使用
11 Vue-CLI
- 11.1基本使用
- 11.2 安装和使用Vue-cli
- - 手动配置
- 11.3 项目结构

1. Vue 的基本认识

1.1. 官网

英文官网: https://vuejs.org/
中文官网: https://cn.vuejs.org/

1.2. 介绍描述

渐进式 JavaScript 框架
作者: 尤雨溪(一位华裔前 Google 工程师)
作用: 动态构建用户界面

1.3. Vue 的特点

遵循 MVVM 模式
编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发
它本身只关注 UI, 可以轻松引入 vue 插件或其它第三库开发项目

1.4. 与其它前端 JS 框架的关联

借鉴 angular 的模板和数据绑定技术
借鉴 react 的组件化和虚拟 DOM 技术

1.5. Vue 扩展插件

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

2 Vue 的基本使用

2.1开发者工具调试Vue.js devtools_3.1.2_0

1）Vue.js devtools_3.1.2_0.crx改成rar格式

2）解压

3）谷歌浏览器

4）再次打开浏览器

5）F12

2.2 框架使用方式

传统下载导入使用
vue-cli安装导入使用

2.3 框架使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">{
  {name}}</div>
		
		<script type="text/javascript">
//			创建一个Vue实例
			let vue=new Vue({
//				Vue实例对象,将来需要控制界面上的哪个区域
				el:"#app",
//				告诉vue的实例对象,被控制区域的数据是什么
				data:{
					name:"我是vue"
				},
			})
		</script>
	</body>
</html>

2.4 Vue数据单向传递

2.4.1 MVVM模型

M：model 数据模型（保存数据，处理数据业务逻辑）

V：view 视图（展示数据，与用户交互）

VM：View Model 数据模型和视图的桥梁

MVVM设计模式最大的特点就是支持数据的双向传递

数据可以从M --> VM --> V

也可以从 V --> VM --> M

2.4.2 Vue中的MVVM的划分

被控制的区域:

view

Vue实例对象:

view model

实例对象中的data:

model

2.4.3 Vue中数据的单向传递

“数据”交给“Vue实例对象”，Vue实例对象将数据交给“页面”

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
	<body>
		<!--MVVM模型中的view-->
		<div id="app">{
  {name}}</div>
		
		<script type="text/javascript">
//			MVVM模型中的view model
			let vue=new Vue({
				el:"#app",
//				MVVM模型中model
				data:{
					name:"我是vue"
				},
			})
		</script>
	</body>
</html>

2.5 Vue数据双向绑定

默认情况下是单向传递的

由于Vue基于MVVM设计模式，所以可以提供双向传递的能力

在< input> < textarea> < select>元素上可以用v-model指令创建双向绑定数据（只有上面三个标签可以使用v-model）

注意：v-model会忽略所有表单元素的 value checked selected特性的初始值，而总是将Vue实例的数据作为数据来源

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
	<body>
		
		<div id="app">
			<input type="text" v-model="msg"/>
		</div>
		
		<script type="text/javascript">
			let vue=new Vue({
				el:"#app",
				data:{
					msg:"我是vue"
				}
			})
		</script>
	</body>
</html>

3 常见指令

3.1 什么是指令

指令就是vue内部提供的一些自定义属性

这些属性中封装好了vue内部实现的一些功能

3.2 vue数据绑定的特点

只要数据发生变化，界面就会跟着变化

v-once指令

让界面不要跟着数据变化，只渲染一次

v-cloak指令

数据渲染之后自动显示元素

vue数据绑定过程

先将未绑定的数据的界面展示给用户
然后再根据模型中的数据和控制的区域生成绑定数据之后的html代码
最后在将绑定数据之后的html渲染到界面上

正是在最终的html被生成渲染之前会显示模板内容

所以如果用户网络比较慢或者网络性能比较差，那么用户会看到模板内容

解决：

利用[v-cloak] {display:none}默认先隐藏为渲染的界面，等到生成html渲染后在重新显示

v-text指令

相当于innerText

会覆盖原有内容，且不会解析html

v-html指令

相当于innerHTML

会覆盖原有内容，会解析html

注意：（插值方式：{ {}}不会解析HTML，和v-text一样）

v-if指令

条件渲染，取值为true就渲染元素

为false时，不会创建这个元素

取值可以从模型中获取数据

取值可以直接赋值一个表达式

可以配合if-else使用

单分支：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<p v-if="age>18">成年人</p>
			<p v-else >未成年</p>
		</div>
		
		<script type="text/javascript">
			let vue=new Vue({
				el:"#app",
				data:{
					age:20
				}
			})
		</script>
	</body>
</html>

多分支：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<p v-if="type===a">90+</p>
			<p v-else-if="type===b">80+</p>
			<p v-else-if="type===c">70+</p>
			<p v-else="type===d">70以下</p>
		</div>
		
		<script type="text/javascript">
			let vue=new Vue({
				el:"#app",
				data:{
					type:30
				}
			})
		</script>
	</body>
</html>

注意：v-else不能单独出现；v-if和v-else结合之后其中间的不能插入其他内容

v-show指令

和v-if类似，取值为真时显示

取值可以是条件表达式

取值为假时，还是会创建该元素，只是display: ”none”;

操作的是该元素display属性

注意：频繁操作切换元素的时候用v-show,否则用v-if

v-for指令

相当于JS中的for in循环，可以根据数据多次渲染元素

可以遍历数组、字符、数字、对象

（value,index）

v-for注意点

1 就地复用原则

渲染元素的时候会先看缓存中有无需要渲染的元素：

没有——创建放到缓存

有——直接复用

2 Vue中数据发生改变，就会重新渲染

因此在元素之前插入的时候，就会发生异常

解决方法——v-bind绑定一个唯一的key

注意：key不要用index去作为值

数组：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">

			<ul>
				<li v-for="(value,index) in list">{
  {index}}---{
  {value}}</li>
			</ul>
		</div>
		
		<script type="text/javascript">
			let vue=new Vue({
				el:"#app",
				data:{
					list:["1","2","3","4"]
				}
			})
		</script>
	</body>
</html>

字符串：

<ul>
	<li v-for="(value,index) in 'abcdef'">{
  {index}}---{
  {value}}</li>
</ul>

数字：

<ul>
	<li v-for="(value,index) in 7">{
  {index}}---{
  {value}}</li>
</ul>

对象

<div id="app">
	<ul>
        <li v-for="(value,key) in obj">{
  {key}}---{
  {value}}</li>
    </ul>
</div>
		
<script type="text/javascript">
	let vue=new Vue({
		el:"#app",
		data:{
			obj:{
				name:"张三",
				age:80
			}
		}
	})
</script>

v-bind指令

专门用于给元素的属性绑定数据（即强制绑定）

格式：

v-bind:属性名称=”绑定的数据”

:属性名称=”绑定的数据”

赋值的数据可以是任意一个合法的JS表达式

<div id="app">
	<input type="text" v-bind:value="name" />
</div>

<script type="text/javascript">
	let vue = new Vue({
		el: "#app",
		data: {
			name: "张三",
		}
	})
</script>

绑定类名class

格式（通过v-bind）

:class=”[‘需要绑定的类名1’, ’需要绑定的类名2’…]”

:class={‘需要绑定的类名1’:true/false,’ 需要绑定的类名2’:true/false},true和false可以是vue实例对象中data中的数据变量

注意点：

_1 不能直接:class=”类名”

_2 第一种方式,[]外面也需要引号，[]内每个类名也需要引号，[]内支持三目运算符==:class=”[isTrue‘类名1’:’’]”==

_3 第二种方式中，key是类名，value是布尔值

4_整个{}可以是Model中的数据

:class=’obj’
data:{
	obj: {
		‘red’:true
		‘bold’:true
	}
}

绑定样式style

和绑定类名一样，v-bind回去Model中查找

样式放到对象里

<div id="app">
	<p :style="[obj1]">1234567</p>
</div>

<script type="text/javascript">
	let vue = new Vue({
		el: "#app",
		data: {
			obj1:{
				"color":'red',
				"font-size":'100px'
			}
		}
	})
</script>

注意：

取值用引号包裹

样式的名称带-时候，需要引号包裹

v-on

专门用于给元素绑定监听事件

格式：

v-on:事件名称=”回调函数名”

@事件名称=”回调函数名”

事件触发后，会去Model的methods中找回调函数

注意点：事件不需要写on

赋值是一个回调函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
		<div id="app">
			<button v-on:click="c">按钮</button>
		</div>

		<script type="text/javascript">
			let vue = new Vue({
				el: "#app",
				data: {
				},
				methods:{
					c(){
						alert("来了")
					}
				}
			})
		</script>
	</body>
</html>

v-on事件修饰符

.once

只触发一次回调

.prevent

调用event.preventDefault()

.self

只当事件是从侦听器绑定的元素本身触发时才触发回调

.stop

调用event.stopPropagation()

.capture

添加事件监听器时使用capture模式

v-on注意点

1 绑定回调函数名称的时候，后面可以加() ,也可以不加

  @click = ‘myFn’  
  @click = ‘myFn()’

2 可以传递参数

@click = “myFn(‘yjx’,33)” //普通数据  

@click = “myFn($event)” //原生事件对象

3 回调函数中使用Model中的data中的数据需要加this.

  let vue = new Vue({  
  	data:{
  		msg:’yjx’
  	},  
  	methods:{    
  		myFn:function(){      
  			console.log(this.msg);  
      }  
    }  
  });

v-on按键修饰符

1 什么是按键修饰符？

可以通过按键修饰符监听特定按键触发的事件

2 按键修饰符分类

2.1系统预定义修饰符

2.2 自定义修饰符

@keyup：键盘按下事件

常用：

.enter 
.tab  
.delete (捕获“删除”和“退格”键)  
.esc  
.space  
.up  
.down  
.left  
.right

自定义按键修饰符别名（通过keyCodes）：

Vue.config.keyCodes.f1 = 112

说明：Vue.config.keyCodes.自定义名称= 原来按键对应的keyCodes值

本来是：

加入上述红色字体那一句之后就可以：

自定义指令

自定义全局指令directive

在Vue中除了可以使用内置的指令外，

最低0.47元/天解锁文章

m0_67402026

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue框架

目录1. Vue 的基本认识1.1. 官网1.2. 介绍描述1.3. Vue 的特点1.4. 与其它前端 JS 框架的关联1.5. Vue 扩展插件2 Vue 的基本使用2.1开发者工具调试Vue.js devtools_3.1.2_02.2 框架使用方式2.3 框架使用2.4 Vue数据单向传递2.4.1 MVVM模型2.4.2 Vue中的MVVM的划分2.4.3 Vue中数据的单向传递2.5 Vue数据双向绑定3 常见指令3.1 什么是指令
复制链接

扫一扫