Vue.js之入门教程

最新推荐文章于 2024-06-12 08:41:10 发布

阿越丶

最新推荐文章于 2024-06-12 08:41:10 发布

阅读量314

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/KongYue1202/article/details/107839776

版权

vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

Vue.js学习笔记

一. Vue.js是什么？
- 1.Vue.js 特点
- 2.Vue.js 安装
二. 1.创建第一个 Vue 应用
三. Vue组件
四. Vue 进阶

一. Vue.js是什么？

Vue.js是一套构建用户界面（view）的MVVM框架。

Vue.js的核心库只关注视图层，并且非常容易学习，
非常容易与其他库或已有的项目整合。

1.Vue.js 特点

简洁： HTML 模板 + JSON 数据，再创建一个 Vue 实例，就这么简单。

数据驱动： 自动追踪依赖的模板表达式和计算属性。

组件化： 用解耦、可复用的组件来构造界面。

轻量： ~24kb min+gzip，无依赖。

快速： 精确有效的异步批量 DOM 更新。

模块友好： 通过 NPM 或 Bower 安装，无缝融入你的工作流。

2.Vue.js 安装

独立版本

直接下载并用 <script> 标签引入，Vue 会被注册为一个全局变量。

Vue.js 官网下载地址：http://vuejs.org/guide/installation.html

我们可以在官网上直接下载生产版本应用在我们项目中。。

二. 1.创建第一个 Vue 应用

View 层 - HTML 代码如下：

<div id="app">
  {{ message }}
</div>

Model 层 - JavaScript 代码如下(需放在指定的HTML元素之后)：

new Vue({
    el:'#app',
    data: {
        message:'Hello World!'
    }
});

整体代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
  {{ message }}<!-- {{}}插值表达式-->
</div>
<!-- JavaScript 代码需要放在尾部（指定的HTML元素之后） -->
<script>
new Vue({
    el:'#app',//vue开始渲染的地方
    data: {
        message:'Hello World!' //状态
    }
});
</script>
</body>
</html>

输出结果Hello World!

2.绑定元素特性v-bind

除了文本插值，我们还可以像这样来绑定元素特性：

<div id="app">
	<span v-bind:title="message">
		鼠标悬停几秒钟查看此处动态绑定的提示信息！
	</span>
</div>
<script type="text/javascript">
	var app = new Vue({
		el: '#app',
		data: {
			message: '页面加载于 ' + new Date().toLocaleString()
		}
	})
</script>

v-bind特性被称为指令。指令带有前缀 v-以表示它们是 Vue 提供的特殊特性。
该指令的意思是：“将这个元素节点的 title 特性和 Vue 实例的 message属性
保持一致”。

3.v-html

但是如果我们展示的数据包含元素标签或者样式，我们想展示标签或样式所定义
的属性作用，该怎么进行渲染，比如展示内容为：<h1>这是一个h1元素内容</h1>
我们先用插值表达式和v-html尝试一下。

<div id="app">
    {{myhtml}}
    <div v-html="myhtml"></div>
</div>
<script type="text/javascript">
	var app = new Vue({
		el: '#app',
		data: {
			myhtml:"<h1>11111</h1>",
		}
	})
</script>

在这里插入图片描述

4.v-if与v-show的区别

<div id="app">
        <div v-show="isShow">动态显示和隐藏</div> 
        <div v-if="isCreated">动态创建和删除</div> 
</div>
<script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                isShow:true,
                isCreated:true
            }
        })
</script>

v-show

作用：通过判断，是否显示该内容。如果值为true，则显示。否则就隐藏。

语法：v-show=”判断表达式”

特点：元素会始终渲染在DOM中，只是被设置了display:none

v-if

作用：判断是否加载固定的内容。如果为真，则加载；为假时，则不加载。

用处：用在权限管理，页面条件加载

语法：v-if=”判断表达式”

特点：控制元素插进来或者删除，而不是隐藏。

v-if与v-show的区别：

