一、模板(指令、插值):
<template> <div> <p>文本插值 {{message}}</p> <p>JS 表达式 {{ flag ? 'yes' : 'no' }} (只能是表达式,不能是 js 语句)</p> <p :id="dynamicId">动态属性 id</p> <hr/> <p v-html="rawHtml"> <span>有 xss 风险</span> <span>【注意】使用 v-html 之后,将会覆盖子元素</span> </p> <!-- 其他常用指令后面讲 --> </div> </template> <script> export default { data() { return { message: 'hello vue', flag: true, rawHtml: '指令 - 原始 html <b>加粗</b> <i>斜体</i>', dynamicId: `id-${Date.now()}` } } } </script>
二、computed和watch:
1.computed:
<template> <div> <p>num {{num}}</p> <p>double1 {{double1}}</p> <input v-model="double2"/> </div> </template> <script> export default { data() { return { num: 20 } }, computed: {// computed有缓存,data不变则不会重新计算 double1() { return this.num * 2 }, double2: { get() { return this.num * 2 }, set(val) { this.num = val/2 } } } } </script>
2.watch:
<template> <div> <input v-model="name"/> <input v-model="info.city"/> </div> </template> <script> export default { data() { return { name: '双越', info: { city: '北京' } } }, watch: { name(oldVal, val) { // eslint-disable-next-line console.log('watch name', oldVal, val) // 值类型,可正常拿到 oldVal 和 val }, info: { handler(oldVal, val) { // eslint-disable-next-line console.log('watch info', oldVal, val) // 引用类型,拿不到 oldVal 。因为指针相同,此时已经指向了新的 val }, deep: true // 深度监听 } } } </script>
三、class和style:
<template> <div> <p :class="{ black: isBlack, yellow: isYellow }">使用 class</p> <p :class="[black, yellow]">使用 class (数组)</p> <p :style="styleData">使用 style</p> </div> </template> <script> export default { data() { return { isBlack: true, isYellow: true, black: 'black', yellow: 'yellow', styleData: { fontSize: '40px', // 转换为驼峰式 color: 'red', backgroundColor: '#ccc' // 转换为驼峰式 } } } } </script> <style scoped> .black { background-color: #999; } .yellow { color: yellow; } </style>
四、条件:
<template> <div> <p v-if="type === 'a'">A</p> <p v-else-if="type === 'b'">B</p> <p v-else>other</p> <p v-show="type === 'a'">A by v-show</p> <p v-show="type === 'b'">B by v-show</p> </div> </template> <script> export default { data() { return { type: 'a' } } } </script>
五、循环:
<template> <div> <p>遍历数组</p> <ul> <!-- key应该设置成id: --> <li v-for="(item, index) in listArr" :key="item.id"> {{index}} - {{item.id}} - {{item.title}} </li> </ul> <p>遍历对象</p> <ul > <!-- v-for和v-if不能写在一起,原因: v-for优先级高于v-if,如果v-for和v-if写在一起, 会先执行v-for,循环出列表,然后用v-if判断每一个列表项 --> <li v-for="(val, key, index) in listObj" :key="key"> {{index}} - {{key}} - {{val.title}} </li> </ul> </div> </template> <script> export default { data() { return { flag: false, listArr: [ { id: 'a', title: '标题1' }, // 数据结构中,最好有 id ,方便使用 key { id: 'b', title: '标题2' }, { id: 'c', title: '标题3' } ], listObj: { a: { title: '标题1' }, b: { title: '标题2' }, c: { title: '标题3' }, } } } } </script>
六、事件:
七、表单: