02-Vue语法

﹏ヽ暗。殇╰゛Y 2024-05-03 14:33 69阅读 0赞

![在这里插入图片描述][e27293b9af5b4ba4aebdd5a07ad72bee.gif_pic_center]

#### 文章目录 ####

*  前言
 *  插值表达式
 *  常用系统指令
 *   *  v-on
     *  事件修饰符
     *  按键修饰符
     *  v-text 和 v-html
     *  v-bind
     *  v-model
     *  v-for
     *  v-if
     *  template标签
     *  v-cloak
     *  v-once
     *  v-pre
     *  el 的不同写法
     *  data的不同写法
     *  插值表达式可以绑定的其他变量

## 前言 ##

> ?前言?  
> ?博客：【无聊大侠hello word】?  
> ✍有一点思考，有一点想法，有一点理性！✍  
> ✍本文由在下【无聊大侠hello word】原创，首发于CSDN✍

## 插值表达式 ##

数据绑定最常见的形式就是使用"Mustache"语法（双大括号）的文本插值。vue提供了完全的javascript表达式支持。

{
        {
         2 + 1}} 
    
    {
        {
         ok ? 'YES' : 'NO'}}
    
    {
        {
         Date.now() }}

## 常用系统指令 ##

### v-on ###

可以使用`v-on`指令监听DOM事件，并在触发时运行一些JavaScript代码。

例如：使用v-on:click处理onclick事件

1.  在`vue`接管的div中添加一个`button`标签，标签使用`v-on:click="fun1('hello vue v-on')"`，为该button绑定一个点击事件，触发方法`fun1`，方法传值`hello vue v-on`。
2.  在vue的js代码中，添加`methods`属性，并在该属性内添加触发的方法定义。

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>v-on:click</title>
    		<script src="js/vuejs-2.5.16.js"></script>
    	</head>
    	<body>
    		<div id="app">
    			{
       {message}}  
                
                
                
                
    			<button v-on:click="fun1('hello vue v-on')">vue的onclick</button>
    		</div>
    	</body>
    	<script>
    		//view model
    		new Vue({
          
    			el: "#app",
    			data: {
          
    				message: "hello vue"
    			},
    			methods: {
          
    				fun1:function (msg) {
          
                    // 或者简写为 
                    // fun1(msg) {
          
    					alert("hello");
    					this.message = msg;
    				}
    			}
    		})
    	</script>
    </html>

使用`v-on:keydown`绑定按键按下事件，使用`$event`作为参数获取事件对象：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>v-on:keydown</title>
    		<script src="js/vuejs-2.5.16.js"></script>
    	</head>
    
    	<body>
    		<div id="app">
                
                
                
    			<input type="text" v-on:keydown="fun($event)">
    		</div>
    	</body>
    	<script>
    		new Vue({
          
    			el: "#app",
    			methods: {
          
                    // vue 中的event对象，和传统js中的event对象是一样的
    				fun:function(event) {
          
    					if(event.keyCode == 13) {
          
    						alert(1);
    					}
    				}
    			}
    		})
    	</script>
    </html>

`v-on`可以简写为`@`，例如：

vue中为`v-on`提供了事件修饰符来处理dom事件细节，如`event.preventDefault()、event.stopPropagation()`。

**vue中阻止事件传播：**

`<div id='parent'>`内部有一个`<div id='child'>`，此时如果鼠标移动到child上时，会先触发child绑定的鼠标移入事件；执行完`child`鼠标移入事件绑定的function后，会继续向上传播给`parent`，再触发`parent`上绑定的鼠标移入事件。

在传统js中，如果在执行了child的鼠标移入事件后，不想继续传播给`parent`，可以通过调用event对象的`stopPropagation()`终止事件的传播。

例如：

function childMouseOver() {
        
        alert('鼠标移动到child上了');
        event.stopPropagation();  // 终止事件的传播
    }
    
    function parentMouseOver() {
        
        alert('鼠标移动到parent上了');
    }

