关于Vue.js重要知识点(一)

1为什么要写这样的文章呢？

很多框架的语法大同小异，没有必要将时间浪费在那些共同点上，我觉得只要将某个框架中特殊之处掌握，然后马上通过项目实践即可，再从项目中去学习那些常用的语法。以下是我觉得重要的知识点。

2.概述知识点

（1）.v-show与v-if的区别:v-show的隐藏是将css样式中display设置为none;而v-if的隐藏是将DOM元素删除;如果在需要频繁切换显示那么最好使用v-show;

（2）.关于事件处理的，Vue.js采用v-on:[事件名称]="[函数名称]"，比如

绑定点击事件，然后在js执行语句

<a v-on:click="clickEvent">点击事件</a>

methods：{
    clickEvent:function(){    //代码执行
    }
}

当然也可以采用缩写的形式

<a @click="clickEvent">点击事件</a>

以前在js中执行阻止默认事件是

submiteds:function(e){
	e.preventDefault();
}

在Vue.js中可以这么写

<form action="处理用户输入.html" v-on:submit.prevent>

通过绑定submit事件并且执行阻止事件

由点开头的指令后缀来表示的形式就是 事件修饰符，相关的内容大家可以去Vue官方文档查看。

（3）.我觉得这一点很重要，关于Vue.js 样式绑定

有两种方法可以实现：

1.绑定HTML CLASS（1.对象方法；2.数组方法）

2.绑定内联样式（1.对象方法；2.数组方法；3.自动添加前缀）

绑定HTML CLASS（1.对象方法）

<style type="text/css">
  .redColor{color:red;}
  .blueColor{color: blue;}
</style>

<div id="app">
  <p v-bind:class="{'redColor':firstColor,'blueColor':secColor}">amazing</p>  //通过布尔值来加载class
  <p v-bind:class="colorObj">amazing</p>  //绑定到一个对象
</div>

var vm = new Vue({
   el:'#app',
   data:{
	firstColor:true,
	secColor:false,
	colorObj:{
		redColor:false,
		blueColor:true
		}
	}
})

绑定HTML CLASS（2.数组方法）

继续上面的例子

<div id="app">
	<p v-bind:class="[classFirst,classSec]">amazing</p>
	<p v-bind:class="[classFirst,special?'':classSec]">wonderful</p>   //使用三元字符
</div>

var vm = new Vue({
	el:'#app',
	data:{
		classFirst:'redColor',  //直接指定class名称
		classSec:'blueColor',
		special:true
	     }
})

绑定内联样式（1.对象方法)

通过这种方法比较直观，推荐使用

<div id="app">
     <p v-bind:style="{fontWeight:weight,fontSize:size+'px'}">amazing</p> //直接写css样式
     <p v-bind:style="specialObj">amazing</p>  //使用对象
</div>

var vm = new Vue({
	el:'#app',
	data:{
		weight:600,
		size:20,
		specialObj:{
			fontSize:'40px',
			color:'blue'
		           }
	     }
})

绑定内联样式（2.数组方法)，类似于绑定HTML CLASS，这里就不说明了

绑定内联样式（3.自动添加前缀)

<div id="app">
	<p v-bind:style="[firstObj,secObj]">amazing</p>
	<p v-bind:style="todayObj">fuckdasfasdsssssssssssssssssssssssssssssssssssssssssssssss</p>
</div>

var vm = new Vue({
	el:'#app',
	data:{
		firstObj:{
			color:'blue',
			fontWeight:'800'
			},
		secObj:{
			fontSize:'18px'
			},
		todayObj:{
			fontSize:'20px',
			transform:'rotate(-20deg)'
			}
		}
	})

自动添加前缀意思是Vue.js会自动帮你添加一些兼容浏览器的前缀，比如transform 

-ms-transform:rotate(7deg); 	/* IE 9 */
-moz-transform:rotate(7deg); 	/* Firefox */
-webkit-transform:rotate(7deg); /* Safari 和 Chrome */
-o-transform:rotate(7deg);

（4）.组件

通过template标签去注册一个自定义的标签

直接上例子吧

<div id="app">
	<counter heading="like" colored="green"></counter>
	<counter heading="dislike" colored="red"></counter>
</div>
<template id="count_template">
	<button style="background:{{colored}}" @click="count++">{{heading}}{{count}}</button> //注意的是如果多个元素，需要添加一个元素将多个元素作为父元素
</template>

Vue.component('counter',{//通过Vue.component()注册一个自定义的标签
		// 父组件的数据需要通过 props 把数据传给子组件
		props:['heading','colored'],
		// template:'<h1>hello world</h1>'  也可以直接写字符串
		template:'#count_template',
		data:function(){
			return {
				count:0
			};
		}
	})
new Vue({
	el:'#app'
})

以上就是本节的内容，后面继续更新