01.Vue的学习

最新推荐文章于 2024-04-18 17:49:29 发布

小周日记

最新推荐文章于 2024-04-18 17:49:29 发布

阅读量101

点赞数

分类专栏： vue学习文章标签： vue

本文链接：https://blog.csdn.net/actores/article/details/115284749

版权

vue学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.什么是Vue？

官网回答：是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

2.vue的实现原理

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<!--
			1. 引入vue.js
			2. 创建Vue对象
				el：指定根element(选择器)
				data：初始化数据(页面可以访问)
			3.双向数据绑定：v-model
			4.显示数据：{{xxx}}
			5.理解vue的mvvm实现原理
		-->
		
	
		<div id="app"> <!--view-->
			<input type="text" v-model="username"/>
			<p>hello   {{username}}</p>
		</div>
		
		
		
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript">
			//创建vue实例
			const vm = new Vue({//配置对象
				el:'#app',//element：选择器
				data:{// 数据（model）
					username:'lin'
				}
			})
		</script>
	</body>
</html>

3.vue的语法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<!--vue为声明式函数，只需声明调用就可以-->
	<body>
		<!--mvvm
			1.模版的理解：
				动态的HTML页面
				包含哪一些js的语法代码
					双大括号表达式
					指令(以v-开头的自定义标签属性)
			2.双括号表达式
				语法：{{exp}}或{{{exp}}}
				功能：向页面输入数据
				可以调用对象方法
			3.指令一：强制数据绑定
				功能：指定变化的属性值
				完整写法：
					v-bind:xxx='yyy'//yyy会作为表达式解析执行
				简洁写法：
					:xxx='yyy'
			4.指令二：绑定事件监听
				功能：绑定指定事件名的回调函数
				完整写法：v-on:click='xxx'
				简洁写法：
				@click='xxx'
		-->
		
		<div id="app">
			<h2>1.双大括号表达式</h2>
			<p>{{tex}}</p>
			<!--转换为大写toUpperCase()-->
			<p>{{tex.toUpperCase()}}</p>
			<!--比较-->
			<p v-text="msg"></p><!--context直接输出文本-->
			<p v-html="msg"></p><!--innerhtml直接是网页超链接-->
			
			
			
			
			<h2>2.指令一：强制数据绑定</h2>
			<!--按html写-->
			<img src="imgUrl"/>
			<!--按vue方式写-->
			<img v-bind:src="imgUrl"/>
			<!--vue简写-->
			<img :src="imgUrl"/>
			
			
			
			
			
			<h2>3.指令二：强制事件监听</h2>
			<button v-on:click="test">测试1</button>
			<!--简写就变成了强制绑定，但是是强制监听才对，于是：号变成了@号-->
			<!--<button v-on:click="test">测试2</button>-->
			<button @click="test">测试2</button>
			<!--灵活的vue,方法传递参数-->
			<button @click="test2(abc)">测试3</button><!--显示未定义-->
			<button @click="test2(msg)">测试4</button><!--显示msg的文本-->
			
		</div>
		
		
		
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript">
			const vm = new Vue({
				el:'#app',
				data:{
					//不同数据要用逗号隔开
					tex:'i will back！！',
					msg:'<a href="www.baidu.com">百度网址</a>',
					imgUrl:'https://cn.vuejs.org/images/logo.png'
				},
				methods:{
					//方法
					test(){
						alert('点我这个测试')
					},
					//随便起一个名字接受参数，也就是传参
					test2(content){
						alert(content)
					}
				}
				
			})
		</script>
		
	</body>
</html>

4.vue的计算属性和监视

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>03_计算属性和监视</title>
	</head>
	<body>
		<!--
			1. 计算属性
				在computed属性对象中定义计算属性的方法
				在页面中使用{{方法名}}来显示计算结果
			2. 监视属性：
				通过vm对象的$watch()或watch配置来监视指定的属性
				当属性变化时，回调函数自动调用，在函数内部进行计算
			3.计算属性高级：
				通过getter/setter实现对属性数据的显示和监视
				计算属性存在缓存，多次读取只执行一次getter计算
		-->
		
		<div id="demo">
			姓：<input type="text" placeholder="First name" v-model="firstName"/><br /><!--一想到input就必须写入v-model-->
			名：<input type="text" placeholder="last name" v-model="lastName"/><br />
			姓名1(单向)：<input type="text" placeholder="Full name" v-model="fullName1"/><br />
			姓名2(单向)：<input type="text" placeholder="Full name" v-model="fullName2"/><br />
			姓名3(双向)：<input type="text" placeholder="Full name" v-model="fullName3"/><br />
		
		</div>
		
		
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript">
			//直接写new Vue也可以
			 const vm = new Vue({
			 	el:'#demo',
				data:{
					firstName:'A',
					lastName:'B',
					//fullname1:'A B'
					//初始为A B
					fullName2:'A B'
				},
				//计算属性
				computed:{
					// 什么时候执行：初始化显示/相关的data属性数据发生改变
					fullName1 (){//计算属性中的一个方法，方法的返回值作为属性值
						//console.log(' 你干嘛 fullname1()')
						//一步简化
						return this.firstName + ' '+ this.lastName
						//两步弱化
						/*var add = this.firstName + ' '+ this.lastName
						return add*/
					},
					//双向
					fullName3:{
						//1. 你定义的 2.你没有调用 3.但最终执行的
						//2. 什么是时候调用？2.用来做什么
						//回调函数 当需要读取当前属性值时回调，根据相关的数据计算并放回当前属性的值
						get(){
							return this.firstName + ' '+ this.lastName
						},
						//回调函数，监视当前属性值的变化，当前属性值发生改变回调，更新相关的属性数据
						set(value){//value就是fullName3的最新属性值
							//split截取，剩下的就是A和B在一个数组
							const names = value.split(' ')
							this.firstName = names[0]
							this.lastName = names[1]
						}
					}
					
				},
				//监视属性
				watch:{//配置监视
					firstName: function (value) {//监听firstname是否发生了变化
						//console.log(this)//就是vm对象
						this.fullName2 = value +' '+ this.lastName
					}
				}
			 })
			 
			//$监视  不知道去官网看API教程
			//监听第一个
			vm.$watch('lastName',function(value){
				//更新funllName2
				this.fullName2 = this.firstName + ' '+value
			})
			
			//总结：写两个监听来满足一个，还不如用计算computed属性
			//split一般是指根据特定的分隔符将字符串分隔成一个数组.它是一个函数
		</script>
	</body>
