Vue从入门到入门

Xu_sa_sa

已于 2023-02-07 13:39:09 修改

阅读量278

点赞数

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

于 2023-02-03 10:09:21 首次发布

本文链接：https://blog.youkuaiyun.com/Xu_sa_sa/article/details/128819594

版权

vue 同时被 2 个专栏收录

2 篇文章

订阅专栏

html

2 篇文章

订阅专栏

开发软件 HbuilderX，html格式，引入vue.js，暂时不用cil

Hello World

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			{{message}}
		</div>
		<script type="text/javascript"">
			new Vue({
				el: '#app',
				data:{message:'hello'} //data中用于存储数据，数据仅供el所指的容器使用
			}
			);
		</script>
	</body>
</html>

class同. id用#

一个vue实例只能被一个容器接管

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="app">
			{{message}}
		</div>
		<script type="text/javascript"">
			new Vue({
				el: '.app',
				data:{message:'hello'} //data中用于存储数据，数据仅供el所指的容器使用
			}
			);
		</script>
	</body>
</html>

链接

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id ="app">
			<a v-bind:href="url">点击跳转</a> <!-- v-bind==>: -->
			<!-- <a :href="url">点击跳转</a> -->
		</div>
		<script type="text/javascript"">
			new Vue({
				el: '#app',
				data:{
					url: 'https://www.bilibili.com/',
					} 				
				}
			);
		</script>
	</body>
</html>

单双向数据绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id ="app">
			单向数据绑定：<input type="text" v-bind:value = "name"><br/>
			双向数据绑定：<input type="text" v-model:value = "name"><br/><!-- v-model:value可简写为v-model，因为默认收集value值 -->
            简写单向数据绑定：<input type="text" :value = "name"><br/>
			简写双向数据绑定：<input type="text" v-model = "name"><br/>            
            <!-- 以下h2是错误语法 v-model只能用于表单类元素上（输入类元素） -->
			<h2 v-model:x="name">hello</h2>
		</div>
		<script type="text/javascript"">
			new Vue({
				el: '#app',
				data:{name:'yyqx'} 				
				}
			)
		</script>
	</body>
</html>

数据代理 Object.definProperty

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<script type="text/javascript"">
			let number = 18
			let person = {
				name:"yyqx",
				sex:"man",
			}
			
			Object.defineProperty(person,'age',{
				// value:20,
				// enumerable:true,//控制属性是否可以枚举，默认false
				// writable:true,//控制属性是否可以修改，默认false
				
				//当有人读取person的age属性时，get函数（geter）就会被调用。且会收到修改的具体值
				get(){
					console.log('有人读取age属性时')
					return number
				},
				//当有人修改person的age属性时，set函数（seter）就会被调用。且会收到修改的具体值
				set(value){
					console.log('有人修改age属性,修改值为', value)
					number = value
				}
			})
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<script type="text/javascript">
			let obj = {x:100}
			let obj2 = {y:200}
			
			Object.defineProperty(obj2,'x',{
				get(){
					return obj.x
				},
				set(value){
					obj.x = value
				}
			})
		</script>
	</body>
</html>

事件处理

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id = "root">
			<h2>cjgj18楼欢迎你，请选择你要养成的练习生 {{ name }}</h2>
			<button @click ="show1" >点我提示信息1</button>
			<button @click ="show2($event,66)" >点我提示信息2</button>
		</div>
	</body>
	<script type="text/javascript">
		const vm = new Vue({
			el: "#root",
			data:{
				name:"tfboys",
			},
			methods:{
				show1(event){
					alert('TNT')
					name = "TNT"
				},
				show2(event,number){
					alert('TF Family'+number)
					name = "TF Family"
				}
			}
		})		
	</script>
</html>

事件修饰符

1、prevent：阻止默认事件（常用）

2、stop：阻止事件冒泡（常用）

3、once：事件只触发一次（常用）

4、capture：使用事件的捕获模式

5、self：只有event.target是当前操作的元素才触发事件