因为vue的event对象和传统js的event对象是相同的，所以在vue中，如果要阻止事件的传播，也可以使用该语句：

event.stopPropagation();

### 事件修饰符 ###

vue通过由点（`.`）标示顿指令后缀来调用修饰符：

*  `.stop`：阻止事件冒泡（向上层传播）。同js的event.stopPropagation()
 *  `.prevent`：阻止事件的默认行为，例如`<a>`标签的跳转等。同js的`event.preventDefault()`
 *  `.capture`：使用事件的捕获模式
 *  `.self`：只有`event.target`是当前操作的元素时才触发事件
 *  `.once`：事件只触发一次
 *  `.passive`：事件的默认行为立即执行，无需等待事件回调执行完毕。例如：在有滚动条的页面使用@wheel监控鼠标的滚轮滚动事件，不加`.passive`时，需要等该事件绑定的函数执行完毕后，滚动条才会向下滚动；加上`.passive`后，即使滚轮绑定的函数没有执行完，滚动条也会立即开始滚动。

表单提交前验证（表单提交前，验证方法如果不通过，则不进行提交）：

传统的js：

1.  绑定一个方法到`onsubmit`事件，`onsubmit`需要使用`return xxxxx()`，否则即使验证不通过也依然会提交
2.  绑定的方法需要有一个明确的boolean类型返回值，验证通过返回true，验证不通过返回false

<!DOCTYPE html>
    <html>
    	<body>
    		<div id="app">
                
    			<form action="https://www.baidu.com" method="post" onsubmit="return checkForm()">
    				<input type="submit" value="提交">
    			</form>
    		</div>
    	</body>
    	<script>
    		function checkForm() {
          
    			alert(1);
    			// 表单验证必须有一个明确的boolean类型返回值
    			return false;
    		}
    	</script>
    </html>

vue使用`.prevent`方式阻止表单提交：

<div id="app">
        
        <form @submit.prevent action="https://www.baidu.com" method="post">
            <input type="submit" value="提交">
        </form>
    </div>
    <script>
        // 需要vue接管该区域
        new Vue({
          
            el: '#app'
        });
    </script>

vue调用`.stop`修饰符的方式阻止事件冒泡传播：child在parent里面，鼠标移入child时除了触发child的鼠标移入事件，也会冒泡给parent。但是加上`.stop`后，在执行完child的方法后，不再向上冒泡执行parent的方法。

vue使用`.capture`使用事件的捕获模式：

未使用`.capture`时：事件捕获阶段：点击事件会先捕获到外面的div1，后捕获到里面的div2。事件冒泡阶段：先执行里面的div2的事件方法，再冒泡执行div1的事件方法。

<body>
        <div id="app">
            <div id="div1" @click="showMsg(1)">
                div1
                <div id="div2" @click="showMsg(2)">
                    div2
                </div>
            </div>
        </div>
    </body>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
          
            el: '#app',
            methods: {
          
                showMsg(msg) {
          
                    console.log(msg);
                }
            }
        });
    </script>

在div1加上`.capture`，启用捕获模式：

因为在捕获阶段是先捕获的外面的div1，所以加上`.capture`后，会先执行外面div1的绑定事件方法，后执行里面的div2事件方法

<body>
        <div id="app">
            <div id="div1" @click.capture="showMsg(1)">
                div1
                <div id="div2" @click="showMsg(2)">
                    div2
                </div>
            </div>
        </div>
    </body>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
          
            el: '#app',
            methods: {
          
                showMsg(msg) {
          
                    console.log(msg);
                }
            }
        });
    </script>

事件修饰符可以流式处理，连续使用多个：

例如：先阻止冒泡，再阻止弹窗

<a href="https://www.baidu.com" @click.stop.prevent="showInfo">点击提示信息</a>

### 按键修饰符 ###

vue允许为`v-on`在监听键盘事件时添加按键修饰符：

按键修饰符别名：