</html>

5.vue的class和style的绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			.aClass{
				color: red;
			}
			.bClass{
				color: blue;
			}
			.cClass{
				color:green;
			}
			
		</style>
	</head>
	<body>
		<!--
			1.理解
				在应用界面中，某个(些)元素的样式是变化的
				class/style绑定就是专门用来实现动态样式效果的技术
			2.class绑定：class='xxx'
				xxx是字符串
				xxx是对象
				xxx是数组
			3.style绑定
				:style="{color:activeColor,fontSize:fontSize + 'px'}"
				其中activColor/fontSize是data属性
		-->
		<div id="demo">
			<h2>1. class绑定：class='xxx'</h2>
			<!--xxx是字符串-->
			<!--a是一个变量，当然也可以直接写标签器名字   但是主要这样就写死了-->
			<!--<p class="cClass" :class="aClass">这是class绑定样式：xxx是字符串</p>-->
			<p class="cClass" :class="a">这是class绑定样式：xxx是字符串</p>
			
			
			<!--xxx是对象：当然也可以直接写标签器名字aClass:true,bClass:false 这里将true 和 false 替换成isA 和 isB
				并且在#demo中设置isA和isB的值为布尔类型的值 ，点击按钮的时候在改变他的值
			-->
			<!--<p :class="{aClass:true,bClass:false}">这是class绑定样式：xxx是对象</p>-->
			<p :class="{aClass:isA,bClass:isB}">这是class绑定样式：xxx是对象</p>
			
			
			<!--xxx是数组：直接写标签名 也可以写变量 也可以写对象 这里使用的比较少 就不详细说明-->
			<!--<p :class="['aClass','cClass']">这是class绑定样式：xxx是数组</p>-->
			<p :class="[Aa]">这是class绑定样式：xxx是数组</p>
			
			
			
			<!--2.style绑定-->
			<h2>2.style绑定</h2>
			
			<p :style="{color:activeColor,fontSize:fontSize + 'px'}">{color:activeColor,fontSize:fontSize + 'px'}</p>
			
			
			
			
			<button @click="update">更新</button>		
		</div>
		
		
		
		<script type="text/javascript" src="js/vue.js"></script>、
		<script type="text/javascript">
			new Vue({
				el:'#demo',
				data:{
					a:'aClass',
					isA:true,
					isB:false,
					Aa:'aClass',
					activeColor:'yellow',
					fontSize:'20'
				},
				methods:{
					update(){
						this.a = 'bClass';//不能加,号的
						this.isA = false;
						this.isB = true;
						this.Aa = 'cClass';
						this.activeColor='bule';
						this.fontSize=50
					}
				}
				
				
			})
			
		</script>
		
		
		
	</body>
	
	
</html>

6.vue的练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="demo">
			姓：<input type="text" placeholder="First name" v-model="firstName"/><br />
			名：<input type="text" placeholder="last name" v-model="lastName"/><br />
			姓名(单向)：<input type="text" placeholder="Full name" v-model="fullName1"/><br />
			姓名(单向)：<input type="text" placeholder="Full name" v-model="fullName2"/><br />
			姓名(双向)：<input type="text" placeholder="Full name" v-model="fullName3"/>
			
		</div>
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript">
			const vm = new Vue({
				el:'#demo',
				data:{
					firstName:'A',
					lastName:'B',
					fullName2:'A B'
				},
				//1.属性计算
				computed:{
					
			//1.回1
					//回调函数
					fullName1(){
						//this就是vm
						return this.firstName + ' ' + this.lastName
					},
			//1.回2
					//属性计算，利用get和set方法
					fullName3:{
						//1. 你定义的，2. 你没有调用  3 .但是执行了
						//2.什么时候调用？2.用来做什么
						//回调函数 当需要读取当前属性值时回调，根据相关的数据计算并返回当前属性的值
						get(){
							return this.firstName + ' ' + this.lastName
						},
						set(value){
							const names = value.split(' ')
							this.firstName = names[0]
							this.lastName = names[1]
						}
					}	
				},
				//2.监听属性（配置监视）firstName第一个
				watch:{
					//firstname发生了变化 value为变化的值
					firstName:function(value){
						//this就是vm
						this.fullName2 = value + ' '+ this.lastName
					}
				}
			})
			//监听
			vm.$watch('lastName',function(value){
				//更新fullName2
				this.fullName2 = this.firstName + ' ' + value
			})
			
			
		</script>
	</body>
