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…