*  `.enter`
 *  `.tab`
 *  `.delete`（捕获“删除”和“退格”键）
 *  `.esc`
 *  `.space`
 *  `.up`
 *  `.down`
 *  `.left`
 *  `.right`
 *  `.ctrl`
 *  `.alt`
 *  .`shift`
 *  `.meta`（Windows按键）

vue调用`.enter`获取回车键、调用`delete`获取删除键：

<body>
        <div id="app">
            test:<input type="text" @keydown.enter="fun1" @keydown.delete="fun2">
            <br>
            
    		test2:<input type="text" @keydown.alt.67="fun3">
        </div>
    </body>
    <script>
        new Vue({
          
            el: '#app',
            methods: {
          
                fun1: function () {
          
                    alert("按下了回车键");
                },
                fun2: function () {
          
                    alert("按下了删除键");
                },
                fun3: function () {
          
                    alert("同时按下了alt和C");
                }
            }
        });
    </script>

也可以使用按键的键名，例如：

@keydown.Enter // 此处的Enter是按键键名，vue中的enter是vue为该按键起的别名
    // 获取键名和键值的方式：
    let keyName = event.key;
    let keyCode = event.keyCode;
    
    // 该方式对单个单词的键名有效，例如Enter、Control
    // 对于多个单词组成的键名，需要将单词转成小写，单词间使用横线连接
    @keydown.CapsLock  // 该写法无效，因为CpasLock是两个单词
    @keydown.caps-lock // 该写法可以正常识别

或者使用键值进行修饰（不推荐）:

> 虽然部分浏览器还支持这种写法，但是将来可能会被移除。不推荐使用这种写法。不同用户的键盘键值可能也有差异。

@keydown.13 // 按下回车键

也可以自定义按键别名：（也不推荐）

Vue.config.keyCodes.自定义键名 = 键码

对于tab键，不适合使用`keyup`事件，因为tab键本身就会切换焦点，按下tab键后焦点就移动到其他地方去了。所以对于tab键，一般使用`keydown`事件。

ctrl、alt、shift、meta是系统修饰键，配合keydown可以正常使用。但是如果配合keyup事件，需要按下修饰键的同时，再按下其他键，随后释放其他键，事件才能被触发。

`methods`中的`this`：

<body>
        <div id="app">
            <button v-on:click="showInfo">提示信息</button>
        </div>
    </body>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
          
            el: '#app',
            methods: {
          
                // 此处不建议使用箭头函数，因为如果使用箭头函数则this变为window，而不是Vue实例。
                // 如果是组件，那么this就是组件。使用了箭头函数就不再指向组件就会报错。
                showInfo(event) {
            // 和普通的绑定事件函数一样，该函数也有一个默认event事件参数
                    console.log(event.target.innerHTML); // 可以通过event事件获取相关内容
                    console.log(this);  // 此处的this是Vue实例
                }
            }
        });
    </script>

`methods`中定义的函数最终也会被加进`vm`对象属性上。

所以，理论上，把showInfo写在data中也可以正常运行：

但是不推荐这么做。因为`data`中的内容vue是需要做数据代理的，但是`methods`中的内容不需要做数据代理也能运行。如果把函数写在`data`中，就会消耗资源让vue对函数做了没有意义的数据代理。

### v-text 和 v-html ###

传统js的`innerText`和`innerHTML`：

window.onload = function () {
        
    	// innerText会将<h1>作为字符串输出
        document.getElementById("div1").innerText = '<h1>text</h1>';
        // innerHTML会解析<h1>，将innerHTML字符串加粗
        document.getElementById("div2").innerHTML = '<h1>innerHTML</h1>';
    }

vue里面使用`v-text`、`v-html`进行处理：

<div id="app">
        
        <div v-text="message"></div>
        
        <div v-html="message"></div>
    </div>
    <script>
        new Vue({
          
            el: "#app",
            data: {
          
                message: "<h1>text</h1>"
            }
        });
    </script>