一般来说，v-if有更高的切换消耗，安全性更高，而v-show有更多的初始化渲染消耗。因此，如果需要频繁切换而对安全性无要求，使用v-show。如果在运行时，条件不可能改变，则使用v-if较好。

5.vue-class绑定和vue-style

<style type="text/css">
    .red{
        background-color: red;
    }
    .yellow{
        background-color: yellow;
    }
</style>
<body>
    <div id="box">
        <div style="background:yellow">1111</div>
        <button @click="handleClick()">点</button>
        <div :class="isActive?'red':'yellow'">我是动态绑定class三目写法</div>
        <div :class="classobj">我是动态绑定clas对象写法</div>
        <div :class="classarr">我是动态绑定clas数组写法</div>
        <div :style="'background:'+'yellow'">1111</div>
        <div :style="'background:'+(isActive?'red':'yellow')">我是动态绑定style三目写法</div>
        <div :style="styobj">我是动态绑定style对象写法</div>
        <div :style="stylearr">我是动态绑定style数组写法</div>
    </div>
    <script type="text/javascript"> 
        var vm=new Vue({
            el:"#box",
            data:{
                isActive:true, 
                classobj:{
                    a:true,
                    b:true
                    //a,b class名字
                },
                classarr:["a",'b'],
                styobj:{
                    backgroundColor:"red"
                },
                stylearr:[]
            },
            //方法
            methods:{
                handleClick(){
                    this.isActive=!this.isActive
                }
            }
        })
    </script>
</body>

6.v-if和v-else

实现购物车进去是空空如也点击按钮切换到商品

   <div id="box">
        <button @click="handleClick()">点</button>
        <div v-if="isCreated">动态创建和删除11111</div>
        <div v-else>动态创建和删除22222</div>
        <ul v-if="datalist.length">
            <li v-for="data in datalist">
                {{data}}
            </li>
        </ul>
        <div v-else>购物车空空如也</div>
        
        <!--which 用法-->
        <!--<div v-if="which===1">1111</div>
        <div v-else-if="which===2">2222</div>
        <div v-else="which===3">3333</div>-->
        
    </div>
    <script type="text/javascript">
        var vm=new Vue({
            el:"#box",
            data:{
                isCreated:false,
                datalist:[],
                which:1
            },
            methods:{
                handleClick(){
                    this.isCreated=!this.isCreated
                    this.datalist=['电脑','手机']
                }
            }
        })
    </script>

7.v-for

		<div id="box">
			<ul>
				<!--index键 遍历数组-->
				<li v-for="(data,index) in datalist" key="data.id">
					{{data}}--{{index}}
				</li>
			</ul>
			<ul>
				<li v-for="(data,index) of datalist">
					{{data}}--{{index}}
				</li>
			</ul>
			<ul>
				<!--key键 遍历对象-->
				<li v-for="(data,key) in obj">
					{{data}}--{{key}}
				</li>
			</ul>
			<ul>
				<li v-for="(data,key) of obj">
					{{data}}--{{key}}
				</li>
			</ul>
		</div>
		<script>
			var vm=new Vue({
				el:"#box",
				data:{
					datalist:['111','222','333'],
					obj:{
						name:"kongyue",
						age:"20",
						sex:"nan"
					},
					
				}
			})
		</script>

(1) v-for a. in b. of
(2) key：*跟踪每个节点的身份，从而重用和重新排序现有元素 *理想的 key
值是每项都有的且唯一的 id。data.id
(3) 数组更新检测

使用以下方法操作数组，可以检测变动 push() pop() shift() unshift() splice() sort() reverse()
filter(), concat() 和 slice() ,map(),新数组替换旧数组
不能检测以下变动的数组 vm.items[indexOfItem] = newValue 解决 (1)Vue.set(example1.items, indexOfItem, newValue)
(2)splice

8.v-model实现数据的双向绑定

<body>
	<div id="box">
		<input type="text"  v-model="mytext"/>
            {{mytext}}
	</div>
	<script>
		var vm=new Vue({
			el:"#box",
			data:{
				mytext:''
			}
		})
	</script>
</body>

9.过滤