6、passive：事件的默认行为立即执行，无需等待事件回调执行完毕

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
		<style>
			*{
				margin-top: 20px;
			}
			.demo1{
				height: 50px;
				background-color: blue;
			}
			.box1{
				padding: 5px;
				background-color: aquamarine;
			}
			.box2{
				padding: 5px;
				background-color: forestgreen;
			}
			.list{
				width: 200px;
				height: 200px;
				background-color: cornflowerblue;
				overflow: auto;/* 滚动 */
			}
				
			li{
				height: 100px;				
			}
		</style>
	</head>
	<body>
		<div id = "root">
			<a href="www.baidu.com" @click.prevent="show1">点我提示信息1</a><!-- 阻止a标签跳转网页的事件 -->
			<div class="demo1" @click = "show1">
				<button @click.stop = 'show1'>点我提示信息2</button> <!-- 阻止div和button同时弹框的冒泡事件 -->
			</div>
			<button @click.once = 'show1'>点我提示信息3</button><!-- 事件只触发一次 -->
			<div class="box1" @click.capture = "show2(1)"><!-- 先捕获后冒泡，在box2执行时先执行box1 -->
				div1
				<div class="box2" @click = "show2(2)">
					div2
				</div>
			</div>
			<div class="demo1" @click.self = "show1"><!-- 阻止下行点击button后冒泡事件触发div的click -->
				<button @click = 'show1'>点我提示信息4</button>
			</div>
			
			<!-- <ul @scroll="demo" class = "list"> -->
			<!-- scroll到底后就无法继续触发，wheel滚动到到底后仍会执行
				scoll可以滚轮+鼠标拖曳触发,wheel只能滚轮触发 -->
			<ul @wheel.passive="demo" class = "list"><!-- 先执行滚这个操作，在完成demo方法 -->
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		const vm = new Vue({
			el: "#root",
			data:{
				name:"tfboys",
			},
			methods:{
				show1(event){
					alert('TNT')
					name = "TNT"
				},
				show2(msg){
					alert('tf family '+msg)
				},
				demo(){
					for(let i =1; i<100000; i++){
						console.log('###')
					}
					console.log('OK')
					
				}
			}
		})		
	</script>
</html>

键盘事件

常用的按键别名：
回车==>enter 删除==>delete 退出==>esc 空格==>space 换行==> tab（特殊配合keydown使用）

上==>up 下==>down 左l==>eft 右==>rigrh

其余不常见的可以调用console.log(e.key, e.keyCode)运行查看。注意vue写法均为小写且较复杂的用-连接，如CapsLock写成@keyup。caps-lock

尽量使用编码，不推荐使用编码。

自定义编码Vue.config.keyCodes.huiche = 13

class与style的绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
		<style>
			.basic{
				height: 100px;
				width: 400px;
				border: 1px solid black;
			}
			.happy{
				background-color: orange;
			}
			.sad{
				background-color: cadetblue;
			}
			.normal{
				background-color: mistyrose;
			}
			.s1{
				/* 省略 */
			}
			.s2{
				/* 省略 */
			}
			.s3{
				/* 省略 */
			}
			
		</style>
	</head>
	<body>
		<div id = "root">
			<!-- 绑定class样式——字符串写法，适用于样式类名不确定需要动态指定的情况 -->
			<div class="basic":class='mood' @click = 'changeMood'>{{name}}</div><br/>
			<!-- 绑定class样式——数组写法，适用于要绑定的样式个数不确定、名字也不确定 -->
			<div class="basic":claaa = 'classarr'>{{name}}</div><br/><br/>
			<!-- 绑定class——对象写法，适用于要绑定的样式个数不确定、名字不确定，但是要动态决定用不用 -->
			<div class="basic":class = 'classobj'>{{name}}</div><br/><br/>
			
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:'#root',
			data:{
				name:'cjgj',
				mood:"happy",
				classarr:['s1','s2','s3'],
				classobj:{
					s1:true,
					s2:true,
					s3:false
				}
				
			},
			methods: {
				changeMood() {
					const arr = ['happy','sad','s1']
					const index = Math.floor(Math.random()*2)
					this.mood = arr[index] //随机使用样式
				}
			},
		})
	</script>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
		<style>
			.basic{
				height: 100px;
				width: 400px;
				border: 1px solid black;
			}
		</style>
	</head>
	<body>
		<div id = "root">
			<!-- <div class="basic" style="font-size: 40px;">{{name}}</div> -->
			<div class="basic":style="styleObj">{{name}}</div>
			
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:'#root',
			data:{
				name:'cjgj',
				styleObj:{
					fontSize: '20px',
					color:'red',
				}				
			},
		})
	</script>
