初始 Vue | iGmaBlog

Vue 介绍

Vue 特点

采用组件化模式，提高代码复用率，让代码更好维护。每一个 Vue 文件都相当于一个组件。
编码方式
- 原生 JavaScript 使用命令式编程。
- Vue 使用声明式编程。
使用虚拟 DOM + 优秀的 Diff 算法，尽量复用 DOM 节点。

官网

Vue2：官网
Vue3：官网

测试代码

创建指定文件夹。

这里可以使用 CDN 引入，也可以下载 Vue.js 文件（目前下载链接找不到了）

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    
</body>
</html>

出现红框内的语句表示运行成功。

安装 Chrome 插件

使用 Chrome 访问谷歌商店（有条件的可以开代理访问，国内访问较慢很有可能访问不了）
安装 vue.js devtools 插件，这个插件虽然不是必要的，但是它很重要，可以提升开发效率。
安装插件后刷新 Vue 页面，在控制台底部会出现 Vue 选项卡。

关闭运行时提示

官方介绍：productionTip

如何实现？

在 index.html 文件中加上一句话。

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <script>
        Vue.config.productionTip = false;
    </script>
</body>
</html>

刷新页面会发现原来控制台打印的提示信息不在了，红框内是上面插件输出的，不用管。

Hello 小案例

创建 Vue 实例，并将其赋给常量 App
el：用于指定当前 Vue 实例为哪个容器(或者说是 DOM 节点)服务，值通常为 CSS 选择器字符串。

data：对象类型，用于存放当前 DOM 节点内的动态数据。在 DOM 节点中用形式渲染 Value

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="root">
        <h1>Hello，{{ name }}</h1>
        <h1>我的年龄是：{{ age }}</h1>
    </div>
    <script>
        Vue.config.productionTip = false;
        const App = new Vue({
            el: "#root",
            data: {
                name: '张三',
                age: 18
            }
        })
    </script>
</body>
</html>

解析 Hello 小案例

首先要明确一点，容器和 Vue 实例是一一对应的。具体看下面案例。

两个容器，一个实例

代码

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div class="root">
        <p>容器 1</p>
        <h1>Hello，{{ name }}</h1>
    </div>
    <div class="root">
        <p>容器 2</p>
        <h1>Hello，{{ name }}</h1>
    </div>

    <script>
        Vue.config.productionTip = false;

        const App = new Vue({
            el: ".root",
            data: {
                name: '张三'
            }
        })
    </script>
</body>
</html>

运行结果
说明：当有两个容器，一个实例时，Vue 实例只会管理第一个容器，第二个容器不做处理。

一个容器，两个实例

代码：

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="root">
        <h1>Hello，{{ name }}</h1>
        <h1>地址：{{ address }}</h1>
    </div>

    <script>
        Vue.config.productionTip = false;

        new Vue({
            el: "#root",
            data: {
                name: '张三'
            }
        })

        new Vue({
            el: "#root",
            data: {
                address: '内蒙古'
            }
        })
    </script>
</body>
</html>

运行结果
说明：当有一个容器，两个实例时，容器只会被第一个实例所管理，当使用第二个实例里的数据时，控制台会报错。

双打括号里都能写什么？

明确的说，内存放的是一个 js 表达式，表达式具有一个或多个返回值。

看下面案例

代码

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="root">
        <h1>Hello，{{ name }}</h1>
        <h1>{{ 1 + 1 }}</h1>
        <h1>{{ age + 20 }}</h1>
        <h1>{{ age > 18 ? '已成年' : '小学生' }}</h1>
    </div>

    <script>
        Vue.config.productionTip = false;
        new Vue({
            el: "#root",
            data: {
                name: '张三',
                age: 17
            }
        })
    </script>
</body>
</html>

运行结果

Vue 介绍 ​

Vue 特点 ​

官网 ​

测试代码 ​

安装 Chrome 插件 ​

关闭运行时提示 ​

Hello 小案例 ​

解析 Hello 小案例 ​

两个容器，一个实例 ​

一个容器，两个实例 ​

双打括号里都能写什么？ ​

Vue 介绍

Vue 特点

官网

测试代码

安装 Chrome 插件

关闭运行时提示

Hello 小案例

解析 Hello 小案例

两个容器，一个实例

一个容器，两个实例

双打括号里都能写什么？