<div id="box">
	<input type="text" @input="handleInput()" v-model="mytext"/>
	<ul>
		<li v-for="data in datalist" >
		{{data}}
		</li>
	</ul>
</div>
<script>
	var vm=new Vue({
		el:"#box",
		data:{
			datalist:['aaa','bbb','ccc','aab'],
			list:['aaa','bbb','ccc','aab'],
			mytext:''
		},
		methods:{
			handleInput(){
				console.log(this.mytext);
				//只要value改变，就会触发
				//利用输入框的字符，过滤出包含字段的元素
				
				//filter  过滤
				var newlist=this.list.filter(item=>item.indexOf(this.mytext)>-1)
				//console.log(newlist);
				this.datalist=newlist;
			}
			
		}
	})  
</script>

10.事件处理

<div id="box">
	<button @click="handleClick">点击1</button><!-- 不传参数用这种写法 -->
	<button @click="handleClick()">点击2</button><!-- 传参数用这种写法 -->
	<button @click="isShow=!isShow">点击3</button><!-- 过于简单的这种写法 -->
	<div v-show="isShow">111111</div>
</div>
<script type="text/javascript">
	var em=new Vue({
		el:"#box",
		data:{
			isShow:false
		},
		methods:{
			handleClick(){
				this.isShow=!this.isShow
			}
		}
	})
</script>

11. 事件修饰符

.self：只会触发自己范围内的事件，不包含子元素
.once：只会触发一次
.capture：与事件冒泡的方向相反，事件捕获由外到内
.prevent：等同于JavaScript中的event.preventDefault()，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）
.stop：等同于JavaScript中的event.stopPropagation()，防止事件冒泡

12. 按键修饰符

在JavaScript事件中除了前面所说的事件，还有键盘事件，也经常需要监测常见的键值。在Vue中允许v-on在监听键盘事件时添加关键修饰符。记住所有的keyCode比较困难，所以Vue为最常用的键盘事件提供了别名：

.enter：回车键
.tab：制表键
.delete：含delete和backspace键
.esc：返回键
.space: 空格键
.up：向上键
.down：向下键
.left：向左键
.right：向右键

13. 表单控件绑定

<div id="box">
	<input type="text" v-model="mytext"/>
	{{mytext}}
	<textarea v-model="mytext"></textarea>
	<br />
	<!--单个绑定布尔值-->
	<input type="checkbox"  v-model="isCheckbox"/>记住用户名
	<!--多个绑定数组-->
	<p>
		<input type="checkbox" value="游泳"  v-model="checkgroup"/>游泳
		<input type="checkbox" value="长跑" v-model="checkgroup"/>长跑
		<input type="checkbox" value="打游戏" v-model="checkgroup"/>打游戏
	</p>
	{{checkgroup}}
	
	<p>
		<input type="radio" value="长跑" v-model="picked"/>长跑
		<input type="radio" value="游泳"  v-model="picked"/>游泳
		<input type="radio" value="打游戏" v-model="picked"/>打游戏
	</p>
	{{picked}}
</div>
<script>
	var vm=new Vue({
		el:"#box",
		data:{
			mytext:'',
			isCheckbox:false,
			checkgroup:[],
			picked:[]
		}
	})
</script>