</html>

7.vue条件渲染

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
			1.条件渲染指令
				v-if
				v-else
				v-show
			2.比较v-if与v-show
				如果频繁切换v-show比较好
		-->
		
		
		
		
		<div id="demo">
			<h3 v-if="ok">成功了啊啊啊啊</h3><!--设置一个ok变量 在管理面板m设置状态-->
			<h3 v-else>失败了</h3>
			
			
		<!--这个是比较容易频繁使用的-->
			<p v-show='ok'>表白成功</p>
			<p v-show='!ok'>表白失败</p>
		<!--给变量设置属性值就可以 ：一般为Boolean-->
		
		
			
			<button @click="ok=!ok">更新</button><!--取反操作  优化不用写属性-->
		</div>
		
		
		
		<script type="text/javascript" src="js/vue.js" ></script>
		<script type="text/javascript">
			new Vue({
				el:'#demo',
				data:{
					ok:true
				}
			})
			
			
			
			
			
		</script>	
	</body>
</html>

8.vue列表渲染

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>列表渲染 常用</title>
	</head>
	<body>
		<!--
			1.列表显示
				数组：v-for / index
				对象：v-for / key
			
			2.列表的数据更新
				删除item
				替换item
				
		-->
		<div id="demo">
			<h2>测试：v-for 遍历数组 </h2>
			<ol>
				<li v-for="(p,index) in persons" :key="index"> <!--这里是说：key为什么加冒号 就是因为  将文本变成表达式  但是为什么？？？（加不加都可以实现）-->
					{{index}}---{{p.name}}---{{p.age}}
					————><button @click="deleteP(index)">删除</button>
					————><button @click="updateP(index,{name:'zhou',age:21})">更新</button>
					<!--上面的时固定写入(index,{name:'zhou',age:21})了 也可以写入数组或者对象进行改变-->
				</li>
			</ol>
			
			
			
			
			<h2>测试：v-for 遍历对象 </h2>
			<ul>
				<li v-for="(value,key) in persons[1]" :key="key">
				{{value}}-----{{key}}<!--value:值     key:属性-->
				</li>
			</ul>
			
		</div>
		
		<script type="text/javascript" src="js/vue.js" ></script>
		<script type="text/javascript">
			//vue 本身只是监视了persons的改变，没有监视数组内部数据的改变
			//vue重写了数组中的一系列改变数组内部的方法(先调用原生，再更新界面)
			new Vue({
				el:'#demo',
				data:{
					//数组
					persons:[
					{name:'Tom',age:18},
					{name:'Ken',age:19},
					{name:'Jack',age:20},
					{name:'Rose',age:17},
					]
				},
				methods:{
					deleteP(index){
						//删除指定person数组的index中的p
						this.persons.splice(index,1);
					},
					updateP(index,newValue){
						//1.这样并没有改变persons本身，数组内部发生了变化，但并没有调用变异方法，所以vue不会更新页面
						//this.persons[index] = newValue;
						//2.可以使用重写数组的属性 让他带有绑定并且显示的属性
						this.persons.splice(index,1,newValue);//总是删除(执行)第一个 就像栈一样
					}
				}	
			})
			
			
			
			
		</script>
	</body>
</html>

9.vue增删改

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>增删改</title>
	</head>
	<body>
		<div id="demo">
			<ol>
				<li v-for="(p , index) in persons" :key="index">
				{{index}}---{{p.name}}---{{p.age}}
				————><button @click="deleteP(index)">删除</button>
				<!--不能写 会发现没有定义这个函数updateP 会出错-->
				————><button @click="updateP(index,{name:'zhou',age:21})">更新</button>
				
				————><button @click="addP(index,{name:'jia',age:222})">添加</button>
				</li>
			</ol>
		</div>
		
		<script type="text/javascript" src="js/vue.js" ></script>
		<script type="text/javascript">
			new Vue({
				el:'#demo',
				data:{
					persons:[
						{name:'Tom',age:21},
						{name:'Cot',age:22},
						{name:'Dog',age:23},
						{name:'Tom',age:24},
					]
				},
				methods:{
					deleteP(index){
						this.persons.splice(index,1);
					},
					updateP(index,newValue){
						this.persons.splice(index,1,newValue);
					},
					addP(index,newValue){
						this.persons.splice(index,0,newValue);
					}
					
				},
				
				
				
			})
			
			
			
			
		</script>
		
		
	</body>
</html>

