学习周记14

Vue 3

Vue.js是一套构建用户界面的渐进式框架。Vue 只关注视图层， 采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

简单实例

Vue3 条件语句

条件判断
v-if
条件判断使用 v-if 指令，指令的表达式返回 true 时才会显示：


当图中指令***true***改为***false***时，v-if所输出的数值将无法被我们看到。

Vue3 样式绑定

Vue.js class
class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。
v-bind 在处理 class 和 style 时， 表达式除了可以使用字符串之外，还可以是对象或数组。

实例中将 isActive 设置为 true 显示了一个蓝色的 div 块，如果设置为 false 则不显示。

Vue3 事件处理

< !DOCTYPE html>
< html>
< head>
< meta charset=“utf-8”>
< title>
< script src=“https://unpkg.com/vue@next”>< /script>
< /head>
< body>
< div id=“app”>
< button @click=“counter += 1”>增加 1< /button>
< p>这个按钮被点击了 {{ counter }} 次。< /p>
< /div>

< script>
const app = {
data() {
return {
counter: 0
}
}
}

Vue.createApp(app).mount(’#app’)
< /script>
< /body>
< /html>

结果