14. 购物车功能

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>

        <script type="text/javascript" src="js/vue.js" ></script>
        <div id="box">
        	<div align="center">
        	<table border="1" width="400px">
        		<tr>
        		<th><input type="checkbox" v-model="isAllChecked" @change="handleChange()"/>全选</th>
			   <th>商品id</th>
			   <th>商品名称</th>
			   <th>商品价钱</th>
			   <th>商品数量</th>
			   </tr>
			   <tr v-for="data in datalist">
			   	<td><input type="checkbox" v-model="checkgroup" :value="data" @change="handledanChange()"/></td>
			   	<td>{{data.id}}</td>
			   	<td>{{data.name}}</td>
			   	<td>{{data.price}}</td>
			   	<td><button @click="handleJian(data)">减</button>{{data.num}}<button @click="data.num++">加</button></td>
			   </tr>
			   <tr align="center">
			   	<td colspan="5">总计{{getSum()}}</td>
			   </tr>
		   </table>
		   {{checkgroup}}
		   </div>
        </div>
        <script type="text/javascript">
        	var em=new Vue({
        		el:"#box",
        		data:{
        			checkgroup:[],
        			isAllChecked:false,
        			datalist:[
		             {
		                 id:"1",
		                 name:"电脑",
		                 price:"300",
		                 num:"3"
		             },
		             {
		                 id:"2",
		                 name:"电扇",
		                 price:"200",
		                 num:"3"
		             },
		             {
		                 id:"3",
		                 name:"电视机",
		                 price:"100",
		                 num:"3"
		             },
		             {
		                 id:"4",
		                 name:"洗衣机",
		                 price:"500",
		                 num:"3"
		             }
		           ]
        		},
        		methods:{
        			//总计
    				getSum(){
					var sum=0;
					for(var i in this.checkgroup){
						sum+=this.checkgroup[i].num*this.checkgroup[i].price
					}
					return sum;
					},
					//减
					    handleJian(data){
						var num=data.num--;
						if(num==1){
							data.num=1;
						}
					},
					//全选
						handleChange(){
						console.log("改变",this.isAllChecked);
						if(this.isAllChecked){
							this.checkgroup=this.datalist;
						}else{
							this.checkgroup=[];
						}
					},
					//商品点上全选
						handledanChange(){
						console.log("handleLiChange判断是不是勾选");
						if(this.checkgroup.length===this.datalist.length){
							this.isAllChecked=true;
						}else{
							this.isAllChecked=false;
						}
					}
        		}
        	})
        </script>
	</body>
</html>

15. 表单修饰符

<div id="box">
	<!--//当光标移开后会触发-->
	<input type="text" v-model.lazy="mytext"/>
	{{mytext}}
	<!--//这里加了number属性不是说限制用户输入，而是输入的数据尝试绑定为 js 中的 number 类型-->
	<input type="number" v-model.number="mynumber"/>
	{{mynumber}}
	<!--trim:可以用来过滤前后的空格-->
	<input type="text" v-model.trim="myusername" />
	{{myusername}}
</div>
<script>
	var em=new Vue({
		el:"#box",
		data:{
			mytext:"",
			mynumber:0,
			myusername:''
		}
	})
</script>

16. 计算属性

<div id="box">
	<p>计算属性{{getMyName}}</p>
	<p>方法调用{{getMyNameMethods()}}</p>
	
	也需要运算结果
	<p>计算属性{{getMyName}}</p>
	<p>方法调用{{getMyNameMethods()}}</p>
	
</div>
<script>
	var vm=new Vue({
		el:"#box",
		data:{
			myname:"xiaoming"
		},
		methods:{
			getMyNameMethods(){
				console.log("getMyNameMethods-方法调用");
				return this.myname.substring(0,1).toUpperCase()+this.myname.substring(1);
			}
		},
		//1.依赖的状态改变了，计算属性会重新计算一遍
		//2.计算属性会缓存
		computed:{
			getMyName(){
				console.log('getMyName-计算属性调用');
				return this.myname.substring(0,1).toUpperCase()+this.myname.substring(1);
			}
		}
	})
</script>

三. Vue组件

1. 全局组件

<div id="box">
    <banner></banner>
    <banner></banner>
</div>
<script>
	//全局定义组件      作用域隔离
	Vue.component("banner",{
		template:`<div>
		     <button @click="handleback()">返回</button>
		     banner
		     <button>主页</button>
		</div>`,
		methods:{
			handleback(){
				alert("123");
			}
		},
	})
	var vm=new Vue({
		el:"#box"
	})
</script>

2. 局部组件

		<div id="box">
            <banner></banner>
            <banner></banner>
		</div>
		<script>
			//全局定义组件      作用域隔离
			Vue.component("banner",{
				template:`<div>
				     <button @click="handleback()">返回</button>
				     banner
				     <button>主页</button>
                     <bannerchild></bannerchild>
				</div>`,
				methods:{
					handleback(){
						alert("123");
					}
				},
                //局部定义组件
				components:{
					bannerchild:{
						template:`<div>bannerchild-只能在banner组件中使用</div>`
					}
				}
			})
			var vm=new Vue({
				el:"#box"
			})
		</script>

