脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue修改Dom不生效

Vue修改Dom不生效的解决

 更新时间：2023年06月02日 14:35:41   作者：messi0913  
这篇文章主要介绍了Vue修改Dom不生效的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

vue修改Dom不生效

场景

data中定义一个空数组，在mouted中用请求到大数据对其进行赋值，进入主页面不生效

注释掉的内容没有效果是因为对于已经创建的实例，Vue 不允许动态添加根级别的响应式属性。

vue的基本原理是通过Object.defineProperty重写变量的get和set方法来实现监听变量的改变和通知页面重新渲染的。

解决数据没有被双向绑定我们可以使用 vm.$set 实例方法，该方法是全局方法 Vue.set 的一个别名。

vue如何操作Dom

最近有些自闭，life is a shit，但是学习不能停，也开始继续健身了，试图让自己好一点.

我们需要在谷歌商店安装vue-devtools插件，打不开的话，点击这里，按照步骤操作后，就可以在谷歌商店下载插件了，下载插件的步骤：点击谷歌浏览器的更多工具 -> 扩展程序 -> 打开chrome网上应用商店 -> 搜索vue devtools -> 添加至chrome，之后打开哔哩哔哩的官网，右上角出现这个图标，则表示已经生效了

VUE是通过传递一些配置给Vue对象和页面中引用插值表达式来操作DOM的，我们就从其安装开始说明

1.VUE的使用

点击这里进入VUE中文官网，点击起步-->点击安装-->下载开发版本，然后在页面中直接引入就好了。

引入vue.js文件后，给我们提供了一个构造函数Vue，在js中，new Vue()会返回一个vue实例对象，我们用变量接收它，传递一个配置对象，代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入vue文件 -->
    <script src="./vue.js"></script>    
</head>
<body>
    <script>
        const vm = new Vue({
            //配置对象config
        });
    </script>
</body>
</html>

2.配置对象

上面说到new Vue()中可以传递一个配置对象，下面就来康康配置中有些什么属性吧

1.el

属性el的数据类型是字符串，表示element(元素)，其作用是：配置控制的元素，表示Vue要控制的区域，其值支持css选择器的筛选方式，举个栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入vue文件 -->
    <script src="./vue.js"></script>    
</head>
<body>
    <div id="app"></div>
    <script>
        const vm = new Vue({
            //配置对象config
            el: "#app"      //找到dom中id为app的元素
        });
        console.log("el:",vm.$el);    //$el是vm内置的对象
        console.log("vm:",vm);
    </script>
</body>
</html>

【结果】可以看到，能够选取到id为app的div元素

图1

2.$mount

这里要首先说明的是，$mount是vue的一个方法，并不是需要配置的对象，它的作用和el相同，例

const vm = new Vue({});
console.log("el",vm.$mount("#app").$el);    //$el是vm内置的对象
console.log("vm:",vm);

【结果】同图1相同

3.data

属性data的数据类型是对象，其作用是存放要用到的数据，且数据是响应式的，例子如下

【例2】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入vue文件 -->
    <script src="./vue.js"></script>    
</head>
<body>
    <div id="app">
        <!-- 将data中msg对应的数据渲染到页面 -->
        {{ msg }}
    </div>
    <script>
        const vm = new Vue({
            //配置对象config
            el: "#app" ,     //找到dom中id为app的元素
            data: {
                msg: "你不用装冷淡，我没想纠缠"
            }
        });
    </script>
</body>
</html>

【结果】页面中出现msg中的字符串

3.插值表达式

插值表达式的使用方法是用两个花括号将需要渲染到页面的数据括起来，如 {{ msg }}（例2所示），插值表达式中可以填写Vue中的data，数据值，表达式

  • 1）填写data
<body>
    <div id="app">
        <!-- 将data中msg对应的数据渲染到页面 -->
        {{ name }}
        {{ msg }}
    </div>
    <script>
        const vm = new Vue({
            //配置对象config
            el: "#app",     //找到dom中id为app的元素
            data: {
                msg: "你不用装冷淡，我没想纠缠",
                name: '离岸'
            }
        });
    </script>
</body>
  • 2）填写数据值

包括数字、字符串、布尔值、undefined、null、数组、对象等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <p>Number:{{ 123 }}</p>
        <p>String：{{ '寄给你全宇宙的爱和自太古至永劫的思念'}}</p>
        <p>Boolean：{{ true }}</p>
        <p>Array：{{ [1,2,3] }}</p>
        <p>Object:{{ {name:'离岸', word:'你不用装冷淡，我没想纠缠'} }}</p>
    </div>
    <script>
        const vm = new Vue({
            //配置对象config
            el: "#app"     //找到dom中id为app的元素
        });
    </script>
</body>
</html>