10.vue列表的搜索和排序

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="demo">
			<input type="text" v-model="searchName"/>
			<ol>
				<li v-for="(p,index) in fliterpersons" :key="index">
					---{{p.name}}---{{p.age}}
				</li>
			</ol>
		</div>
		
		
		
		<script type="text/javascript" src="js/vue.js" ></script>
		<script type="text/javascript">
			
			new Vue({
				el:'#demo',
				data:{
					searchName:'',
					persons:[
					{name:'Jack',age:18},
					{name:'Tom',age:16},
					{name:'Bob',age:19},
					{name:'Rose',age:17},
					],
				},
				computed:{
				
					fliterpersons(){
						//取出相关数据
						//简化代码
						const {searchName,persons} = this;
						/*
						const {searchName,persons} = this; 
						上面的这句话是一个简写，最终的含义相当于
						const  searchName = this.searchName
						const  persons = this.persons
						 * */
						let fPersons;
						//let 是一个作用域块 没有变量提升 var 才有
						fPersons = persons.filter(p=>p.name.indexOf(searchName)!==-1)
						/*相当于，引入变量就可以看得懂了indexOf = function(){}
						 function(p){
						 	return p=>p.name.indexOf(searchName)!==-1;
						 }
						 * fliterpersons 的值是通过searchName 和persons动态计算出来的
						 * */
						return fPersons;
						
					}
				}
				
				
				
			})
			//这样让我想起了冒泡排序：那么如果这样的话 我的冒泡排序是不是 可以用第一个减后面的数 小于零的    就是小的数 应前面
			
			
		</script>
		
		
	</body>
</html>

11.vue列表的搜索和排序

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="demo">
			<input type="text" v-model="searchName"/>
			<ol>
				<li v-for="(p,index) in filterpersons" :key='index'>
					 ---{{p.name}}---{{p.age}}
				</li>
			</ol>
			<!--绑定点击的函数 并且传一个值-->
			<button @click="setorderType(1)">升序排序</button>
			<button @click="setorderType(2)">降序排序</button>
			<button @click="setorderType(0)">原来顺序</button>
			
			
		</div>
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript">
			new Vue({
				el:'#demo',
				data:{
					//刚开始搜索框初始值为''
					searchName:'',
					orderType:0,//0代表原本排序 , 1代表升序 ,2代表降序
					persons:[
					{name:'zhou',age:16},
					{name:'姚',age:17},
					{name:'姚明',age:15},
					{name:'姚明明',age:19},
					],
				},
				//计算属性
				computed:{
					filterpersons(){
						/*const{searchName,persons}=this;*/
						const searchName = this.searchName;
						const persons = this.persons;
						const orderType = this.orderType;
						let fPerson;
						fPerson = persons.filter(p=>p.name.indexOf(searchName)>=0)
						//indexof 是遍历索引搜索 给他限定范围就行
						/*return persons.filter(p=>p.name.indexOf(searchName)>=0)*/

						if(orderType!==0){
							//需要进行排序
							fPerson.sort(function(p1,p2){
								
								if(orderType===2){
									return p1.age-p2.age;
								}else{
									return p2.age-p1.age;
								}
								
							})
						}
						
						return fPerson;
					}
					
				},
				methods:{
					//从click传下来的setorderType方法
						setorderType(orderType){
							this.orderType = orderType;
						}
					}
			})
			
			
			
			
			
		</script>
		
		<!--
			一句话来说: key值是为了虚拟dom的比对 
			展开来说: 页面上的标签都对应具体的虚拟dom对象(虚拟dom就是js对象),
			循环中 ,如果没有唯一key , 页面上删除一条标签, 
			由于并不知道删除的是那一条! 所以要吧全部虚拟dom重新渲染, 
			如果知道key为x标签被删除掉, 只需要把渲染的dom为x的标签去掉即可! 	
		-->
		
		
		
	</body>
</html>

12.vue事件处理

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>事件处理</title>
	</head>
	<body>
		<!--
			1.绑定监听：
				v-on:xxx="fun"
				@xxx="fun"
				@xxx="fun(参数)"
				默认事件形参：event
				隐含属性对象：$event
			2.事件修饰符
			
			
		-->
		<div id="example">
			<!-- v-on: == @-->
			<h2>1. 绑定监听</h2>
			
			<button @click="test1">test1</button>
			<button @click="test2('zhouqiyong')">test2</button>
			<button @click="test3">test3</button><!--$event事件(默认了)，但是例如有多个参数的情况下 使用$event获取innerHTML里面的值-->
			<button @click="test4(123,$event)">test4</button>
			<!--$event 存在代表事件innerHTML里面的内容事件-->
			
			
			<h2>2. 事件修饰符</h2>
			<div style="width: 250px;height: 250px;background: #FF0000;" @click="test5">
			<div style="width: 150px;height: 150px;background: green;" @click.stop="test6"></div>
			<!--stop只负责停止冒泡事件-->
			</div>
			
			<a href="https://www.baidu.com"@click.prevent="test7">点击我去百度</a>
			
			
			<h2>3. 按键修饰符</h2>
			
			<!--属性keyup 按键松开显示内容-->
			<input type="text" @keyup="test8"/>
			
			
			<!--这tm也太强大了-->
			<input type="text" @keyup.13="test8"/>
			<input type="text" @keyup.enter="test8"/>
			
			
		</div>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			new Vue({
				el:'#example',
				data:{
					test1(){
						alert('test1');
					},
					test2(msg){
						alert(msg);
					},
					test3(event){
						alert(event.target.innerHTML);
					},
					test4(number,event ){
					/*alert(number , '-----' , event.target.innerHTML);*/
					alert(number + '-----' + event.target.innerHTML);
					},
					//事件修饰符
					test5(){
						//外部
						alert('out');
					},
						//内部
					test6(){
						//之前js使用的是，停止事件冒泡event.propoStop
						//现在一键解决：@click.stop="test6"
						alert('inner');
					},
					test7(){
						//之前使用js的是 event.preventDfualt阻止事件的默认行为
						//现在一键解决：@click.prevent="test7"
						alert("去百度");
					},
					//按键监听
					test8(event){
						/*if(event.keyCode===13){
							alert(event.target.value +' 键值 '+event.keyCode);
							//event.keyCode获取按键的keycode值
							//原生js的代码就是这样
						}*/
						alert(event.target.value +' 键值 '+event.keyCode);
						
					}
				}
			})
			
			
			
			
			
		</script>
		
	</body>