3. 组件编写方式与Vue实例的区别

自定义组件需要有一个root element
父子组件的data是无法共享
组件可以有data，methods,computed…,但是data 必须是一个函数

4. 组件通信

父传子用属性向下传
子传父用事件向上传

（1）父传子

通过属性往孩子里传递

		<div id="box">
			<navbar myname="home"></navbar>
			<navbar myname="list"></navbar>
			<navbar :myname="parentname"></navbar>
		</div>
		<script>
			Vue.component("navbar",{
				template:`<div>
				<button>返回</button>
				navbar---{{myname}}
				<button>主页</button>
				</div>`,
				
				props:["myname"] //接收父组件传来的属性
			})
			var vm=new Vue({
				el:"#box",
				 data:{
				 	parentname:"parentname父组件状态，动态绑定即可（：myname）"
				 }
			})
		</script>

（2）属性验证

<div id="box">
	<navbar myname="home" :myshow="false"></navbar>
	<navbar myname="list" :myshow="true"></navbar>
	<navbar :myname="parentname" :myshow="true"></navbar>
</div>
<script>
	Vue.component("navbar",{
		template:`<div>
		<button>返回</button>
		navbar---{{myname}}---{{myshow}}
		<button v-show="myshow">主页</button>
		</div>`,
		
		//属性验证
		props:{
			myname:String,
			myshow:Boolean
		}
	})
	var vm=new Vue({
		el:"#box",
		 data:{
		 	parentname:"parentname父组件状态，动态绑定即可（：myname）"
		 }
	})
</script>

props:{name:Number}
Number,String,Boolean,Array,Object,Function,null(不限制类型)

（3）子传父

<div id="box">
	父组件
	<child @myevent="handleEvent($event)"></child>
</div>
<script>
	Vue.component("child",{
		template:`<div>
		child组件
		<button @click="payMoney">点击</button>
		</div>`,
		data(){
			return {
				childname:"子组件状态"
			}
		},
		methods:{
			payMoney(){
				this.$emit("myevent",1000);//分发 事件
				this.$emit("myevent",this.childname);
			}
		}
	})
	var vm=new Vue({
		el:"#box",
		methods:{
			handleEvent(ev){
				console.log("父组件收到钱了",ev);
			}
		}
	})
</script>

（4） ref

 <div id="box">
 	<input type="text" ref="mytext"/>
 	<button @click="handleAdd">add</button>
 </div>
 <script>
 	//ref放在标签上，拿到的是原生节点
 	var vm=new Vue({
 		el:"#box",
 		methods:{
 			handleAdd(){
 				console.log("111",this.$refs.mytext.value)
 			}
 		}
 	})
 </script>

 <div id="box">
 	<input type="text" ref="mytext"/>
 	<button @click="handleAdd">add</button>
 	<child ref="mychild"></child>
 </div>
 <script>
 	//ref放在组件上，拿到的是组件对象
 	//子组件
 	Vue.component("child",{
 		template:`<div>child</div>`,
 		data(){
 			return {
 				childname:"子组件状态"
 			}
 		},
 		methods:{
 			add(data){
 				console.log("子组件的方法",data)
 			}
 		}
 	})
 	var vm=new Vue({
 		el:"#box",
 		methods:{
 			handleAdd(){
 				console.log(this.$refs.mychild.childname)
 				this.$refs.mychild.add("孩子挺好")//拿到子组件的状态和方法
 			}
 		}
 	})
 </script>

（5）非父子通信—事件总线

var bus = new Vue();
mounted生命周期中进行监听

<div id="box">
	<weixinauthor></weixinauthor>
	<weixinuser></weixinuser>
