共计 1607 个字符，预计需要花费 5 分钟才能阅读完成。
学会查找 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…