### v-bind ###

插值语法不能作用在HTML特性上，遇到这种情况应该使用`v-bind`指令。

例如：将html的color属性设置成变量

<font size="5" color="{
        {myColor}}">text</font>

想要给Html标签属性设置变量，需要使用`v-bind`指令：

<body>
        <div id="app">
            <font size="5" v-bind:color="myColor1">text1</font>
            <font size="5" v-bind:color="myColor2">text2</font>
        </div>
    </body>
    <script>
        new Vue({
          
            el: '#app',
            data: {
          
                myColor1: "red",
                myColor2: "green"
            }
        });
    </script>

`v-bind`指令也可以进行简写：

<font size="5" v-bind:color="myColor2">text2</font>
    
    <font size="5" :color="myColor2">text2</font>

绑定`class`属性时，普通的`class`和`v-bind:class`可以自动合并：

<div class="basic" :class="a"></div>
    
    
    <script>
        new Vue({
          
            data: {
          
                a: ['test1', 'test2', 'test3']
            }
        })
    </script>
    
    
    <div class='basic' :class='["test1", "test2", "test3"]'></div>
    
    
    <div class='basic' class='[a, b, c]'></div>
    <script>
        new Vue({
          
            data: {
          
                a: 'test1',
                b: 'test2',
                c: 'test3'
            }
        })
    </script>

绑定class的对象写法：

<div class='basic' :class="classObj"></div>
    <script>
        new Vue({
        
            data: {
        
                classObj: {
        
                    test1: true,  // 使用test1样式
                    test2: false  // 不使用test2样式
                }
            }
        });
    </script>
    
    
    <div class='basic' :class="{test1:true, test2:false}"></div>

`v-bind`绑定style：

<body>
        <div id="app">
            
            <div id="basic2" style="font-size:40px;">aaa</div>
            
            
            <div id="basic" :style="{fontSize: fsize + 'px'}">aaa</div>
        </div>
    </body>
    <script>
        const vm = new Vue({
          
            el: '#app',
            data: {
          
                fsize: 40
            }
        });
    </script>

也可以写成：

<body>
        <div id="app">
             
            <div id="basic" :style="styleObj">aaa</div>
        </div>
    </body>
    <script>
        const vm = new Vue({
          
            el: '#app',
            data: {
          
                // 将样式变量写成对象形式
                styleObj: {
          
                    // 属性名使用小驼峰写法
                    fontSize: '40px',
                    color:'red',
                    backgroundColor:'orange'
                }
            }
        });
    </script>

style数组写法：

