Vue的引入使用和响应式特性（vue基础学习笔记-第一节）_vue引入html页面,使其也具有响应式-CSDN博客

本文链接：https://blog.csdn.net/weixin_62952521/article/details/132584909

一，vue的引入包含四步骤包括：

1.准备vue所管理的容器

2.引入vue包，包含两种引入方法：本地文件引入和网络引入，vue官网：

安装 — Vue.js (vuejs.org)

3.创建vue实例new Vue()

4.配置vue对象，包括：

{

el:'#me',//el属性配置，限定被该vue所影响的标签

data:{

msg:'Hello vue'//data属性设置该vue对象的属性数据

}

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="me">//1.准备vue所管理的容器
        {{msg}}//{{}}为插值表达式，其内可包含一个有固定结果的表达式
    </div>
    <script src="../vue.js"></script>//2引入vue，也可以引入网络地址src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"

    <script>
        const app = new Vue({//3.创建vue实例new Vue()
            el: '#me',
            data: {
                msg: '你好，vue'
            }
        })
    </script>
</body>

</html>

另外在代码中我们使用了{{msg}}差值表达式引入了vue对象中的数据来渲染到页面中，注意插值表达式{{}}中包含的是表达式而不能是语句（如for，if）等，这是我们在vue语法渲染数据经常要用到。

二，差值表达式的响应式特性

1 .vue的插值表达式遵循响应式特性，即数据改变，视图自然随之更新。

2.那么，如何访问/修改数据呢？

其实很简单，我们可以直接用：实例.属性名进行访问

使用实例.属性名=值进行修改。

这里我们在浏览器控制台修改数据得到修改的结果