Vue学习

VUE学习

一、开始

1、导入Vue.js

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

2、使用

<body>
	<div id="app">
		{{message}}
	</div>	
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
	var vm = new Vue({
		el:"#app",
		data:{
			message:"hello"
		}
	});
</script>

el:元素

data:数据使用方法为— {{字段名}}

v-bind:title="message"

v-bind开头的被称为指令。

会在dom上应用特殊的响应式行为

二、判断-循环(显示)

1、判断
<h1 v-if="ok">YES</h1>
<h1 v-else="ok">No</h1>
<!--ok这个属性为布尔值-->

<!--在标签中进行判断-->
<h1 v-if="socre==='A'">A</h1>
<h1 v-else-if="socre==='B'">B</h1>
<h1 v-else>C</h1>
2、循环

使用

<!--使用v-for="(参数1,参数2) in 数组"-->
<li v-for="info in list">
		{{info.message}}
</li>

vue代码

var vm = new Vue({
	el:"#app",
	data:{
		list:[
			{message: '运维'},
			{message: '后端'},
			{message: '前端'},
		]
	}
});

三、事件

1、v-on

该指令可以监听dom事件

<button v-on:click="hello">点我</button>
methods: {
	hello: function(){
		alert(this.message);
	}
},

vue中方法定义在methods中

2、双向绑定

在标签中引用 v-model=“字段名” 绑定字段

输入文本:<input type="text" v-model="message" />{{message}}

var vm = new Vue({
			el:"#app",
			data:{
				message:"22"
			}
		});

<!--多行文本输入框-->
<textarea rows="10" cols="30" v-model="message"></textarea>{{message}}

<!--单选框-->
性别:<input type="radio" name="sex" id="boy" value="" v-model="checked" /><input type="radio" name="sex" id="girl" value="" v-model="checked" /><p>
	选中了: {{checked}}
</p>
<!-- 下拉框 -->
	<select name="zm" v-model="checked">
		<option value ="A" >A</option>
		<option value ="B" >B</option>
		<option value ="C" >C</option>
		<option value ="D" >D</option>
	</select>
	选择了:{{checked}}

四、组件

1、主要属性

props:接收参数

template:模板

定义:自定义标签

Vue.component("bango",{
	template: '<span>hello</span>'
});

使用bango标签即可获取模板内容

**作用:**方便复用

例子:
//定义自定义标签的模板,使用props来获取值
Vue.component("bango",{
			props: ['kc'],
			template: '<li>{{kc}}</li>'
		});
//设置data的值
var vm = new Vue({
	el:"#app",
	data:{
		list: [
			"java","Python","C++"
		]
	},
});

使用:

<bango v-for=" info in list" v-bind:kc="info"></bango>
<!--v-bind:后面接的是props绑定的参数名,双引号中为遍历出来的参数名称-->

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-i33q71S1-1637636269039)(C:\Users\AOC\AppData\Roaming\Typora\typora-user-images\image-20211119165815853.png)]

3、vue的生命周期

Vue 实例生命周期

钩子函数:

在流程中间的某个过程前后执行一个操作,

beforeCreat,created,beforeMount,mounted,updated,beforeDestroy,destroyed

五、Axios请求

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

链式编程,ES6

axios.get('./data.json').then(response=>(console.log(response.data)));

在data()方法中使用return来获取数据

var vm = new Vue({ 	
			el: "#vue",
			data(){

				return{
					//请求的返回参数格式和json字符串一样
					info: {
						name: null,
						address: {
							street: null,
							city: null,
							country: null
						},
						links: [],
					}
				}
			},
			//钩子函数
			mounted(){
				axios.get('./data.json').then(response=>(this.info=response.data));
			}
		});

在html中使用v-bind来获取数据

六、计算属性

虚拟dom,放在内存中。

与methods相似,methods和computed重名优先使用methods中的方法,

methods: {
	currentTime1: function(){
   		return Date.now();
	}
},
//计算属性---缓存
computed: {
	currentTime2: function(){
   	 return Date.now();
	}
}
<!--methods调用为方法,computed为属性调用-->
<p>{{currentTime1()}}</p>
<p>{{currentTime2}}</p>

七、插槽

//slot插槽
Vue.component("todo",{
    template: '<div><slot name="todo-title"></slot><ul><slot name="todo-items"></slot></ul></div>'
});
//标题
Vue.component("todo-title",{
    props:['title'],
    template:'<div>{{title}}</div>'
});
//列表内容
Vue.component("todo-items",{
    props:['item'],
    template:'<li>{{item}}</li>'
});
<todo>
    <todo-title slot="todo-title" :title="title"></todo-title>
    <todo-items slot="todo-items" v-for="info in todoItems" :item="info"></todo-items>
    <slot></slot>
</todo>

插槽的使用为了使数据动态增加

八、自定义事件–参数分发

组件内部调用方法

//列表内容
Vue.component("todo-items",{
    props:['item'],
    template:'<li>{{item}}&nbsp<button @click="remove()">删除</button></li>',
    methods: {
        remove: function(){
            alert('确定要删除吗?');
        }
    }
});

在组件的标签中定义方法并在模板中使用

使用this.$emit(‘自定义事件’,参数)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n4Kc0Kaq-1637636269043)(C:\Users\30583\AppData\Roaming\Typora\typora-user-images\image-20211123105422388.png)]

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>VUE3</title>
	</head>
	
	<body>
		
		<div id="app">
			
			<todo>
				<todo-title slot="todo-title" :title="title"></todo-title>
				<todo-items slot="todo-items" v-for="(info,index) in todoItems" 
					:item="info" :index="index" @remove="removeItems(index)" ></todo-items>
				<slot></slot>
			</todo>
		
		</div>
		
			
	</body>
	<script src="js/vue.js"></script>
	<script>
		//slot插槽
		Vue.component("todo",{
			template: '<div><slot name="todo-title"></slot><ul><slot name="todo-items"></slot></ul></div>'
		});
		//标题
		Vue.component("todo-title",{
			props:['title'],
			template:'<div>{{title}}</div>'
		});
		//列表内容
		Vue.component("todo-items",{
			props:['item','index'],
			template:'<li>{{index}}---{{item}}&nbsp<button @click="remove()">删除</button></li>',
			methods: {
				remove: function(index){
					this.$emit('remove',index);
				}
			}
		});
		var vue = new Vue({
			
			el: "#app",
			data: {
				title:"标题123",
				todoItems:['Java','Python','前端']
			},
			methods: {
				removeItems: function(index){
					console.log("删除了"+this.todoItems[index]+"...OK")
						this.todoItems.splice(index,1);//一次删除一个
				}
			}
		});
	</script>
</html>

				this.$emit('remove',index);
			}
		}
	});
	var vue = new Vue({
		
		el: "#app",
		data: {
			title:"标题123",
			todoItems:['Java','Python','前端']
		},
		methods: {
			removeItems: function(index){
				console.log("删除了"+this.todoItems[index]+"...OK")
					this.todoItems.splice(index,1);//一次删除一个
			}
		}
	});
</script>

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值