<body>
        <div id="app">
             
            <div id="basic" :style="[styleObj, styleObj2]">aaa</div>
        </div>
    </body>
    <script>
        const vm = new Vue({
          
            el: '#app',
            data: {
          
                styleObj: {
          
                    fontSize: '40px'
                }
                styleObj2: {
          
                    color:'red',
                    backgroundColor:'orange'
               
            }
        });
    </script>

### v-model ###

`v-bind`是单向的数据绑定：

<input type="text" v-bind:value="user.username"> <br>

使用`v-mode`l进行对象属性双向绑定：

`v-model`只能用在表单类输入元素上。

`v-model:value`可以简写为`v-model`，因为`v-model`收集的就是value属性值。

<body>
        <div id="app">
            <form action="" method="post">
                用户名: <input type="text" v-model:value="user.username"> <br>
                
                密码: <input type="text" v-model="user.password"> <br>
            </form>
        </div>
    </body>
    <script>
        new Vue({
          
            el: '#app',
            data: {
          
                user: {
          
                    username: 'tom',
                    password: '123456'
                }
            }
        });
    </script>

### v-for ###

使用`v-for`遍历数组：

<body>
        <div id="app">
            
            <li v-for="(item) in list1">{
       {item}}</li>
            
            <li v-for="(item) in list2">{
       {item.username + ":" + item.age}}</li>
        </div>
    </body>
    <script>
        new Vue({
          
            el: '#app',
            data: {
          
                list1: ['tom', 'jane', 'marry'],
                list2: [
                    {
          username: 'tom', age: 10},
                    {
          username: 'jane', age: 30},
                    {
          username: 'marry', age: 18},
                ]
            }
        });
    </script>

也可以遍历成2个参数，第1个参数为项目值，第2个参数为在数组中的下标：

<li v-for="(item, index) in list1">{
        {
        index + ": " + item}}</li>

遍历对象：

<body>
    		<div id="app">
                
    			<li v-for="(value, key) in list3">{
       {key + ":" + value}}</li>
    		</div>
    	</body>
    	<script>
    		new Vue({
          
    			el: '#app',
    			data: {
          
    				list3: {
          
    					id: 1,
    					name: 'tom',
    					age: 19
    				}
    			}
    		});
    	</script>

遍历字符串：

<div id="app">
        <ul>
            <li v-for="(char, index) in str">{
       {index}}:{
       {char}}</li>
        </ul>
    </div>
    <script>
        const vm = new Vue({
          
            data: {
          
                str: "hello"
            }
        });
    </script>

遍历指定次数：

<li v-for="(value,index) in 5">{
        {
        index}}:{
        {
        value}}</li>

双层循环：

<body>
        <div id="app">
            <table>
                <tr>
                    <td>序号</td>
                    <td>名称</td>
                    <td>年龄</td>
                </tr>
                
                <tr v-for="(item, index) in list2">
                    <td>{
       {index}}</td>
                    
                    <td v-for="(value, key) in item">{
       {key + ":" + value}}</td>
                </tr>
            </table>
        </div>
    </body>
    <script>
        new Vue({
          
            el: '#app',
            data: {
          
                list2: [
                    {
          username: 'tom', age: 10},
                    {
          username: 'jane', age: 30},
                    {
          username: 'marry', age: 18},
                ]
            }
        });
    </script>

`v-for`为每个数据添加key：

<body>
        <div id="app">
            <h2>人员列表</h2>
            <ul>
                
                <li v-for="p in persons" :key="p.id">{
       {p.name}}-{
       {p.age}}</li>
            </ul>
        </div>
    </body>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
          
            el: '#app',
            data: {
          
                persons: [
                    {
          
                        id: 1,
                        name: '张三',
                        age: 18
                    },
                    {
          
                        id: 2,
                        name: '李四',
                        age: 20
                    },
                    {
          
                        id: 3,
                        name: '王五',
                        age: 30
                    }
                ]
            }
        });
    </script>

也可以将索引值定义为key：

<li v-for="(p,i) in persons" :key="i">{
        {
        p.name}}-{
        {
        p.age}}</li>

**Key的内部原理：**

在虚拟DOM中，key是虚拟DOM对象的标识。

当状态中的数据发生变化时，Vue会根据“新数据”生成“新的虚拟DOM”，随后Vue进行“新虚拟DOM”与“旧虚拟DOM”的差异比较，比较规则为：

*  旧虚拟DOM中找到了与新虚拟DOM相同的key：
    
     *  若虚拟DOM中内容没变，直接使用之前的真实DOM
     *  若虚拟DOM中内容变了，则直接生成新的真实DOM，随后替换到页面中之前的真实DOM
 *  旧虚拟DOM中未找到与新虚拟DOM相同的key：
    
     *  创建新的真实DOM，随后渲染到页面

用`index`索引值作为key可能会引发的问题：

*  若对数据进行逆序添加（不从尾部追加）、逆序删除（不是从后往前删除）等破坏顺序的操作，会产生没有必要的真实DOM更新，结果界面效果没有问题，但是效率变低
 *  如果同时数据中还包含输入类的DOM，则会产生错误的DOM更新，致使界面错乱

开发中如何选择key：

*  最好使用每条数据的唯一标识作为key，例如id等
 *  如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。

