Vue基础总结

最新推荐文章于 2024-10-14 13:22:38 发布

ZsZsZZsw

最新推荐文章于 2024-10-14 13:22:38 发布

阅读量81

点赞数 2

文章标签： vue.js

本文链接：https://blog.csdn.net/ZsZsZZsw/article/details/121086974

版权

大纲

1.概述

2.计算

3.监听

4.实例化参数

5.自定义指令

6.过滤-管道

7.指令以及渲染和绑定

8.动画

9.组件

1.概述

vue是一款渐进式javascript前端框架

作者：尤雨溪

特点：
1.简单，上手方便
2.结合Angular指令与react组件思维
3.生态丰富（插件多）API文档完善

2.计算computed

计算简单来说就是从现有的数据中计算出新的数据

如：把/把msg：傻子vue转化成rmsg vue傻子


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
 
		<div id="app">
			{{rmsg}}
		</div>
		<script type="text/javascript">
 
			new Vue({
				el:"#app",
				data:{msg:"傻子vue"},
				computed:{
				rmsg(){return this.msg.split('').reverse().join('')}}
			})
		</script>
	</body>
</html>

3.监听wacth

监听数据的变化，并执行回调函数handler


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<p>{{num}}<input type="text" v-model="num" /></p>
		</div>
		<script type="text/javascript">
			new Vue({
				el:"#app",
				data:{
					person:{
						age:15
					},
					num:8
				},
				watch:{
					"num":{
						
						handler(nval,oval){
							console.log("数据由",oval,"变化为",nval);
							console.log("num变化了:",this.num);
						}
					
				}
			})
		</script>
	</body>
</html>

4.实例化参数

el:"#app"
选择目标标签
data：{}
指定数据
data（）{return {}}
一个函数返回一个对象

5.自定义指令directives

bind绑定执行一次
insert插入执行一次
update每更新执行一次


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<h1>自定义指令</h1>
			<p v-text="msg"></p>
			<input type="text" name="" id="" value="" v-focus="true" />
		</div>
		<script type="text/javascript">
			new Vue({
				el:"#app",
				data:{
					msg:"你好vue"
				},
				directives:{
					"focus":{
						//el指令所在的节点，binding指令相关的数据binding.value
						//获取指令所在的节点，执行第三方基于dom的插件
						inserted(el,binding){
							console.log(el,binding);
							el.focus();
						}
					}
				}
			})
		</script>
	</body>

6.过滤-管道 filters

格式化数据

使用
1.{{num|fix}}
2.{{num|fix(2)}}
3.v-text="num|fix"

filtres:{
fix(value,arg){
return value,toFixed(arg)
}
}
//保留两位小数

指令

指令的值是可以是简单的javascript命令

文本渲染指令

{{}}
v-text
v-html
（渲染html文本）

属性绑定

v-bind：属性=“指令值”
：属性=“值”

条件渲染

频繁切换用v-show
一次性切换用v-if
v-show隐藏是通过css的方式隐藏节点

列表渲染

v-for="item in list"

//list 要遍历的数组
// item 当前遍历的项目

v-for="item in list" 的
v-for="（item,index）in list"
//index 当前遍历项的索引从0开始

事件指令

事件修饰符
.stop 阻止事件冒泡
.prevent 阻止默认事件
.once 只执行一次
@click.stop.once.prevent="num++"
事件的修饰符可以同时写多个

按键修饰符

.up
.down
.left
.right
.delete
.enter
.space
.esc

事件对象

Sevent

表单绑定指令

v-model
让表单的值与数据绑定在一起

<input type="checkbox">
默认选中值是true
不选中值是false

<input type="checkbox" name="fruit" v-model="list">
如果是多个把选中的值动态添加到list数组中

修饰符

.number 数学
.trim 移除两端空白

类绑定

1.属性
：class="值"
   2.对象
当对象的属性值为真，该属性作为class绑定
：class="{'key1':true,'key2':false}"
key1的值为真，key1会被绑定，key2不会
   3.数组方式
：class=”[c1，c2，c3]“
样式绑定
   属性名去掉-下个字母大写
：style="{color:'red','fontSize':'48px'}"

8.动画

vue动画在内置组件transition中包裹会自动在动画的进入过程和离开过程添加类名

1.内置组件
name名称

mode:模式
in-out先进在出
out-in先出再进

enter-active-class
指定进入类名

leave-active-class
指定离开类名

transition-group

2.动画类
name-enter-active
进入过程

name-enter
进入前

name-enter-to
进入后

name-leave-active
离开过程

name-leave
离开前

name-leave-to
离开后

9.组件

定义：一段可以重复利用的代码块

1.全局组件

Vue.component("组件名".{template:``})

创建全局组件的代码如下：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<h1>全局组件</h1>
			<btn></btn>
			<btn></btn>
			<btn></btn>
		</div>
		<script type="text/javascript">
		//定义一个全局的组件，名称是btn()
			Vue.component("btn",{
				//定义组件的模板上面3个btn互不干扰
				template:`<button @click="num++">{{num}}</button>`,
				//定义组件的data数据
				data(){return {num:1}}
			})
			var vm=new Vue({
				el:"#app",
				data:{
					n:10
				}
			})
			console.log(vm);
			//vm是根组件(最基础的)实例
		</script>
	</body>
</html>

2.局部组件

const steper={template:``}

3.注册组件

new Vue({
components:{steper}
})

4.使用组件

创建局部组件注册组件以及使用组件的代码如下：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<!-- 重复使用 -->
			<p><steper></steper></p>
			<p><steper></steper></p>
			<p><steper></steper></p>
		</div>
		<script type="text/javascript">
			//定义组件
			//组件只能有且只有一个根节点
			const steper={
				// 局部组件的创建
				template:`
				<span>
				   <button @click="n--">-</button>
				   <input type="text" v-model.number="n"/>
				   <button @click="n++">+</button>
				</span>
				`,
				data(){return{n:1}
				}
			}
			new Vue({
				//注册组件
				components:{steper},
				el:"#app",
				
				
			})
		</script>
	</body>
</html>