一、Vue响应式特性
什么叫做数据的响应式处理----数据变化,视图自动更新
例如msg数据绑定到了app这个盒子上,msg的数据改变的话,页面会立即改变,这样我们就能将大量的精力用在核心业务逻辑上,而不是数据的渲染上
如何访问or修改?data中的数据,最终会被添加到实例上
①访问数据:“ 实例.属性名”
②修改数据:“实例.属性名” = “值”
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
{{ msg }}
{{ count }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
// 响应式数据 → 数据变化了,视图自动更新
msg: '你好,黑马',
count: 100
}
})
// data中的数据,是会被添加到实例上
// 1. 访问数据 实例.属性名
// 2. 修改数据 实例.属性名 = 新值
</script>
</body>
</html>
课后问题:
1.什么是响应式?
数据改变,视图自动更新
使用Vue开发-->专注于核心业务逻辑
2.如何修改和访问数据?
data的数据最终会被添加到实例中
①访问数据:“ 实例.属性名”
②修改数据:“实例.属性名” = “值”
二、指令初始,和v-html
(纯AI,但内容正确,可跳过)在Vue中,指令是一种特殊的HTML属性,以 "v-" 开头,并通过一种特殊的语法与Vue实例的数据进行绑定。指令可以用于控制DOM元素的行为和外观。例如,你可以使用v-bind指令将元素的属性绑定到Vue实例的数据,使用v-on指令监听DOM事件并执行相应的逻辑,还可以使用v-if和v-for等指令控制元素的显示和循环渲染。
需求一:将data中的数据按格式展现到页面中,如果不使用指令标签,可能输入为字符串,但是u使用指令标签。
data: {
msg:
'<h3 href = "www.baidu.com">学前端~来黑马!</h3>'
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<div v-html="msg"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
msg:
'<h3 href = "www.baidu.com">学前端~来黑马!</h3>'
}
})
</script>
</body>
</html>
1.什么是 Vue 指令呢?
指令就是带有 v- 前缀 的特殊 属性,不同属性 对应 不同的功能
学习不同指令 →解决不同业务场景需求
2.如果需要动态解析标签,可以用哪个指令?语法?
v-html="表达式"-》动态设置元素 innerHTML