Vue学习

最新推荐文章于 2023-04-13 16:49:47 发布

Bango123

最新推荐文章于 2023-04-13 16:49:47 发布

阅读量838

点赞数 1

文章标签：腾讯云服务器阿里云

本文链接：https://blog.csdn.net/Bango123/article/details/121488609

版权

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>

Bango123

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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/v
复制链接

扫一扫