Vue学习

本文主要是介绍Vue学习，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一、vue:是可以自低向上逐层应用。只关注视图层。
二、使用：<div id="app">
			{{message}}
			var app=new Vue({
			el:'#app',
			data:{
			message:'hello,vue'
		}
})
三、基本语法：v-if
		<span v-if="stu.sernum=='1222'">男</span>
		data:{
		stu:{
		sernum:"1222",
		setage:"12",
}
}```
v-for:
		<span v-for:"s ,index in Stus">
					<td>s.name</td>
					<td>s.age</td>
					data:{
			Stus:[

		name:'zx',
		age:'21'
]
}
三、基本属性v-bind,简写：
		3.1<input type="text"  v-bind=:value="str">
				data{
				str:"从前有座山",
}
		3.2双向绑定v-model
			
四、Vue实例的声明周期：
		每个使用Vue进行数据渲染的网页文档都需要创建一个Vue实例。
		4.1Vue实例的生命周期：
				**1.创建vue实例(初始化data,加载el)**
				   2.数据渲染(将vue实例data中的数据渲染到网页html中)
				   3.重新渲染(vue中的data数据发生变化，会重新渲染到html页面)
				   4.销毁实例**
	
		4.2钩子函数：为了便于开发者在vue实例生命周期的不同阶段进行特定的操作，vue在生命周期四个阶段的前后分别提供了一个函数，这个函数不需要调用，当vue实例达到生命周期的指定阶段会自动调用对应的函数。所以有8个函数 v-once表达只会渲染一次，之后不会再改变。这8个函数也就是说针对的是data和el，加载后之间进行执行，data在el之前。
		beforeCreate:function(){
					//1.data初始化之前执行，不能操作data
				},
				created:function(){
					//2.data初始化之后执行，模板加载之前，可以修改/获取data中的值
					console.log(this.str);
					//this.str = "山里有座庙";
				},
				beforeMount:function(){
					//3.模板加载之后，数据初始渲染（挂载）之前，可以修改/获取data中的值
					//this.str = "庙里有口井";
				},
				mounted:function(){
					//4.数据初始渲染（挂载）之后，可以对data中的变量进行修改，但是不会影响v-once的渲染
					//this.str = "井里有只蛙";
				},
				beforeUpdate:function(){
					//5.数据渲染之后，当data中的数据发生变化触发重新渲染，渲染之前执行此函数
					//  data数据被修改之后，重新渲染到页面之前
					console.log("-----"+this.str);
					this.str = "从前有座山2";
				},
				updated:function(){
					//6.data数据被修改之后，重新渲染到页面之后
					//this.str = "从前有座山3";
				},
				beforeDestroy:function(){
					//7.实例销毁之前
				},
				destroyed:function(){}
	五、计算属性：data中的属性可以通过声明获取，也可以通过computed计算获得:
		<h1>{{str3}}</h1>
			data:{
						str1:"hello",
					  str2:"xixi",
					},
					computed:{
						str3:function(){
							return this.str1+this.str2;
						}
					}
		5.1侦听器：就是data中属性的侦听器，当data中的属性发生变化时就会触发侦听器的执行。watch函数
				watch:{
				str1:function(){
					//表示只要str1数据变了，那么str3=str1+str2
						this.str3=this.str1+this.str2
}
}
六、v-if与v-else
			<h3 v-if="xx==1">哈哈
			<h4 vlse="xx==2">嘻嘻
			<h5 v-else-if="3">啦啦
			v-show与v-if作用是一样的，仅仅是渲染过程有区别
七、事件处理v-on:click简写@click
		<button type="button"  v-on:click="doDelete(s.stuNum,s.stuName)">删除</button>
							
<script type="text/javascript">
    var vm = new Vue({
        el:"#container",
        data:{},
        methods:{
            doDelete:function(snum,sname){
                console.log("----delete:"+snum+"   "+sname)
            }
        }
    });
</script>
	7.2事件修饰符：当使用v-on进行事件绑定的时候，可以添加特定后缀，设置事件触发的特性@click.prevent="test"
	7.3按键修饰符：@keyup.enter="function"
八、axios:vue可以实现数据的渲染，但是如何获取数据呢？通常使用axios来获取
		 axis.get("url地址").then((res)=>){
			res.data表示所有返回的数据
}
九、组件：就是将一段html代码进行封装，可以在其它地方进行使用，类似于java的方法。
	9.1将通用的html模块封装到vue中
			Vue.component("组件名",{
			template：'html代码',
			data:function(){
				return{
			数据：title:"2020电视"
		//组件中的数据是通过return返回的
}
		也可以写data数据，包括生命周期函数
}
})
9.2声明一个局部组件：
		//2、局部声明一个组件
        const buttonCounter = {
            template: `<button v-on:click="count++">我被点击了 {{count}} 次~~~</button>`,
            data() {
                return {
                    count: 1
                }
            }
        };

        new Vue({
            el: "#app"，
            components: {
                'button-counter': buttonCounter
            }
        })

这篇关于Vue学习的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！