vue常见知识点总结

学会查找api
在vue中，v-text=“”等指令中的双引号可以是任何简单的js表达式，
Js简单的表达式包括：
Js基本类型，数字，字符串等等，
还可以是三元表达式

v-show 控制显示隐藏和v-if的区别
v-show 可以清除style=”display: none”
V-if在虚拟内存中,不会清除style=”display: none”

v-text 显示文本，和{{}}的区别
页面首屏不用{{}}，只在组件中使用{{}}

v-bind 两个用法
1.绑定dom元素的属性，只要是dom元素的属性都可以绑定，例如

v-bind:style=”{height: 20px}”
v-bind:class=”{active: isActive}”,默认绑定class用对象的形式

2.给子组件绑定属性值传参

<dialog v-bind:display=“true”></dialog>

v-on 两个用法
1.监听dom元素的事件

<div v-on:click=”fn”></div>

2.监听自定义组件内部触发的事件

<dialog v-on:close=“fn”></dialog>

v-if,v-else-if

<div v-if=”active === true”>v-if</div>
<div v-else=”active === false”>v-else</div>
<div v-else-if>v-else-if</div>

Computed 计算属性

由其它data中的属性计算得到,依赖属性改变是，其值将会改变
new({
    el:'',
    data:{
        cartNum: 20,
        everyPrice: 20
    },
    computed{
        totalPrice(){
            return cartNum * everyPrice
        }
    }
})

Watch 监听属性的改变和computed区别

new({
    el:'',
    data:{
        cartNum: 20,
        everyPrice: 20
    },
    Watch:{
        cartNum (newval,oldval){
            this.totalPric = newval* this.everyPrice
        },
        everyPrice(newval,oldval){
            this.totalPric = newval* this.cartNum 
        }

    }
})

很明显当一个属性有两个或者多个属性计算得到的时候用计算属性能够节省代码，

当想要某个属性最初赋值的时候就执行相应的监听

Watch:{
    isLogin(){
        //isLogin最初赋值的时候不会执行这里边的代码，只有等赋值后再次改变时执行
    }
}

解决办法

Watch:{
    handler: function (val, oldVal) {
          console.log('new d: %s, old: %s', val, oldVal)
    },
       immediate: true
}

this.$nextTick 用法

例如banner渲染
This.list = getData(); 
this.$nextTick(()=>{
    new Swiper();
})

1.vue语法不要用简写,用全称,避免和后台语法冲突
2.页面中避免使用带有>和<之类的判断语法
3.首屏模板数据渲染用v-text 不用{{}}
4.实例声明模板
new({

el:'',
//数据变量声明以d_开头，避免和methods重名
data:{
    d_arr:[],
    //类名控制一般写在class
    d_class:{
            
    },
},
computed:{
        
},
watch:{
        
},
methods:{
        
},
mounted:function(){
        
}

});
5.首屏显示内容不用组件

6.api 请求方法

建议讲自己项目的api请求封装下，这样方便添加中间件对请求做处理
1.传参数
api(url, {ActivityID:item.ID}, function (res) {
            
});
2.参数为空
api(url, {}, function (res) {
            
});

7.vue风格指南
https://cn.vuejs.org/v2/style...