关于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'
})
以上就是本节的内容,后面继续更新




阅读更多
换一批

没有更多推荐了,返回首页