当`v-for`标签中没有写key时，vue会默认使用index作为key。

`v-for`里面可以使用`of`代替`in`，效果一样：

<li v-for="p in persons" :key="p.id">{
        {
        p.name}}-{
        {
        p.age}}</li>
    <li v-for="p of persons" :key="p.id">{
        {
        p.name}}-{
        {
        p.age}}</li>

示例：列表过滤并排序：

<body>
        <div id="app">
            <h2>列表过滤并排序</h2>
            <input type="text" placeholder="请输入名字" v-model="keyWord">
            <button @click="sortType = 1">年龄升序</button>
            <button @click="sortType = 2">年龄降序</button>
            <button @click="sortType = 0">原顺序</button>
            <ul>
                <li v-for="(p,index) of fillPersons">
                    {
       {p.name}}-{
       {p.age}}-{
       {p.sex}}
                </li>
            </ul>
        </div>
    </body>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
          
            el: '#app',
            data: {
          
                keyWord:'',
                sortType:0, // 0:原顺序，1：升序，2：降序
                persons: [
                    {
          id:'001', name:'马冬梅', age: 19, sex:'女'},
                    {
          id:'002', name:'周冬雨', age: 20, sex:'女'},                
                    {
          id:'004', name:'温兆伦', age: 22, sex:'男'},
                    {
          id:'003', name:'周杰伦', age: 21, sex:'男'}
                ]
            },
            computed: {
          
                fillPersons() {
          
                    const arr = this.persons.filter((p) => {
          
                        return p.name.indexOf(this.keyWord) !== -1;
                    });
                    if(this.sortType) {
          
                        arr.sort((a,b) => {
          
                            return this.sortType === 1 ? b.age-a.age : a.age-b.age;
                        });                    
                    }
                    return arr;
                }
            }
        });
    </script>

### v-if ###

条件渲染指令：`v-if`、`v-else-if`、`v-else`，`v-show`。

`v-show`做条件渲染，判断是否展示该标签：

<h2 v-show='true'>aaa</h2>
    
    <h2 v-show='1 == 2'>aaa</h2>
    
    <h2 v-show='a'>aaa</h2>
    <script>
        new Vue({
          
            data: {
          
                a: true
            }
        });
    </script>

`v-if`做条件渲染：

<h2 v-if='true'>aaa</h2>

`v-if`如果为false时，该标签不再渲染出来。`v-show`为false时，会将该标签设置为`display:none`。

如果变量的值变化频繁，建议使用`v-show`，因为`v-show`的标签已经渲染出来，只是设置了`display`属性是否展示。

else的用法：

<div v-if="n === 1">
        Angular
    </div>
    <div v-else-if="n === 2">
        React
    </div>
    <div v-else-if="n === 3">
        Vue
    </div>
    <div v-else>
        abc
    </div>

一组`v-if`、`v-else-if`、`v-else`必须紧紧挨在一起，不能被打断：

下面的代码会报错：

<div v-if="n === 1">Angular</div>
    <div v-else-if="n === 2">React</div>
    
    <div>aaaa</div>
    <div v-else>abc</div>

### template标签 ###

使用`<template>`标签简写代码：

<h2 v-if="n === 1">hello</h2>
    <h2 v-if="n === 1">aaa</h2>
    <h2 v-if="n === 1">bbb</h2>
    
    
    
    <template v-if="n === 1">
        <h2>hello</h2>
        <h2>aaa</h2>
        <h2>bbb</h2>
    </template>

`<template>`只能和`v-if`配合使用，不能写`v-show`

### v-cloak ###

在标签上加上的`v-cloak`指令，会在vue接管该标签时删除该指令。

用途：如果src引入的vue网速较慢，可以使用`v-cloak`配合css让该标签暂时不显示。

例如：

