VUE.js基础

VUE.js基础

一.创建vue对象以及挂载

在html中的代码:
{{}}中间为data中的类型，为差值表达式

JS中的代码:
new Vue({
	el:'#绑定标签'
	data:{//data中用来存数据
		数据名：对应的数据值
	}
})

二.判断语句v-if与v-show:

​ v-if:对于绑定数据进行判断，如果为真则显示，为假则不显示，则显示v-else中的内容

语法:<div v-if="判断的属性">

​ v-else:

语法:<div v-else>

​ v-else-if

语法:<div v-if="">
	<div v-else-if="">
	<div v-else>
	当满足v-if条件时，显示第一个个，满足v-else-if时，显示第二个，都不满足时，显示最v-else的内容

​ v-show:也是根据表达式的条件进行展示，类似于v-if，如果满足当前条件，即为true，则显示，反之则清除

语法:<div v-show="判断的表达式">

v-if 与 v-show区别

v-if 与 v-show 的区别:
	v-if满足条件时创建，不满足时销毁，
	而v-show则是初始时加载，如果不满足条件，则将其display属性设置为none，满足时设置为block
消耗:v-if有更高的切换消耗；v-show有更高的初始渲染消耗
应用场景:当需要频繁进行判断的时候，则用v-show，反之用v-if

三.循环语句v-for:

​ v-for:

语法:1.<div v-for="site in sites">进行遍历数组或对象，每遍历一个都会创建一个
	{{site.thing}}
	每一个site都是site中的一个数据
也可以通过这个进行一个对象的迭代
	2.<div v-for="value in Object(对象)"
		就是将对象中所有东西进行遍历出来
	3.<div v-for="(value,key) in Object">
		可以将对象中的键名:键值进行提取
	4.<div v-for="*(value,key,index)" in Object>
		可以将对象中的键名：键值：索引进行提取
		

可以通过此循环的来创建多个相同的标签，也可以联合着v-if一起使用

四.计算属性computed:

语法:var vm=new Vue({
	el:'#绑定标签',
	data:{//data中用来存数据
		数据：“字符串”
	},
	methods:{
		函数名:function(){
		
		}
	}
	computed:{
		计算属性名:function(){
			写相应的函数
		}
	}
})

computed与method的区别与使用:
	computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。
	而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
	即先看data里的数据是否发生变化，
	如果没有变化computed的方法不会执行，但methods里的方法会执行
​	如果需要缓存则用计算属性，没必要的话用methods就可以了

	二者能实现相同的功能，唯一不同的是methods定义的方法需要执行
	一般来说计算数据只有getter方法，但可以通过对象实现setter方法
应用:需要缓存则用计算属性,不需要则用用method即可

五.监听属性:watch

​ watch监听数据的变化

 var vm = new Vue({
    el: '#app',
    data: {
       counter: 1
    },
    // 1.在实例中设置:
    watch {
    	监听的数据data:数据变化触发的函数function(val){}
    }
 });
2.在实例外设置 vm.$watch('需要监听的数据',function(new,old){
 	监听后所需要进行的事件
 }
	watch用于当前名字的数据的监听，如果数据变化，则会触发监听器的名字
	监听器的名字要与属性名保持一致,val表示最新值
	$watch:Vue 实例之外才能实现正确的响应

实现属性的添加或删除：

Vue 不允许在已经创建的实例上动态添加新的根级响应式属性
Vue 不能检测到对象属性的添加或删除，最好的方式就是在初始化实例前声明根级响应式属性，哪怕只是一个空值
实现属性的添加或删除，则可以使用全局 Vue，Vue.set 和 Vue.delete 方法
Vue.set用于设置对象的属性，解决无法添加属性的限制
Vue.set( target, key, value )
target: 可以是对象或数组 
key : 可以是字符串或数字 
value: 可以是任何类型

创建一个变量myproduct
var myproduct = {"id":1, name:"book", "price":"20.00"};
vue中：
data:{
	products:myproduct,
}
在其中添加data
vm.products.qty="?"
Vue.set(myproduct,'qty',1);

删除动态添加的属性
Vue.delete(target,key)
target: 可以是对象或数组 
key : 可以是字符串或数字

六.样式绑定v-bind：

1.单纯进行内联绑定v-bind:class="{'Class名':isActive}"
				v-bind:class="绑定的名字"
isActive在Vue对象中实现，可以同时绑定多个属性,但必须用"属性值":"data中的值"
	data:{
	两种数据格式:
		绑定的名字:Class名;//通过属性名来设置CSS
		
		Class名:ture/false;//用来设置是否显示
	}
2.进行绑定data中对象v-bind:class="对象Object"
	Object中包含多个值，键值为class名，可以在CSS中用.进行设置。
	Object:{
		active:true;
	}
3.绑定计算属性中的函数:
	v-bind:class="classObject"
	classObject:function(){
		return{
		
		}
	}
4.绑定一个数组:
	v-bind:class="[activeClass,errorClass]"
5.用三元表达式来实现切换Class:
	v-bind:class="[errorClass,isActive?activeClass:'']"
通过style进行绑定:
1.	v-bind:style"{"color:colorname,..."}"
	在data中：
	data{
		colorname:"green"
	}
2.用-bind对于style绑定对象
	v-bind:style="Object"
		Object:{
			设置样式
		}
3.进行数组的绑定
	v-bind:style="[baseStyles,overridingStyles]"
	并进行Object设置

七.v-on：缩写@

​ v-on用于绑定并监听DOM事件

v-on:事件="绑定的方法",绑定的方法可以带有形参的
	在vue中的methods中编写方法与绑定的方法名称一致

修饰符:

事件修饰符（用在事件之后用.进行连接）:

​	修饰符是以半角句号 **.** 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定
​	.stop--阻止冒泡
​	.prevent--阻止默认事件
​	.capture--阻止捕获
​	.self--只监听触发该元素的事件
​	.once--只触发一次
​	.left--左键事件
​	.right--右键事件
​	.middle--中间滚轮事件
按键修饰符:用v-on:keyup.(keycode/键名)进行绑定
修饰符:

​	.lazy变为不是在inpu事件中同步输入框中的值和数据，而是转变为在 change 事件中同步
​	.number自动将用户输入的数据转为Number类型，添加number来实现
​	.trim自动过滤用户输入的首尾空格

​	keyup
​		按键名: .enter  .tab  . delete  .esc  .space  .up  .down  .left  .right  .ctrl  .alt  .shift  .meta
过滤器：用|进行实现

八.表单:v-model进行双向绑定

<input v-model="msg">
{{msg}}
vue中:
	data:{
		msg:""//相当与通过这里的msg进行input中与{{}}中进行双向绑定
	}
单双选框：
	进行选择时就会将相应的信息value 传给绑定的msg中并替代
	主要用于表单与data数据的绑定