hualinux 进阶 vue 1.3：vue实例参数el data说明

最新推荐文章于 2022-05-23 13:33:18 发布

hualinux

最新推荐文章于 2022-05-23 13:33:18 发布

阅读量1k

点赞数

分类专栏：进阶篇3 vue.js专业前端入门文章标签： hualinux hualinux vue vue实例参数说明

本文链接：https://blog.csdn.net/hualinux/article/details/115458316

版权

进阶篇3 vue.js专业前端入门专栏收录该内容

32 篇文章 4 订阅

订阅专栏

一、前章vue代码回顾

二、vue实例参数：el挂载点（必填）

2.1 说明

三、Vue实例参数：data数据显示（数据显示）

3.1 说明

3.2 原生js与vue对比

四、注意事项

前章我们讲了vue的简单例子，现在讲vue基础语法：挂载点、模板、实例

一、前章vue代码回顾

为了更好的对语法说明，我这里要借助一下上章vue的例子，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue test</title>
    <script src="static/js/vue.js"></script>
</head>
<body>
<div id="root">hello {{ msg }}</div>
<script>
    new Vue({
        el: "#root",
        data: {
            msg: "vue"
        }
    })
</script>
</body>
</html>

二、vue实例参数：el挂载点（必填）

2.1 说明

el：我让vue去接管网页上那个Element（元素），可以是 CSS 选择器，也可以是一个 HTMLElement 实例

比如上面例子中el: "#root"，意思是让Vue实现是去接管id为“root”里面的内容，这里就与id为”root”的dom进行了绑定

PS：如果 Vue 实例在实例化时没有收到 el 选项，则它处于“未挂载”状态，没有关联的 DOM 元素。可以使用 vm.$mount() 手动地挂载一个未挂载的实例。

对于初学者不需要了解这些清楚，当学完再去看这方面的内容即可。

三、Vue实例参数：data数据显示（数据显示）

3.1 说明

我们如果要在实例中显示数据，可以使用vue的data参数

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

<span>
Message: {{ msg }}
</span>

Mustache 标签将会被替代为对应数据对象上 msg property 的值。无论何时，绑定的数据对象上 msg property 发生了改变，插值处的内容都会更新。

3.2 原生js与vue对比

在没有vue之前我们可以使用原生的写代码

<div id="root">hello {{ msg }}</div>
<script>
    var dom = document.getElementById("d1").innerText="hello js"
</script>

有了vue之后

<div id="#root">hello {{ msg }}</div>
<script>
    new Vue({
        el: "#root",
        data: {
            msg: "vue"
        }
    })
</script>

我们可以用双花括号来声明要使用名为msg的数据，使用Vue实例的el参数与html标签进行绑定，使用data中定义msg数据的值即可。

四、注意事项

我们使用vue.js编程的时候，我们不会任何dom的操作，而着重与数据的编写。

当我们数据写好的时候Vue会帮我们接管dom操作，它会自动帮我们替换掉标签的一些占位符。

hualinux

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
hualinux 进阶 vue 1.3：vue实例参数el data说明

目录一、前章vue代码回顾二、vue实例参数：el挂载点（必填）2.1 说明三、Vue实例参数：data数据显示（数据显示）3.1 说明3.2 原生js与vue对比四、注意事项前章我们讲了vue的简单例子，现在讲vue基础语法：挂载点、模板、实例一、前章vue代码回顾为了更好的对语法说明，我这里要借助一下上章vue的例子，代码如下：<!DOCTYPE html><html lang="en"><head> &.
复制链接

扫一扫