</html>

13.vue的表单练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>01.表单的练习</title>
	</head>
	<body>
		<div id="demo">
			<form action="../xxx" @submit.prevent="handlerSubmit">
				<span>昵称:</span>
				<input type="text" v-model="username"/><br />
				<span>昵称:</span>
				<input type="password" v-model="pwd"/><br />
				<span>性别:</span>
				<input type="radio" id="famale" value="女" v-model="sex"/>
				<label for="famale">女</label>
				<input type="radio" id="male" value="男" v-model="sex"/>
				<label for="male">男</label><br />
				
				<span>爱好:</span>
				<input type="checkbox" id="basket" value="篮球" v-model="likes"/>
				<label for="basket">篮球</label>
				<input type="checkbox" id="foot" value="足球" v-model="likes"/>
				<label for="foot">足球</label>
				<input type="checkbox" id="pingpang" value="乒乓球" v-model="likes"/>
				<label for="pingpang">乒乓球</label><br />
				
				<span>城市：</span>
				<select v-model="defaultCityid">
					<option value="">请选择</option>
					<option :value="city.id" v-for="(city,index) in allcity" v-model="allcity">{{city.name}}</option>
				</select><br />
				<span>介绍:</span>
				<textarea rows="10" v-model="information"></textarea><br />
				
				<input type="submit" value="注册"/>
			</form>
		</div>	
	</form>
		
		
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			new Vue({
				el:'#demo',
				data:{
					username:'',
					pwd:'',
					sex:'女',
					likes:['足球'],
					allcity:[{id:1,name:'北京'},{id:2,name:'上海'},{id:3,name:'广州'}],
					defaultCityid:'3',
					
					
				},
				methods:{
					handlerSubmit(){
						console.log(this.username,this.pwd,this.likes,this.allcity,this.information);
					}
				}
				
				
				
			})
			/*
			总结：
				理解：其label中的for的值是服务元素的Id，绑定指定id的元素，点击label后会激活相应的控件
				
				也就是说：没有添加for之前，我们选中复选框需要点那个框
				但是添加之后，我们选中旁边那个字，复选框也会选中。
				for关联到相关组件上了
			*/
			
		</script>
	</body>
</html>

14.vue的表单输入和绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<!--
		实现表单的自动收集
	1.使用v-model(双向数据绑定)自动收集数据:用的是v-model实现自动收集数据  然后利用ajax传到后台去
		text/textarea
		checkbox
		radio
		select	
	-->
	<body>
		<div id="demo">
			<form action="/xxx" @submit.prevent="handlerSubmit"><!--prevent取消默认行为-->
				<span>昵称</span>
				<input type="text" v-model="username"/><br>
				
				<span>密码</span>
				<input type="password" v-model="pwd"/><br>
				
				<span>性别：</span>
				<input type="radio" id="famale" value="女" v-model="sex"/>
				<lable for="famale">女</label>
				<input type="radio" id="male" value="男" v-model="sex"/>
				<lable for="male">男</label><br>
				
				<span>爱好:</span>
				<input type="checkbox" id="basket" value="basket" v-model="likes"/>
				<lable for="basket">篮球</label>
				<input type="checkbox" id="foot" value="foot" v-model="likes"/>
				<lable for="foot">足球</label>
				<input type="checkbox" id="pingpang" value="pingpang" v-model="likes"/>
				<lable for="pingpang">乒乓球</label><br/>
				
				<span>城市：</span>
				<select v-model="Cityid">
					<option value="">未选择</option>
					<!--allcity传入-->
					<!--为什么要加个:   加上冒号会首先将这个属性当作变量解析，没加冒号就直接是字符串-->
					<option :value="city.id" v-for="(city,index) in allCity">{{city.name}}</option>
				</select><br />
				
				<span>介绍:</span>
				<textarea rows="10" v-model="information"></textarea><br/><br/>
				
				<input type="submit" value="注册"/>
				<!--通过ajax手动 提交请求-->
			</form>	
		</div>
		
		<script type="text/javascript" src="js/vue.js" ></script>
		<script type="text/javascript">
			new Vue({
				el:'#demo',
				data:{
					/*
					 * 都是通过v-model自动收集数据的
					 */
					username:'',
					pwd:'',
					sex:'女',//初始化，原本默认是空的
					likes:['pingpang'],
					allCity:[{id:1,name:"北京"},{id:2,name:"上海"},{id:3,name:"广州"}],
					Cityid:'3',//初始化，原本默认是空的==>显示广州
				},
				methods:{
					handlerSubmit(){
						console.log(this.username,this.pwd,this.sex,this.likes,this.Cityid,this.information);
					}
				}
			})
			
			
			
		</script>
	</body>
