Vue.js入门：数据驱动视图与插值语法-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45503872/article/details/137968562

本文介绍了Vue.js的基本概念，包括数据驱动视图的原理，如何从GitHub获取Vue.js库，以及在HTML文件中引入Vue.js。重点讲解了2.1节的Vue插值语法，说明了{{}}双大括号用于渲染data中的属性或表达式，并强调不支持复杂的JavaScript逻辑判断。同时，指出了在Vue中自定义对象如content是无效的，所有数据应放在data对象内。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue的网址：https://github.com/vuejs Github网站

关于数据驱动视图的问题

首选我们看原生的JavaScript的代码

<body>
    <h1>
        0
    </h1>
    <button>按我加1</button>
    <button id="btn">按我减1</button>
    <script>
       var elH1 = document.getElementsByTagName("h1")[0];
       var elBtn = document.getElementsByTagName("button")[0];
       var elBtn2 = document.getElementById("btn");
       var num = 0;
       elBtn.onclick = function() {
        num ++;
        //重新绘制视图
        elH1.innerHTML = num;
       }

       elBtn2.onclick = function() {
        num--;
        elH1.innerHTML = num;
       }
    </script>
</body>

关于vue的数据驱动视图

<body>
    <div id="app">
        <h1>{{a}}</h1>
        <button @click="add">按我加1</button>
        <button @click="minus">按我减1</button>
    </div>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            // 挂载点
            el:'#app',
            // 数据
            data:{
                a: 0
            },
            // 方法
            methods: {
                add() {
                    this.a++
                },
                minus() {
                    this.a--
                }
            },
        })
    </script>
</body>

vue的引用

在Vue的起步中，区分开发环境和生产环境，两者的不同，开发环境可以清晰的看清源码，生产环境就是将源码进行压缩，占比大小更小，我们学习过程中使用生产环境

第二步

第三步将代码复制下来后，存入本地的js文件中

如何查看成功引入Vue文件？

创建一个HTML文件

<!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>
    <script src="js/vue.js"></script>
    <script>
        alert(Vue)
    </script>
</body>
</html>

如果此时浏览器弹出一个function对象，就表示引入成功了，否则如果报错了，就代表引入失败了

<body>
    <div id="app">
        {{a}}
    </div>
    <script src="js/vue.js"></script>
    <script>
        var vue = new Vue({
            // 挂载点，所有的Vue的方法和属性都必须在对应的挂载根标签内部使用
            el: '#app',
            // 数据管理中心，所有的Vue的数据都在data对象中
            data:{
                a: 100
            },
            // 方法，对应的Vue事件方法清单
            methods:{

            }
        })
    </script>
</body>

2.1 vue的插值语法

插值语法是通过一对{{}}进行书写，内部是对data数据管理中心的属性进行渲染，也可以是表达式

moustache（胡子）是双大括号学名，也叫（胡子语法）

内部也可以存放表达式

{{a >= 100 ? 20 : 10}}

注意，表达式支持简单，比如简单判断，比如三元表达式，不可以使用if等等复杂判断

~~{{if(a>200){a=100}else{a=300}}}~~

上面的写法是错误的，因为不支持使用复杂判断

我们需要注意的是，所有的对象中的清单内容，都是Vue规定，内置的，不可以自由发挥

<body>

    <div id="app">

        {{b}}

    </div>

    <script src="js/vue.js"></script>

    <script>

        var vue = new Vue({

            // 挂载点，所有的Vue的方法和属性都必须在对应的挂载根标签内部使用

            el: '#app',

            // 数据管理中心，所有的Vue的数据都在data对象中

            data:{

                a: 100

            },

            // 方法，对应的Vue事件方法清单

            methods:{

            },

            ~~content:{~~

                ~~b: 200~~

            }

        })

    </script>