<html>
        <head>
            <style>
                [v-clock] {
            // 获取带有v-clock属性的标签
                    display: none
                }
            </style>
        </head>
    	<body>
            <div id='app'>
                
                <h2 v-cloak>{
       {name}}</h2>
            </div>
            
            <script src="http://xxxx/vue.js"></script>
        </body>
        <script>
            new Vue({
          
                el:'#app',
                data:{
          
                    name:'tom'
                }
            });
        </script>
    </html>

### v-once ###

`v-once`所在节点在初次动态渲染后，就视为静态内容了。以后数据的改变不会引起`v-once`所在结构的更新，可以用于优化性能。

例如：

<h2 v-once> n的初始值：{
       {n}} </h2>
    <h2> n的当前值：{
       {n}} </h2>
    <button @click="n++"> n+1 </button>

点击n+1按钮后，n的当前值会+1，但是`v-once`所在标签不再动态更新，依然显示的n初始值。

### v-pre ###

`v-pre`指令可以让vue跳过其所在节点的编译过程。可以利用该指令跳过没有使用指令语法、没有使用插值语法的节点，会加快编译。

例如：

<h2 v-pre>aaa</h2>
    
    <h2 v-pre> {
       {n}} </h2>
    
    <button v-pre @click="n++">n+1</button>

### el 的不同写法 ###

`el`是`element`的意思，即获取element对象。

el可以赋值一个选择器，例如：id选择器`#app`、class选择器`.app`，还可以直接赋值dom对象`document.getElementById('#app')`

第一种写法：

<div id='app'>
        {
       {name}}
    </div>
    <script>
        new Vue({
          
            el: '#app',  // 在创建Vue实例时就直接指定接管的dom对象
            data: {
          
                name: 'tom'
            }
        });
    </script>

第二种写法：

<div id='app'>
        {
       {name}}
    </div>
    <script>
        const vm = new Vue({
          
            data: {
          
                name: 'tom'
            }
        });
        
        // 打印出来的vm对象中，美元符$开头的属性是Vue提供给开发人使用的；下划线_开头的属性是Vue底层用到的
        console.log(vm);
        
        // 利用VM对象的$mount属性绑定接管的dom对象
        // $mount属性不是vm直接带有的，而是创建vm对象的Vue的，可以通过原型链找到该属性
        // 这种方式可以更灵活的绑定需要接管的dom对象
        vm.$mount('#app'); 
    </script>

为什么是`$mount`属性：Vue代码运行之后，得到的`name`变量和值存储在vm内，需要将其“挂载”到页面上，`$mount`即指定“挂载”的位置。

### data的不同写法 ###

第一种写法：（对象式）

const vm = new Vue({
        
        el: '#app',
        data: {
        
            name: 'tom'
        }
    });

第二种写法：（函数式）

或者：

function getData() {
        
        return {
        
            name: 'tome'
        }
    }
    const vm = new Vue({
        
        el: '#app',
        data: getData
    });

只要是Vue管理的函数，一定不要写成箭头函数，否则this就不是Vue实例了。

### 插值表达式可以绑定的其他变量 ###

const vm = new Vue({
        
        el: '#app',
        data: {
        
            name: 'tom',
            age: 18
        }
    });
    console.log(vm);

`new Vue`返回的Vue实例，就对应到`MVVM`模型的`ViewModel`，所以一般将这个变量名简写为`vm`。

我们编码写在`data`中的数据，最后都出现在了`vm`属性里（通过数据代理）。

所有vm上的属性也都可以直接使用插值语法绑定到页面模板里：

<div>    {
       { $options }} </div>

不只是`vm`上的属性，包括创建`vm`的Vue上的属性也可以通过原型链在`vm`上找到，所以也可以进行绑定：

<div>{
       {$emit}}</div>

**先赞后看，养成习惯！！！^ \_ ^ ❤️ ❤️ ❤️  
码字不易，大家的支持就是我的坚持下去的动力。点赞后不要忘了关注我哦！**

[e27293b9af5b4ba4aebdd5a07ad72bee.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/03/680157afc15b43ad97b1c9b0ac5cd1b3.gif