</html>

条件渲染

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>条件渲染</title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id = "root">
			<!-- 使用v-show做条件渲染 bool和表达式均可，结构还在-->
			<h2 v-show="false">欢迎来到{{name}}</h2>
			<h2 v-show="1===1">欢迎来到{{name}}</h2>
			<!-- 使用v-if做条件渲染,html中结构消失 -->
			<h2 v-if="false">欢迎来到{{name}}</h2>
			<h2 v-if="1===1">欢迎来到{{name}}</h2>
			<!-- 若切换频率高建议使用v-show -->
			<h2>当前的n的值是{{n}}</h2>
			<button @click = 'n++'>点我+1</button>
			<div v-show = 'n===1'>n的值为1</div>
			<div v-show = 'n===2'>n的值为2</div>
			<div v-show = 'n===3'>n的值为3</div>
			
			<!-- v-if必须是最开始使用，且不能被打断 -->
			<div v-if = 'n===1'>if:n的值为1</div>
			<div v-else-if = 'n===2'>elif:n的值为2</div>
			<div v-else>else:n的值为4</div>
			
			<!-- <div v-if =='n===1'> -->
			<!-- template为模板，不改变原本的结构，template只能和v-if用，不能和v-show匹配使用 -->
			<template v-if="n===1">
				<h2>1</h2>
				<h2>2</h2>
				<h2>3</h2>
			</template>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:'#root',
			data:{
				name:'cjgj',
				n:0
			}				
		})
	</script>
</html>

列表渲染

基础用法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>条件渲染</title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id = "root">
			<!-- 遍历数组 -->
			<h2>人员列表</h2>
			<ul>
				<li v-for='(p, index) in personArr' :key="index">
					{{p.name}}-{{p.age}}
				</li>				
			</ul>
			<!-- 遍历对象 -->
			<h2>车辆信息</h2>
			<ul>
				<li v-for="(a,b) in car">
					{{a}}--{{b}}
				</li>
			</ul>
			<!-- 遍历字符串(用的少) -->
			<h2>字符串</h2>
			<ul>
				<li v-for='(char, index) in str' :key='index'>
					{{index}}--{{char}}					
				</li>
			</ul>
			<!-- 遍历指定次数(用的少) -->
			<h2>遍历次数</h2>
			<ul>
				<li v-for='(number, index) in 5' :key='index'>
					{{number}}--{{index}}
				</li>
				
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:'#root',
			data:{
				personArr:[
					{id:'001', name:'aaa', age:18},
					{id:'002', name:'bbb', age:19},
					{id:'003', name:'ccc', age:17},
				],
				car:{
					name:'lixiang',
					price:'25w',
					color:'white'
				},
				str:'Jackson'
			}				
		})
	</script>
</html>

数据仅用于展示 key用index或id均无影响，若需要对数字进行操作（增删）建议使用数组id

