【一】插值语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- Vue 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.9/vue.min.js"></script>
<!-- 以下为 css样式书写区 -->
<style>
</style>
</head>
<body>
<div id="app">
<!-- 插值语法 -->
{{s}}
<h1>{{name}}</h1>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
s: "hello world",
name:"dream"
}
})
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入 Vue.js 文件 -->
<script src="vue2.js"></script>
<!-- 如果需要使用CDN引入Vue.js库，请取消注释下面一行代码，并注释上面一行代码 -->
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.9/vue.min.js"></script> -->
</head>
<body>
<div id="app">
<p>字符串：{{name}}</p>
<p>数字：{{age}}</p>
<p>数组：{{hobby}}--->{{hobby[1]}}</p>
<p>对象：{{wife}}--->{{wife['name']}}---->{{wife.age}}</p>
<p>标签形式字符串：{{a_div}}--->说明不存在xss攻击</p>
<p>-----插值语法，还可以放，简单表达式和函数(后面了)-----</p>
<p>简单表达是：{{1 + 1}}</p>
<p>三目运算符【条件?符合条件执行这个:不符合条件】：{{10 > 2 ? '正确' : '不正确'}}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
name: "dream",
age: 18,
hobby: ["音乐", "电影", 666],
wife: {name: "dream", age: 22},
a_div: '<a href="https://www.baidu.com/">点我了解更多</a>'
}
})
</script>
</body>
</html>
字符串：dream
数字：18
数组：[ "音乐", "电影", 666 ]--->电影
对象：{ "name": "dream", "age": 22 }--->dream---->22
标签形式字符串：<a href="https://www.baidu.com/">点我了解更多</a>--->说明不存在xss攻击
-----插值语法，还可以放，简单表达式和函数(后面了)-----
简单表达是：2
三目运算符【条件?符合条件执行这个:不符合条件】：正确
【二】什么是响应式
- 在Vue中，响应式是指当数据发生变化时，相关的视图会自动进行更新的特性。
- Vue使用了一种叫做“Object.defineProperty”的技术来实现响应式。
- 具体而言，当一个对象被定义为响应式时，Vue会对该对象的每个属性都进行劫持（Hijack），即拦截访问和修改该属性的操作。
- 当属性被访问时，Vue会将观察者（Observer）添加到订阅列表中，并进行依赖收集。
- 当属性被修改时，Vue会通知相关的观察者，从而引发视图的更新。
- 由于这种机制的存在，开发者在编写Vue组件时，只需关注数据的更新，而无需手动去更新DOM。
- 这种自动的响应式特性大大简化了Vue应用的开发过程，提升了开发效率。
- 需要注意的是，响应式只能监听对象的属性的变化，如果直接修改数组的某个索引或长度，Vue是无法检测到变化的。
- 这时，我们可以使用Vue提供的数组变更方法（如push、pop等）来保证响应式的正常工作。