</div>
<script>
	var bus=new Vue();//空vue实例 就是中英事件总线
	Vue.component("weixinauthor",{
		template:`<div style="background:red">
		我是一个公众号作者
		<input type="text"  ref="mytext"/>
		<button @click="handleClick" >发布</button>
		</div>`,
		methods:{
			handleClick(){
				bus.$emit("weixinmessage",this.$refs.mytext.value)
			}
		}
	})
	Vue.component("weixinuser",{
		template:`<div style="background:blue">我是一个·微信用户</div>`,
		mounted(){
			bus.$on("weixinmessage",(data)=>{
				console.log("收到推送",data)
			})
			console.log("生命周期函数，当前组件的dom 创建完成之后 就会调用")
		}
	})
	var vm=new Vue({
		el:"#box"
	})
</script>

5. 动态组件

< component> 元素，动态地绑定多个组件到它的 is 属性
< keep-alive> 保留状态，避免重新渲染

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
  
			*{
			  margin: 0px;
			  padding: 0px;
			}
		
			html,body{
			  width: 100%;
			  height: 100%;
			}
		   footer ul {
			display: flex;
			position: fixed;
			left: 0px;
			bottom: 0px;
			width: 100%;
			height: 40px;
		   }
		
		   footer ul li {
			flex: 1;
			text-align: center;
			list-style: none;
			height: 40px;
			line-height: 40px;
			background: gray;
		   }
		</style>
		
	</head>
	<body>
		<script type="text/javascript" src="js/vue.js" ></script>
		<div id="box">
		     <!--keep-alive保留状态，避免重新渲染-->
			<keep-alive>
			<component :is="who"></component>
			</keep-alive>
			<footer>
				<ul>
					<li @click="who='home'"><a>首页</a></li>
					<li @click="who='list'"><a>列表页</a></li>
					<li @click="who='shopcar'"><a>购物车首页</a></li>
				</ul>
			</footer>
		</div>
		<script>
			var vm=new Vue({
				el:"#box",
				data:{
					who:"home"
				},
				//局部组件
				components:{
					"home":{
						template:`<div>home <input type="text"/> </div>`
						
					},
					"list":{
						template:`<div>list</div>`
					},
					"shopcar":{
						template:`<div>shopcar</div>`
					}
				}
			})
		</script>
	</body>
</html>

四. Vue 进阶

1. slot插槽

*混合父组件的内容与子组件自己的模板–>内容分发
*父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译。

a. 单个slot

<div id="box">
	<child>
		<div>aaaaaaaaaa</div>
	</child>
	<swiper>
		<div v-for="data in datalist">
			{{data}}
		</div>
	</swiper>
</div>
<script>
	Vue.component("child",{
		template:`<div>
		<slot></slot>
		child
		</div>`
	})
	Vue.component("swiper",{
		template:`<div>
		<ul>
		    <slot></slot>
		</ul>
		</div>`
	})
	var vm=new Vue({
		el:"#box",
		data:{
			datalist:['111','222','333']
		}
	})
</script>

b. 具名slot

<div id="box">
	<child>
		<div slot='a'>aaaaaaaaaa</div>
		<div slot="b">bbbbbbbbbb</div>
	</child>
</div>
<script>
	Vue.component("child",{
		template:`<div>
		<slot name="b"></slot>
		child
		<slot name="a"></slot>
		</div>`
	})
	var vm=new Vue({
		el:"#box",
		data:{
			
		}
	})
</script>

2. transition过渡

(1)单元素/组件过渡

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		  .kerwinfade-enter-active, .kerwinfade-leave-active {
		    transition: all 1.5s;
		  }
		  .kerwinfade-enter, .kerwinfade-leave-to /* .fade-leave-active below version 2.1.8 */ {
		    opacity: 0;
		    transform: translateX(100px);
		  }
		    .kerwinbounce-enter-active {
		    animation: bounce-in .5s;
		  }
		  .kerwinbounce-leave-active {
		    animation: bounce-in .5s reverse;
		  }
		  @keyframes bounce-in {
		    0% {
		      opacity: 0;
		      transform: translateX(100px);
		    }
		
		    100% {
		      opacity: 1;
		      transform: translateX(0px);
		    }
		  }

	</style>
	<body>
		<script type="text/javascript" src="js/vue.js" ></script>
		<div id="box">
			<button @click="isShow=!isShow">点击</button>
			
			<transition  name="kerwinfade">
			<div v-if="isShow">111111</div>
			</transition>

			<transition  name="kerwinbounce">
			<div v-if="isShow">222222</div>
			</transition>
		</div>
		<script>
			var vm=new Vue({
				el:"#box",
				data:{
					isShow:false
				}
			})
		</script>
	</body>
