关于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执行语句
点击事件methods：{
clickEvent:function(){ //代码执行
}
}当然也可以采用缩写的形式
点击事件以前在js中执行阻止默认事件是
submiteds:function(e){
e.preventDefault();
}在Vue.js中可以这么写
通过绑定submit事件并且执行阻止事件
由点开头的指令后缀来表示的形式就是 事件修饰符，相关的内容大家可以去Vue官方文档查看。
（3）.我觉得这一点很重要，关于Vue.js 样式绑定
有两种方法可以实现：
1.绑定HTML CLASS（1.对象方法；2.数组方法）
2.绑定内联样式（1.对象方法；2.数组方法；3.自动添加前缀）
绑定HTML CLASS（1.对象方法）
amazing
//通过布尔值来加载class
amazing
//绑定到一个对象
var vm = new Vue({
el:'#app',
data:{
firstColor:true,
secColor:false,
colorObj:{
redColor:false,
blueColor:true
}
}
})绑定HTML CLASS（2.数组方法）
继续上面的例子
amazing
wonderful
//使用三元字符
var vm = new Vue({
el:'#app',
data:{
classFirst:'redColor', //直接指定class名称
classSec:'blueColor',
special:true
}
})绑定内联样式（1.对象方法)
通过这种方法比较直观，推荐使用
amazing
//直接写css样式
amazing
//使用对象
var vm = new Vue({
el:'#app',
data:{
weight:600,
size:20,
specialObj:{
fontSize:'40px',
color:'blue'
}
}
})绑定内联样式（2.数组方法)，类似于绑定HTML CLASS，这里就不说明了
绑定内联样式（3.自动添加前缀)
amazing
fuckdasfasdsssssssssssssssssssssssssssssssssssssssssssssss
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标签去注册一个自定义的标签
直接上例子吧
Vue.component('counter',{//通过Vue.component()注册一个自定义的标签
// 父组件的数据需要通过 props 把数据传给子组件
props:['heading','colored'],
// template:'hello world
' 也可以直接写字符串
template:'#count_template',
data:function(){
return {
count:0
};
}
})
new Vue({
el:'#app'
})