列表过滤

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>条件渲染</title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id = "root">
			<h2>人员列表</h2>
			<input type='text' placeholder="请输入人名" v-model='keyword'/><!-- 收集用户输入 -->
			<ul>
				<li v-for='(p, index) in filpersonArr' :key="index"> 
					{{p.name}}-{{p.age}}-{{p.sex}}
				</li>				
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		//用watch实现
		new Vue({
			el:'#root',
			data:{
				keyword:'',
				personArr:[ 
					{id:'001', name:'王俊凯', age:24, sex:'man'},
					{id:'002', name:'张峻豪', age:15, sex:'man'},
					{id:'003', name:'贺峻霖', age:10, sex:'man'},
					{id:'004', name:'王源', age:23, sex:'man'},
					{id:'005', name:'张真源', age:23, sex:'man'}
				],
				//过滤后的数组
				filpersonArr:[]
			},
			watch: {
				keyword:{
					immediate:true,
					handler(newValue) {
						this.filpersonArr = this.personArr.filter((p)=>{
							return p.name.indexOf(newValue) !==-1
						})
					}
				}				
			}
		})
		//用watch实现
		
		//用computed实现
		new Vue({
			el:'#root',
			data:{
				keyword:'',
				personArr:[ 
					{id:'001', name:'王俊凯', age:24, sex:'man'},
					{id:'002', name:'张峻豪', age:15, sex:'man'},
					{id:'003', name:'贺峻霖', age:10, sex:'man'},
					{id:'004', name:'王源', age:23, sex:'man'},
					{id:'005', name:'张真源', age:23, sex:'man'}
				],
				//过滤后的数组
			},
			computed: {
				filpersonArr() {
					return this.personArr.filter((p)=>{
						return p.name.indexOf(this.keyword) !==-1
					})
				}
			},
		})
		//用computed实现
	</script>
</html>

列表排序

自己先写了一个

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>条件渲染</title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id = "root">
			<h2>人员列表</h2>
			<input type='text' placeholder="请输入人名" v-model='keyword'/><!-- 收集用户输入 -->
			<button @click='ascending'>年龄升序</button>
			<button @click='descending'>年龄降序</button>
			<button @click='original'>原始顺序</button>
			<ul>
				<li v-for='(p, index) in filpersonArr' :key="index"> 
					{{p.name}}-{{p.age}}-{{p.sex}}
				</li>				
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:'#root',
			data:{
				keyword:'',
				personArr:[ 
					{id:'001', name:'王俊凯', age:24, sex:'man'},
					{id:'002', name:'张峻豪', age:15, sex:'man'},
					{id:'003', name:'贺峻霖', age:20, sex:'man'},
					{id:'004', name:'王源', age:23, sex:'man'},
					{id:'005', name:'张真源', age:21, sex:'man'}
				],
				filpersonArr:[],
			},
			methods: {
				descending() {
					this.filpersonArr.sort((a,b)=>{
						return b.age-a.age
					})
				},
				ascending(){
					this.filpersonArr.sort((a,b)=>{
						return a.age-b.age
					})
				},
				original(){
					this.filpersonArr = this.personArr
				}				
			},	
			watch: {
				keyword:{
					immediate:true,
					handler(newValue) {
						this.filpersonArr = this.personArr.filter((p)=>{
							return p.name.indexOf(newValue) !==-1
						})
					}
				}				
			}
		})
	</script>
</html>

computed写法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>条件渲染</title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id = "root">
			<h2>人员列表</h2>
			<input type='text' placeholder="请输入人名" v-model='keyword'/><!-- 收集用户输入 -->
			<button @click='sorttype=0'>年龄升序</button>
			<button @click='sorttype=1'>年龄降序</button>
			<button @click='sorttype=2'>默认顺序</button>
			<ul>
				<li v-for='(p, index) in filpersonArr' :key="index"> 
					{{p.name}}-{{p.age}}-{{p.sex}}
				</li>				
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:'#root',
			data:{
				keyword:'',
				sorttype:2,//0代表升序，1代表降序，2代表原顺序
				personArr:[ 
					{id:'001', name:'王俊凯', age:24, sex:'man'},
					{id:'002', name:'张峻豪', age:15, sex:'man'},
					{id:'003', name:'贺峻霖', age:20, sex:'man'},
					{id:'004', name:'王源', age:23, sex:'man'},
					{id:'005', name:'张真源', age:21, sex:'man'}
				],
			},
			computed: {
				filpersonArr() {
					const arr = this.personArr.filter((p)=>{
						return p.name.indexOf(this.keyword) !== -1
					})
					if(this.sorttype!=2){
						arr.sort((a,b)=>{
							return this.sorttype==0? a.age-b.age : b.age-a.age
						})
					}
					return arr
				}
			},	
		})
		
	</script>
</html>

to be continue......