二、vue基础语法

一、模板语法

1、文本渲染

使用双花括号语法插入文本

<template><div><h3>msg: {{ message }}</h3></div>
</template><script>
export default {data() {return {message: "输出信息"}}
}
</script><style scoped></style>

在这里插入图片描述

2、渲染标签

<template><div><div v-html="rawHtml"></div></div>
</template><script>
export default {data() {return {rawHtml: "<a href='http://www.baidu.com'>百度</a>"}}
}
</script><style scoped></style>

在这里插入图片描述

3、属性

<template><div><div v-bind:id="idValue">属性测试</div><!-- 可以简写为: --><div :id="idValue">属性测试</div></div>
</template><script>
export default {data() {return {idValue: 500}}
}
</script><style scoped></style>

在这里插入图片描述

5、模板语法支持表达式

<template><div><p>{{ number + 10 }}</p><p>{{ flag ? "结果为真" : "结果为假" }}</p></div>
</template><script>
export default {data() {return {number: 500,flag: false}}
}
</script><style scoped></style>

在这里插入图片描述

二、条件渲染

1、条件渲染(为假时不渲染)

<template><div><p v-if="flag">为真时显示</p><p v-else>为假时显示</p></div>
</template><script>
export default {data() {return {flag: false}}
}
</script><style scoped></style>

在这里插入图片描述

2、条件展示(渲染不显示)

<template><div><p>写在前</p><p v-show="flag">为真时显示</p><p>写在后</p></div>
</template><script>
export default {data() {return {flag: false}}
}
</script><style scoped></style>

在这里插入图片描述

3、区别

v-if 切换时会有较高的渲染开销
v-show 有较好的性能

三、列表渲染

1、列表渲染

<template><div><ul><li v-for="item in items">{{ item.msg }}</li></ul></div>
</template><script>
export default {data() {return {items: [{ msg: "数据1" }, { msg: "数据2" }]}}
}
</script><style scoped></style>

在这里插入图片描述

2、维护状态

<template><div><ul><li v-for="(item, index) in items" :key="index">{{ item.msg }}</li></ul></div>
</template><script>
export default {data() {return {items: [{ msg: "数据1", id: 1 }, { msg: "数据2", id: 2 }]}}
}
</script><style scoped></style>

数据更新，已经渲染数据不变，仅添加新数据。给数据添加索引，方便重用原有数据，保持数据顺序。

四、事件处理

1、事件监听

<template><div><!-- 使用v-on:event 来监听事件，简写为 @event --><!-- <button v-on:click="count += 1">计数加一</button> --><button @click="count += 1">计数加一</button><p>{{ count }}</p></div>
</template><script>
export default {data() {return {count: 0}}
}
</script><style scoped></style>

在这里插入图片描述

2、事件处理方法

<template><div><button @click="AddCount">计数加一</button><p>{{ count }}</p></div>
</template><script>
export default {data() {return {count: 0}},methods: {AddCount(event) {this.count++;}}
}
</script><style scoped></style>

在这里插入图片描述

3、内联处理器中的方法（事件传递参数）

<template><div><button @click="AddCount(2)">计数加二</button><p>{{ count }}</p></div>
</template><script>
export default {data() {return {count: 0}},methods: {AddCount(num) {this.count += num;console.log(num);}}
}
</script><style scoped></style>

在这里插入图片描述

五、表单输入绑定

1、表单输入绑定

<template><div><input v-model="msg" placeholder="请输入"><p>输入了：{{ msg }}</p></div>
</template><script>
export default {data() {return {msg: ""}},methods: {}
}
</script><style scoped></style>

在这里插入图片描述

2、修饰符

<template><div><!-- lazy:在change（输入结束，失去选中）事件后同步 --><!-- trim：足底不过过滤首位空白字符 --><input v-model.lazy.trim="msg" placeholder="请输入"><p>输入了：{{ msg }}</p></div>
</template><script>
export default {data() {return {msg: ""}},methods: {}
}
</script><style scoped></style>

在这里插入图片描述