vue学习——模板语法、数据绑定_表格数据能绑定模板字符串吗-优快云博客

本文介绍了Vue.js的基本概念和特点，如组件化、声明式编码和虚拟DOM。学习Vue.js需要掌握ES6语法、模块化和原型链等JavaScript基础知识。文中详细讲解了如何创建Vue实例、使用插值和指令语法，以及数据绑定的不同方式。同时，讨论了data和el的两种配置方法，并强调了在Vue中避免使用箭头函数的原因。

1.vue是什么？

vue是一套用于构建用户界面的渐进式javascript框架，自底向上逐层的应用

vue的特点:

1.采用组件化模式，提高代码复用率，且让代码更好维护

2.声明式编码，让编码人员无需直接操作DOM，提高开发效率

3.使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点

学习vue之前要掌握的js基础知识：

es6语法规范，ES6模块化，包管理器，原型，原型链，数组常用方法，axios，promise…

去除下列的vue提示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wglHRvGp-1629187557445)(C:\Users\ltting\AppData\Roaming\Typora\typora-user-images\image-20210817094016693.png)]

<script type="text/javascript">
        Vue.config.productionTip = false //vue全局配置：productionTip设置为 false 以阻止 vue 在启动时生成生产提示。
    </script>

初识vue

1.创建一个容器和vue实例(new Vue())，且要传入一个配置对象（如el、data）

2.容器里面的代码依然符合html规范，只是混入了一些特殊的vue语法

3.容器里面的代码被称为vue模板

4.容器和实例的关系的一对一的

5.实际开发中只有一个vue实例，并且配合着组件一起使用

6.插值表达式（插值语法，{{}}）中要写js表达式，而且要是vue实例的data中的属性

7.一旦data中的数据发生改变，在模板中与之对应的地方也会自动更新

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入开发版本的vue.js文件 -->
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <h1>hello，{{name}}</h1>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false;
        // vue是一个方法,里面是以键值对存在的
        new Vue({
            // 用于指定当前vue实例在哪个容器显示，值通常为css选择器字符串
            el: "#root",
            // data用于存储数据，数据供el所指定的容器去使用
            data: {
                name: "张三"
            }
        })
    </script>
</body>

</html>

vue模板语法有2大类

1.插值语法：

功能：用于解析标签体内容

写法：{{xxx}},xxx是js表达式，也可以是vue实例的配置对象data中的某个属性

2.指令语法：

功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）

举例：v-bind:href="xxx"或简写为:href=“xxx”，xxx同样可以是js表达式，也可以是data中的某个属性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <a v-bind:href="url">{{name}}</a>
        <a :href="url">{{name}}</a>
    </div>
    <!-- v-bind:属性绑定，简写就是——: -->
    <script>
        Vue.config.productionTip = false;
        new Vue({
            el: "#root",
            data: {
                name: "张三",
                url: "https:/www.baidu.com"
            }
        })
    </script>
</body>

</html>

vue中有2中数据绑定的方式：

1.单向绑定(v-bind)：数据只能从data流向页面（页面中的数据可以根据data的改变而改变，但是页面中的数据发生改变时，data中的属性值不会跟着改变）

2.双向绑定(v-model)：页面中的数据和data中的数据是实时对应的，一方改变了另一方也跟着改变

注意：

1.双向绑定一般应用于表单类元素上（如input、select等）

2.v-model:value可以简写成v-model，因为v-model默认收集的就是value值

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>

</head>

<body>
    <div id="root">
        <!-- 属性绑定（单向） -->
        <!-- <input type="text" v-bind:value="text"> -->
        <!-- 双向绑定：v-model只能应用于表单类元素，有value值，可以输入 -->
        <!-- <input type="text" v-model:value="text"> -->
        <input type="text" :value="text">
        <input type="text" v-model="text">
    </div>
    <script>
        Vue.config.productionTip = false;
        new Vue({
            el: "#root",
            data: {
                name: "张三",
                text: "数据绑定"
            }
        })
    </script>
</body>

</html>

data和el的两种写法：

1.el

1.1在new Vue()里面配置el属性

1.2先创建vue实例，随后再通过vue实例.$mount(“容器”)指定el的值

2.data

2.1对象式

2.2函数式

注意：在使用组件时，data必须使用函数式，使用对象式会报错

3.提示：由vue管理的函数一定不要写箭头函数，一旦写了箭头函数，它的this指向的就不是vue实例而是window了（因为箭头函数没有this，只能往外找，到window）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>

</head>

<body>
    <div id="root">
        <h1>{{name}}</h1>
        <span>{{text}}</span>
    </div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
                // 挂载容器的1.0写法：el
                // el: "#root",
                // data的1.0写法：对象式
                /* data: {
                    name: "张三",
                    text: "数据绑定"
                } */
                // data的2.0写法：函数式，必须要用return返回，在用到组件时，就要用函数式的data
                /* data: () => {
                    // 这里的this指向window，因为箭头函数没有自己的this就向外找，就到了window，所以data不要使用箭头函数形式
                    console.log(this);
                }, */
                data() {
                    // 这里的this是vue实例对象
                    console.log(this);
                    return {
                        name: "张三",
                        text: "数据绑定"
                    }
                }
            })
            // 前面有$符号的就是可用的属性，不带$符号的是底层的属性，不能使用
            // console.log(vm);
            // console.log(vm.__proto__ == Vue.prototype); //true
            // 挂载的2.0写法：$mount方法
            // $mount不是vue实例vm的方法，而是它的原型上的方法
            // vm.$mount("#root");
            // 1000ms之后，再将vue实例挂载到指定的容器上
        setTimeout(function() {
            vm.$mount("#root");
        }, 1000)
    </script>
</body>

</html>

       // $mount不是vue实例vm的方法，而是它的原型上的方法
        // vm.$mount("#root");
        // 1000ms之后，再将vue实例挂载到指定的容器上
    setTimeout(function() {
        vm.$mount("#root");
    }, 1000)
</script>

```