1. 模板中所有用到this.xxx都不要写this.xxx而是就写xxx就行了
- 比如
this.gender这个数据在模板中就写gender就行了 - 再比如
this.$emit在模板中 ===>$emit
2. 当用到computed或者watch的高级功能时，书写方面注意两点
3. 监听对象中的属性时，Vue允许我们有这几种写法
4. :class 书写注意点
class 可与 :class并存
<div class="app" :class="`theme-${themeName} fontSize-${fontSizeName}`">
前者是字符串 后者是js表达式
字符串与表达式混合
<div :class="`app theme-${themeName} fontSize-${fontSizeName}`">
字符串 js表达式混在一起
对象式
<div :class="{ active: isActive }"></div>
对象式-1
<div :class="classObject"></div>
data: {
classObject: {
'active': true,
'text-danger': false
}
}
对象式-2
<div :class="{classObject}"></div>
data: {
classObject: true
}
计算属性语法 --- 用于逻辑太过复杂的情况
<div v-bind:class="classObject"></div>
data: {
isActive: true,
error: null
},
computed: {
classObject: function () {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
}
结合模板字符串
// 第一种 有classPrefix的话...
<div :class="classPrefix&& `${classPrefix}-wrapper`">
// 第二种 es6中的括号语法[],让对象中可以使用到变量, 后面的classPrefix表示如果classPrefix则true，没有classPrefix当然就是false了
<ul :class="{[classPrefix+'-types']:classPrefix}">
- 组件在模板上的书写
到处都用小驼峰写法是一定不会错的
components:{ChangeThemeButton} ===> <change-them-button/>
:value="1"
<input type="checkbox" :value="1"> ===> 这个1是数字类型的1而非字符串
<input type="checkbox" value="1"> ===> 这个1是字符串类型的1而非数字
v-on配合$emit一定要写在父组件模板中的子组件身上，你写别处是根本监听不到的
<Child v-on:xxx="fn"> //
-
获取输入框内容的写法问题
-
本组件中, 获取输入框的内容可以写
@input="xxx = $event.target.value也可在methods中用e.target.value; -
而父子组件中就要看子组件传过来的是
$event还是$event.target.value了 -
若子组件
this.$emit(..., $event)则@input="xxx = $event.target.value" -
若子组件
this.$emit(..., $event.target.value)则@input="xxx = $event"
- 事件监听不要把函数直接写上去
- 错误
- 正确
- labels在html结构上的写法 VS labels在内存中获取的写法
- labels在html结构上的写法
<Layout content-class="xxx"> // 注意写成content-class
- labels在内存中获取的写法
<script lang="ts">
export default {
name: 'Layout',
props:['contentClass'] // 注意 从内存中拿参的时候是小驼峰
};
</script>
<div class="content" :class="contentClass"> // 那么拿到值之后写的时候也是驼峰写法
## Vue中render的三种写法
```js
// 写法1 老实人写法
new Vue({
render: function (h) {
return h(App);
}
}).$mount("#app");
// 写法2 旧社会写法
new Vue({
render(h) {
return h(App);
}
}).$mount("#app");
// 写法3 arrow写法
new Vue({
render: (h) => h(App)
}).$mount("#app");
12 this.$el 表示的是当前组件自身的最外层结构
在线示例
mounted(){
const dom = this.$el.querySelector('xxx')
}
13 Vue中最好都用小驼峰写法，只要遇到大写字母，都会给你转换成 - 加小写的形式
fontSize ===> font-size
14 Vue click事件如何既要传参又要能获取 event.target
在线示例
当你
@click="onClick"时（即没有任何传参）, 那么在methods中系统默认会传一个参（即事件对象）
但当你
@click="onClick(1)"时（即手动传了一个参）, 那么只有手动再传$event才能够在methods中接收到事件对象@click="onClick(1, $event)"
<button @click="handle(传的参, $event)">
methods:{
handle(n,e){
console.log(n,e.target)
}
}
15 父子组件传递时,确保子组件传递的是 e.target.value 而不是 e
- 如果你要用
v-model="value"或者是v-bind:value.sync="value"的写法 - 确保子组件传递的是
e.target.value而不是e - 因为这两者本质是 语法糖, 都替代了以下的写法
@input = "value = $event"
@change = "value = $event"
@update:value = "value = $event"
如果你传递的是 `e`, 结果就是打印出 `[object InputEvent]`, 即输入类型的事件对象
16 父子组件传递时，不写 $event 也可以写 形参
使用了 .sync
<comp :foo.sync="bar"></comp>
未使用 .sync 这里用了$event
<comp :foo="bar" @update:foo="bar = $event"></comp>
未使用 .sync 这里可以不用$event而是用函数形式
<comp :foo="bar" @update:foo="val => bar = val"></comp>
