vue项目知识点整理

一、基础

一、 理解mvvm

1.m 是vue实例中的data,自定义的数据或后端返回的数组不是后端mvc里的model概念不同。
2.vm 是vue的实例 m和v之间的调度者 是mvvm的核心思想
3.v是 html 要渲染的。

二、 常用指令

1.v-cloak 解决{ {}}插值闪烁问题
2.v-text 会先执行 覆盖 元素中原本的内容 但是插值表达式只会覆盖自己的占位符，默认不会闪烁
3.v-html 渲染 html标签 覆盖元素中原有元素内容
4.v-bind: 简写为: 用来绑定数据 可以写合法的js表达式
5.v-on: 简写为 @ 用来点击事件
6.v-if:DOM渲染与不渲染，不能和v-for一起使用
7.v-for:循环渲染DOM，循环时要加v-key唯一标识，循环时不能和v-if一起使用，可以用computed计算属性再循环
8.v-model:双向数据绑定，一般用于表单
9.v-show:DOM隐藏与显示，和v-if区别在于v-show是利用css控制，实际上DOM已经渲染了，而v-if是渲染与不渲染。如果DOM频繁切换可以用v-show,反之用v-if。

三、常用事件修饰符

1.stop 阻止冒泡 ：外层和里层都有方法 点击里层会产生冒泡，也会触发外层的事件。顺序 从里到外产生事件
2.prevent 阻止浏览器默认行为 ：a标签有浏览器默认行为。
3.capture 捕获事件 ：点击里层先触发外层再触发里层 顺序从外到里产生事件
4.self 只触发自己本身的事件 不会产生冒泡和捕获事件 类似于阻止冒泡 但只针对自己那一层 最外层还是会被最里层冒泡冒到 stop 是阻止所有层次
5.once 事件只执行一次

四、数据的绑定

1.v-bind: 数据的单向绑定
2.v-modle :数据的双向绑定 这个只能用于表单元素中
tips: 表单元素 radio text address email select checkbox textarea

五、class 绑定

1.数组带对象

<div :class="[classA,classB,{'classC':flag}]" >
data(){
    return{
        flag:true
    }
}

tips:可以在类中的数组中写三元表达式,但推荐使用对象来代替它控制是否渲染

2.单纯的对象

<div :class="{classA:falg1,classB:flag2}" />
data(){
    return{
        falg1:true,
        falg2:true
    }
}

3.数组带三元

<div :class="['ac','bd',falg?'active','']" / >
data(){
    return{
        falg:true,
    }
}

4.对象升级

<div :class="classObj" />
data(){
    return{
      classObj:{classA:falg1,classB:flag2}
    }
}

tips:直接使用一个对象数组来控制样式

5.使用style 的对象来实现样式的修改

<div :style="styleObj" />
data(){
   return{
     styleObj:{color:red}
   }
}

6.使用style 的数组带对象来实现样式的修改

<div :style="[styleObj1,styleObj2]" />
data(){
   return{
     styleObj1:{color:red},
     styleObj2:{color:red}
   }
}

六、v-for的使用

1. 可以遍历: 普通数组,对象数组,对象,还可以是数字

<div v-for='(item,key,index) in object' :key='index'>
 {
   {item}}--{
   {key}}--{
   {index}} 
</div>
<div v-for='(count in 10)'> </div>

tips:在遍历对象的时候有多个index索引,遍历数字时是从1开始的。绑定key时属性值必须是number或者string

七、v-if、v-show

1.v-if 有较高的切换性能 , 适合元素可能永远不会被用户看到。

2.v-show 有较高的初始渲染消耗,适合元素频繁切换。

八、 调试插件

1.在谷歌商店找vue-devtools插件,使用这个插件,并设置插件,允许访问文件网址。 会在调试中出现vue相关的东西

2.debugger 直接写可以调试

九、 过滤器

全局和私有过滤器

<div v-for='(item,key) in object' :key='index'>
 {
   {item | dateFormat}}
</div>
<div v-for='(count in 10)'> </div>

全局

vue.filter('过滤器名称',function(value){
    return value.replace(/dome/g,'god')
})

私有(局部)

filters:{
     dateFormat:function(data,param){
         do some
     }
}

tips：

data 就是 | 第一个参数已经被定死了,永远是, 管道左边要被转换的数据,param 是过滤方法传进来的其他参数,过滤器采用就近优先原则，如果私有和全局的名称一样就优先采用私有的。

padstart 和 padend es6 的补0方法

第二个参数是字符串,第三个参数是表达式,如果自己定义参数值是动态的会报错,还未找到原因,后期会找时间再看看,目前就是简单的过滤用过滤器,复杂点用方法,能用计算属性用计算属性,有缓存,能提高性能

十、 生命周期

1.beforeCreate()：这是我们遇到的第一个生命周期函数,表示实例完全被创建出来之前,会执行它…

2.created(): 这是遇到的第二个生