脚本宝典收集整理的这篇文章主要介绍了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...

脚本宝典总结

以上是脚本宝典为你收集整理的vue常见知识点总结全部内容，希望文章能够帮你解决vue常见知识点总结所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。