</html>

15.vue的生命周期

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Vue的生命周期</title>
	</head>
	<body>
		<!--
			1.vue对象的生命周期
				a. 初始化对象显示
				   * beforCreate()
				   * created()
				   * beforeMount()
				   * mounted()
				b. 更新显示 this.xxx = value
					* beforeUpdate( 
					* updated()
				c. 销毁vue实例:vm.$destory()
					* beforeDestory()
					* destoryed()
			
			2. 常用的生命周期方法
				mounted(): 发送ajax请求，启动定时器等异步任务
				beforeDestroy(): 做收尾工作，如：清除定时器
			
			
			
			
			
			
			
			
			
			
		-->
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		<!--<div id="test">
			<button @click="BtnDestroy">点击销毁生命周期</button>
			<p v-show="isShow">尚硅谷IT教育</p>	
		</div>
			<script type="text/javascript" src="js/vue.js" ></script>
			<script type="text/javascript">
				new Vue({
					el:'#test',
					data:{
						isShow:false		
					},
					//初始化值的mounted
					//为什么使用箭头函数这里，因为在函数里面要使用isShow，箭头函数作用域可以使用
					//在这里，函数被用作参数
					mounted(){
					this.intervalId = setInterval(()=>{
						console.log("---------");
						this.isShow = !this.isShow;	
							
						},1000)
					},
					beforeDestroy(){//死亡之前调用()
						// 清除定时器
						clearInterval(this.intervalId)
						//这里有一个返回值
						
					},
					methods:{
						BtnDestroy(){
							//销毁vm对象
							this.$destroy();
						}
					}
				})
			</script>-->
		
		
		<div id="test">
			
			<button @click="BtnDestroy">点击销毁vm</button>
			
			<p v-show="isIshow">尚硅谷IT教育</p>
			
		</div>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			new Vue({
				el:'#test',
				data:{
					isIshow:true
				},
				beforeCreate(){
					console.log('beforeCreate()');
				},
				created(){
					console.log('created()');
				},
				beforeMount(){
					console.log('beforeMount()');
				},

				mounted(){//初始化显示之后立即调用
					console.log('mounted()')
				this.setIntervalId	= setInterval(()=>{
					console.log("-----------");
						this.isIshow =!this.isIshow;
						
					},1000)
					
				},
				//2. 更新显示
				beforeUpdate(){
					console.log('beforeUpdate()')
				},
				updated(){
					console.log('updated()');
				},
				
				//销毁destory
				beforeDestroy(){//遗嘱函数
					//清除定时器
					clearInterval(this.setIntervalId);
					
				},
				
				destroyed(){
					console.log('destroy()')
				},
				
				methods:{
					BtnDestroy(){
						//销毁生命周期的vm对象
						this.$destroy();
					}
				}
			})
		</script>
		
		
		
	</body>
</html>

16.vue的生命周期

17.vue生命周期练习

18.vue过渡_动画_放大缩小篇

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.wen-enter-active {
			  animation: wen-in 1s;
			}
			.wen-leave-active {
			  animation: wen-in 1s reverse;
			}
			@keyframes wen-in {
			  0% {
			    transform: scale(0);
			  }
			  50% {
			    transform: scale(1.5);
			  }
			  100% {
			    transform: scale(1);
			  } 
			}
		</style>
	</head>
	<body>
		<div id="example-2">
			  <button @click="show = !show">Toggle show</button>
			  <transition name="wen">
			    <p v-show="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.</p>
			  </transition>
		</div>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			
			new Vue({
			  el: '#example-2',
			  data: {
			    show: true
			  }
			})
		</script>
		
	</body>
</html>

19.vue过渡与动画

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>过渡与动画</title>
		<style type="text/css">
			/*
			 总结：vue是通过搬运css来事项动画效果的
			 * 
			 */
			/*显示和隐藏的过渡效果*/
			.xxx-enter-active, .xxx-leave-active{
				transition: opacity 1s;
			}
			/*隐藏*/
			.xxx-enter, .xxx-leave-to{
				opacity: 0;
			}
			
		/*第二种效果；过渡加平移*/
			/*位移效果！！！*/
			.move-enter-active{
				transition: all 1s
			}
			.move-leave-active{
				transition: all 3s
			}
			/*隐藏时的样式*/
			.move-enter, .move-leave-to{
				opacity: 0;
				transform: translateY(-20px)
			}
			
			
			
			
			/*文字向放大缩小*/
			/*然后：bounce-in动画名称加效果*/
			.wen-enter-active{
				animation: bounce-in 1s;
			}
			/*效果反转*/
			.wen-leave-active{
				animation: bounce-in 1s reverse;
			}
			/*放大缩小的效果：@keyframes 动画名称*/
			/*这个比例是将时间分割，然后出效果*/
			@keyframes bounce-in {
			  0% {
			    transform: scale(0);
			  }
			  50% {
			    transform: scale(1.5);
			  }
			  100% {
			    transform: scale(1);
			  }
			}
		
		</style>
		
		
	</head>
	<body>
		<!--
			1. vue动画的理解
				操作css的transition或anmiation
				vue会给目标元素添加、移除特定的class
			2. 基本过渡动画的编码
				a. 在目标元素外包裹<transition name='xxx'>
				b. 定义class
					1.指定过渡样式:transition
					2.指定隐藏的样式:opacity/其他
			3. 过渡的类名
				xxx-enter-active：指定显示的transition
				xxx-Leave-active：指定隐藏的transition
				xxx-enter：指定隐藏时的样式
			
			
			
			
		-->
		<div id="test1">
			
			<button @click="isShow =!isShow">点击切换</button>
			<transition name="xxx"><!--name的唯一性-->
			<p v-show="isShow">hello</p>
			</transition>
		</div>
		
			<!--
				加上位移 transform
			-->
		<div id="test2">
			<button @click="isShow =!isShow">点击切换</button>
			<transition name="move">
			<p v-show="isShow">hello</p>
			</transition>
		</div>
		
		<!--文字向Z轴平移-->
		<div id="test3">
			<button @click="isShow =!isShow">点击切换</button><br>
			<transition name="wen">
			<p v-if="isShow" style="background: red; display: inline-block;">在 CSS 过渡和动画</p>
			</transition>
		</div>
		
		
		
		
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">

			new Vue({
				el:'#test1',
				data:{
					isShow:true
				}
			})
			new Vue({
				el:'#test2',
				data:{
					isShow:true
				}
			})
			new Vue({
				el:'#test3',
				data:{
					isShow:true
				}
			})
			
		</script>
		<!--
			总结：基本动画过渡的流程
				1. 在目标元素外包裹<transition name="xxx"></transition>
				2. 定义class样式
						指定的过渡样式：transition
						指定的隐藏样式：opacity/其他
			
		-->
		
		
		
	</body>
</html>

20.vue过滤格式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>时间过滤格式</title>
	</head>
	<body>
		<div id="test">
			<h2>显示格式化的日期时间</h2>
			<p>初始化版本：{{date}}</p>
			
			<!--{{我的日期  |}}-->
			<p>完整版:{{date | dateString}}</p>
			<p>年月日:{{date | dateString('YYYY-MM-DD')}}</p><!--指定格式-->
			<p>时分秒:{{date | dateString('HH:mm:ss')}}</p>
			
			
		</div>
		<!--引入moment.js库-->
		<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/1.0.0/moment.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="js/vue.js" ></script>
		<script type="text/javascript">
			//引入一个一个概念：函数对象
			//Vue在这里作为一个对象，但是它本身就是一个函数，现在作为对象调用filter方法('过滤器名称',函数(值，值，...))
			
			// 然后每个过滤器都有一个处理函数，当date传进来，return就会得出一个新的结果传出去
			Vue.filter('dateString',function(value,format){
				//  ||当是format格式的时候就传原本的，如果不是原来的格式那就：'YYYY-MM-DD HH:mm:ss'
				return moment(value).format(format || 'YYYY-MM-DD HH:mm:ss')
			})
			new Vue({
				el:'#test',
				data:{
					date: new Date()//时间函数
				}
				
				
				
				
				
				
			})
			
			
		</script>
		
		
		
	</body>
</html>

21.vue的时间过滤格式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="test">
			<h2>时间格式的过渡</h2>
			<p>标准计算机格式：{{date}} </p>
			<p>完整格式：{{date | dateString}}</p>
			<p>年月日格式：{{date | dateString('YYYY-MM-DD')}}</p>
			<p>时间格式：{{date | dateString('HH-mm-ss')}}</p>
			
		</div>
		<script type="text/javascript" src="js/vue.js" ></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/1.0.0/moment.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			
			//传值进行格式化
			//2.es6的格式也可以传：这个叫形参默认值
			//Vue.filter('dateString',function(value,format='YYYY-MM-DD HH:mm:ss'){return moment(value).format(format)}
			Vue.filter('dateString',function(value,format){
				return moment(value).format(format || 'YYYY-MM-DD HH:mm:ss')
				
			})
			
			new Vue({
				el:'#test',
				data:{
					date: new Date()
				}
				
				
				
				
				
			})
			
			
		</script>
		
		
		
		
		
	</body>
</html>

22.vue内置指令练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--指令名不包括v-，调用的时候才可以使用-->
		<!--
			1. 注册全局指令(指令名，处理函数(标签el名,))
				Vue.directive('my-directive',function(el,binding){
					el.innerHTML = binding.value.toUpperCase()
				})
			2. 注册局部指令
				directives :{
					'my-directive':{
						bind(el,binding){
							el.innerHTML = binding.value.toLowerCase()
						}
					}
					
				}
			3. 使用指令
				v-my-directive='xxx'
			
			4. 需求:自定义2个指令
				1. 功能类型于v-text，但转化为全大写
				2. 功能类型于v-text，但转化为全小写
			
			
		-->
		
		<div id="test1">
			
			<p v-upper-text="msg1"></p>
			<p v-lower-text="msg1"></p>
		</div>
		
		<div id="test2">
			<p v-upper-text="msg2"></p>
			<p v-lower-text="msg2"></p>
		</div>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//编写指令(全局指令)
			Vue.directive('upper-text',function(el,binding){
				el.textContent = binding.value.toUpperCase();
				
			})

			
			new Vue({
				el:'#test1',
				data:{
					msg1:'zhou qi yong'
				},
				//局部指令
				directives :{
					'lower-text':{
						bind(el,binding){
							el.innerHTML = binding.value.toLowerCase()
						}
					}
					
				}
					
			})
			new Vue({
				el:'#test2',
				data:{
					msg2:'JUST do it'
				}
			})
			
			
			
			
		</script>
	</body>
</html>

23.vue指令_内置_外置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>指令</title>
		<style type="text/css">
			/*属性选择器，刚刚出现的时候选择隐藏{{msg}}，要显示的时候才显示出来就行*/
			[v-cloak]{
				display: none;
			}
		</style>
	</head>
	<body>
		<!--熟记与心-->
		<!--
		常用的内置指令：
			v-text：更新元素的textContent
			v-html：更新元素 innerHTML
			v-if： 如果为true， 当前标签才会输出到页面
			v-else：如果为false，当前标签才会输出的到页面
			v-show： 通过控制dispaly样式来控制显示/隐藏
			v-for：遍历数组/对象
			v-on：绑定事件监听，一般简写为@
			v-bind：双向数据绑定
			ref：为某个元素注册一个唯一标识，vue对象通过$els属性访问这个元素对象
			v-cloak：使用它防止闪现表达式，与class配合：[v-cloak]{dispaly:none}
			v-molde：自动收集数据
			
			
			
			
			
			
		-->
		<div id="demo">
			<p ref="content">atguigu.com</p>
			<button @click="hint">提示</button>
			<!--数据存在本地，所以就会加载出来，但是如果在加载之前就使用，那么，使用后就不会出现-->
			<p v-cloak>{{msg}}</p>
			
			
		</div>
		
		
		
		
		
		<script type="text/javascript" src="js/vue.js" ></script>
		<script type="text/javascript">
			alert("0000")
			new Vue({
				el:'#demo',
				data:{
					msg:'尚硅谷'
				},
				methods:{
					hint(){
						//使用语法格式也要注意
						alert(this.$refs.content.textContent)
					}
				}
				
				
				
			})
			
			
			
		</script>
		
		
		
		
		
		
	</body>
</html>

24.vue外置指令

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>指令_自定义指令</title>
	</head>
	<body>
		<!--指令名不包括v-，调用的时候才可以使用-->
		<!--
			1. 注册全局指令(指令名，处理函数(标签el名,))
				Vue.directive('my-directive',function(el,binding){
					el.innerHTML = binding.value.toUpperCase()
				})
			2. 注册局部指令
				directives :{
					'my-directive':{
						bind(el,binding){
							el.innerHTML = binding.value.toLowerCase()
						}
					}
					
				}
			3. 使用指令
				v-my-directive='xxx'
			
			4. 需求:自定义2个指令
				1. 功能类型于v-text，但转化为全大写
				2. 功能类型于v-text，但转化为全小写
			
			
		-->
		<div id="test1">
			
			<p v-upper-text="msg1"></p>
			<p v-lower-text="msg1"></p>
			
		</div>
		<div id="test2">
			
			<p v-upper-text="msg2"></p>
			<p v-lower-text="msg2"></p>
			
		</div>
		

		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			/*全局指令*/
			Vue.directive('upper-text',function(el,binding){
				//toupperCase()出错 u应该是U大写才对
				el.textContent = binding.value.toUpperCase()
			})
			new Vue({
				el:'#test1',
				data:{
					msg1:'zhou qi YONG'
				},
				directives:{
					'lower-text':{
						bind(el,binding){
							el.innerHTML = binding.value.toLowerCase();
						}
					}
				}
			})
			
			new Vue({
				el:'#test2',
				data:{
					
					msg2:'JUST do it'
					
				}
			})
			
			
		</script>
		
		
		
		
	</body>
</html>

vue脚手架的搭建

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
			1.网上下载模版项目(网址：)，脚手架(相当于一个vue库)
			
			创建vue项目
			npm install -g vue-cli
			vue init webpack vue_demo
			cd vue_demo
			npm install
			npm run dev
			访问 http://localhost:8080/
			
			脚手架项目我转移到VScode上面了，转移战场——————————————————————>
		-->
	</body>
</html>

目录说明

2.build

3.config

小周日记

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
01.Vue的学习

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档目录1.什么是Vue2.vue的实现原理3.vue的语法4.vue的计算属性和监视5.vue的class和style的绑定6.vue的练习7.vue条件渲染8.vue列表渲染9.vue增删改10.vue列表的搜索和排序11.vue列表的搜索和排序12.vue事件处理13.vue的表单练习14.vue的表单输入和绑定15.vue的生命周期16.vue的生命周期17.vue生命
复制链接

扫一扫

专栏目录