【3.0】Vue之语法

【一】插值语法

<!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等）来保证响应式的正常工作。
posted @ 2023-08-06 22:26  Chimengmeng  阅读(31)  评论(0)  编辑  收藏  举报