一、Vue概念

Vue是一个用于 构建用户界面 的渐进式 js框架

构建用户界面：基于数据渲染出用户看到的页面
渐进式：循序渐进（学一点用一点）

1、Vue使用方式

Vue核心包开发：局部模块改造
Vue核心包 & Vue插件工程化：整站开发

2、Vue核心包开发使用

Vue2官网：v2.cn.vuejs.org/v2/guide/

Vue3官网：cn.vuejs.org/guide/quick…

1）下载vue

开发都使用 开发环境版本

//CDN引入即可：对于制作原型或学习，你可以这样使用最新版本：
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
//对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16"></script>

二、Vue创建实例

1、核心4步骤

1）准备容器

2）引包

3）创建实例

4）添加配置项 => 完成开发

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

<body>
    <div id="app">
        <h1>{{ msg }}</h1>
    </div>

    <!-- 引入的是开发版本 - 包含完整的注释和警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.1/dist/vue.js"></script>
    <script>
        // 一旦引入 VueJS核心包，在全局环境，就有了 Vue 构造函数
        const app = new Vue({
            //通过 el 选择配置器，指定Vue管理的是哪个盒子
            el: '#app',
            //通过 data 提供数据
            data: {
                msg: 'Hello',
            }
        })
    </script>
</body>
</html>

三、插值表达式

插值表达式是Vue的模版语法作用：利用表达式进行插值，渲染到页面

表达式：可以被求值的代码，JS引擎会将其计算出一个结果

语法：{{ 表达式 }}

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

<body>
    <div id="app">
        <p>{{nickname}}</p>
        <p>{{age}}</p>
        <p>{{ age < 18 ? '未成年' : '成年'}}</p>
        <p>{{ friend.name }}</p>
        <button type="button" onclick="swich">切换</button>
    </div>

    <!-- 引入的是开发版本 - 包含完整的注释和警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.1/dist/vue.js"></script>
    <script>
        // 一旦引入 VueJS核心包，在全局环境，就有了 Vue 构造函数
        const app = new Vue({
            //通过 el 选择配置器，指定Vue管理的是哪个盒子
            el: '#app',
            //通过 data 提供数据
            data: {
                nickname: 'Elias',
                age: 18,
                friend:{
                    name:'jinjin',
                    age:23
                }
            },
            methods:{
                switch(){
                    alert(11)
                }
            }
        })
    </script>
</body>
</html>

四、Vue核心特性：响应式

数据的响应式处理

响应式：data里的数据发生变化，视图自动更新（底层是vue封装了dom操作）

数据的访问和修改（ data中的数据会被添加vue的实例上去 ）

1、访问数据："实例.属性名"

2、修改数据："实例.属性名" = "值"

data中的数据会被添加vue的实例上去，在控制台进行数据访问修改，视图上也会被修改

截屏2024-01-20 13.51.24.png

但是在控制台修改数据不方便，接下来我们下载一个chorm浏览器插件

截屏2024-01-20 14.13.16.png

然后就可以在开发者检查页面即可使用了

Vue入门

一、Vue概念

二、Vue创建实例

三、插值表达式

四、Vue核心特性：响应式