【结果】

  • 3）表达式

A.运算表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <p>加法：{{ 'you' + 'me' }}</p>
        <p>减法：{{ 10 - 5 }}</p>
        <p>乘法：{{ 100 * 7 }}</p>
        <p>除法：{{ 1000 / 12 }}</p>
    </div>
    <script>
        const vm = new Vue({
            //配置对象config
            el: "#app"     //找到dom中id为app的元素
        });
    </script>
</body>
</html>

【结果】

 B.逻辑表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 逻辑表达式 -->
        <p>或:{{ 0 || 1 }}</p>
        <p>与:{{ 1 && 0 }}</p>
        <p>非:{{ !0 }}</p>
    </div>
    <script>
        const vm = new Vue({
            //配置对象config
            el: "#app"     //找到dom中id为app的元素
        });
    </script>
</body>
</html>

【结果】

 C.三元表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 三元表达式 -->
        {{ 1 + 1 === 2 ? '小明胜利' : '小红胜利' }}
    </div>
    <script>
        const vm = new Vue({
            //配置对象config
            el: "#app"     //找到dom中id为app的元素
        });
    </script>
</body>
</html>

【结果】

 D.函数表达式

【注意】

  • 1）插值表达式不能填的内容：语句、流程控制
  • 2）若在插值表达式中填入未在data中声明的数据，则会报错
  • 3）若填入的数据在原型链上找不到，则值为undefined，例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        {{ edu.highSchool }}
    </div>
    <script>
        const vm = new Vue({
            //配置对象config
            el: "#app" ,    //找到dom中id为app的元素
            data: {
                name: 'jwh',
                edu: {
                    college: 'Xupt',
                    undergraduate: 'Xupt'
                }
            }
        });
    </script>
</body>
</html>

【结果】

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 基于Vue+ELement搭建动态树与数据表格实现分页模糊查询实战全过程

    基于Vue+ELement搭建动态树与数据表格实现分页模糊查询实战全过程

    这篇文章主要给大家介绍了关于如何基于Vue+ELement搭建动态树与数据表格实现分页模糊查询的相关资料,Vue Element UI提供了el-pagination组件来实现表格数据的分页功能,需要的朋友可以参考下
    2023-10-10
  • vue实现移动端touch拖拽排序

    vue实现移动端touch拖拽排序

    这篇文章主要为大家详细介绍了vue实现移动端touch拖拽排序，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-07-07
  • vue实现一个单文件组件的完整过程记录

    vue实现一个单文件组件的完整过程记录

    整个项目结构清晰,尤其单文件组件的表现力尤为突出,使得每个组件的逻辑都没有过于复杂,所以这篇文章主要给大家介绍了关于vue实现一个单文件组件的相关资料,需要的朋友可以参考下
    2021-06-06
  • Vue混合文件使用以及ref的引用实例详解

    Vue混合文件使用以及ref的引用实例详解

    ref用来辅助开发者在不依赖于jQuery的情况下,获取DOM元素或组件的引用,下面这篇文章主要给大家介绍了关于Vue混合文件使用以及ref的引用的相关资料,需要的朋友可以参考下
    2022-12-12
  • Vue路由配置方法详细介绍

    Vue路由配置方法详细介绍

    Vue3和Vue2基本差不多，只不过需要将createRouter、createWebHistory从vue-router中引入，再进行使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧
    2022-09-09
  • vue中使用jquery滑动到页面底部的实现方式

    vue中使用jquery滑动到页面底部的实现方式

    这篇文章主要介绍了vue中使用jquery滑动到页面底部的实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-12-12
  • 前端登录退出处理Token问题(获取、缓存、失效处理)及代码实现方法

    前端登录退出处理Token问题(获取、缓存、失效处理)及代码实现方法

    token是一个用户信息的表示,在登录中将会从后端拿到token,然后用户才可以进行往后的一系列操作,这篇文章主要给大家介绍了关于前端登录退出处理Token问题(获取、缓存、失效处理)及代码实现的相关资料,需要的朋友可以参考下
    2024-01-01
  • vue+axios+mock.js环境搭建的方法步骤

    vue+axios+mock.js环境搭建的方法步骤

    本篇文章主要介绍了vue+axios+mock.js环境搭建的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • vue2从数据变化到视图变化之diff算法图文详解

    vue2从数据变化到视图变化之diff算法图文详解

    这篇文章主要介绍了vue2从数据变化到视图变化之diff算法图文详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-09-09
  • Vue2.5学习笔记之如何在项目中使用和配置Vue

    Vue2.5学习笔记之如何在项目中使用和配置Vue

    这篇文章主要介绍了Vue2.5学习笔记之如何在项目中使用和配置Vue的相关知识，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-09-09

最新评论