</html>

(2) 多个元素过渡(设置key)

<div id="box">
	<button @click="isShow=!isShow">点击</button>
	
	<!--mode in-out先来后走，out-in先走后来-->
	<transition name="bounce" mode="out-in">
	<p v-if="isShow" key="1">1111111</p>
	<p v-else key="2">222222</p>
	</transition>
</div>
<script>
	var vm=new Vue({
		el:"#box",
		data:{
			isShow:true
		}
	})
</script>

(3) 多个组件过渡

<div id="box">
	<keep-alive>
	<transition name="bounce" mode="out-in">
	<component :is="who"></component>
	</transition>
	</keep-alive>
	<footer>
		<ul>
			<li @click="who='home'"><a>首页</a></li>
			<li @click="who='list'"><a>列表页</a></li>
			<li @click="who='shopcar'"><a>购物车首页</a></li>
		</ul>
	</footer>
</div>
<script>
	var vm=new Vue({
		el:"#box",
		data:{
			who:"home"
		},
		//局部组件
		components:{
			"home":{
				template:`<div>home <input type="text"/> </div>`
				
			},
			"list":{
				template:`<div>list</div>`
			},
			"shopcar":{
				template:`<div>shopcar</div>`
			}
		}
	})
</script>

(4) 列表过渡(设置key)

< transition-group>不同于 transition，它会以一个真实元素呈现：默认为一个 < span>。你也可以通过 tag 特性更换为其他元素。
提供唯一的 key 属性值

3. 生命周期

什么是生命周期? 简而言之:从生到死的过程,从Vue实例创建-运行-销毁的过程
Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程生命周期方法?
Vue从生到死的过程中伴随着各种各样的事件,这些事件会自动触发一些方法.这些方法我们统称为生命周期方法生命周期钩子 = 生命周期函数 =
生命周期事件创建期间生命周期方法
beforeCreate:
created:
beforeMount
mounted 运行期间生命周期方法
beforeUpdate
updated 销毁期间的生命周期方法
beforeDestroy
destroyed

https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA

4. swiper

https://www.swiper.com.cn/usage/index.html

5.自定义指令

<div id="box">
	<div v-name="'red'">1111</div>
	<div v-name="'yellow'">1111</div>
	<div v-name="mycolor">1111</div>
</div>
<script>
	//操作底层dom
	Vue.directive("name",{
		inserted(el,bind){
			//指令的生命周期-创建
			//插入
			//console.log("当前节点插入到父节点了")
			//console.log(el) //找到div标签
			//console.log(bind)
			console.log(bind.value)
			//el.style.background="red"
			el.style.background=bind.value
		},
		update(el,bind){
			//指令生命周期的-更新
			el.style.background=bind.value
		}
	})
	var vm=new Vue({
		el:"#box",
		data:{
			mycolor:"red"
		}
	})
</script>

阿越丶

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue.js之入门教程

Vue.js学习笔记一. Vue.js是什么？1.Vue.js 特点2.Vue.js 安装二. 1.创建第一个 Vue 应用2.绑定元素特性3.v-html4.v-if与v-show的区别一. Vue.js是什么？Vue.js是一套构建用户界面（view）的MVVM框架。Vue.js的核心库只关注视图层，并且非常容易学习，非常容易与其他库或已有的项目整合。1.Vue.js 特点简洁： HTML 模板 + JSON 数据，再创建一个 Vue 实例，就这么简单。数据驱动：自动追踪依赖的模板
复制链接

扫一扫