第四节：VUE数据渲染指令

最新推荐文章于 2023-11-23 10:55:02 发布
最新推荐文章于 2023-11-23 10:55:02 发布
阅读量206 收藏 1
点赞数
分类专栏： vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43220836/article/details/126304271
版权

第四节：VUE数据渲染指令

目录

$set 修改并渲染数据

v-pre :跳过当前的样式，阻止指令的执行;

v-cloak 加载完成后再解析代码 当网络延迟是页面将渲染未解析的数据 如{{des}} v-cloak解决该问题

$delete 删除数组中某一个元素

directive :注册指令 Vue中方法

filters : 注册过滤器 钩子函数

component 注册全局组件 Vue中方法

components 注册局部组件 钩子函数

props:[] 传值

1、$set 修改并渲染数据

$set 修改数组值 修改data中参数数据等

语法：

this.$set(this.arrays, index, value)
this.$set(this.arrays, name, 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>
</head>

<body>
    <div id="app">
        <h1 v-html="about"></h1>
        <p>{{author}}</p>
        <ul>
            <li v-for="items in arrays">{{items}}</li>
        </ul>
        <p>ID:{{user.id}} : name:{{user.name}}</p>
        <input type="button" :value="'funcChangeArrays'" @click="funcChangeArrays">
        <input type="button" :value="'funcChangeAutor'" @click="funcChangeAutor">
        <input type="button" :value="'funcChangeUser'" @click="funcChangeUser">
    </div>

    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data () {
                return {
                    about: '$set 修改数组值',
                    author: 'xiaoge',
                    arrays: ['张三', '李四', '王二', '麻子'],
                    user: { name: "xiaoge", id: 1 }
                }
            },
            methods: {
                funcChangeArrays: function () {
                    this.$set(this.arrays, 0, "二狗")
                },
                funcChangeAutor () {
                    this.$set(this.$data, 'author', "我呀！")
                },
                funcChangeUser () {
                    this.$set(this.user, 'name', "用户名")
                }
            }
        })
    </script>
</body>

</html>

2、v-pre :阻止代码解析

v-pre :阻止代码解析 以原型显示到页面上

语法：

<div v-pre></div>

<!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>
</head>

<body>
    <div id="app">
        <h1 v-html="about"></h1>
        <p>{{author}}</p>
        <!-- ul中循环将不被解析 将以原型显示到页面上 -->
        <ul v-pre>
            <li v-for="items in arrays">{{items}}</li>
        </ul>
        <p>ID:{{user.id}} : name:{{user.name}}</p>

    </div>

    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data () {
                return {
                    about: '$set 修改数组值',
                    author: 'xiaoge',
                    arrays: ['张三', '李四', '王二', '麻子'],
                    user: { name: "xiaoge", id: 1 }
                }
            }
        })
    </script>
</body>

</html>

3、v-cloak 加载完后解析

v-cloak 加载完后解析 解决刷新页面时闪烁问题

语法：

[v-cloak]{
	display: none;
}

<!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>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <h1 v-html="about"></h1>
        <p>{{author}}</p>
        <!-- ul中循环将不被解析 将以原型显示到页面上 -->
        <ul>
            <li v-for="items in arrays">{{items}}</li>
        </ul>
        <p>ID:{{user.id}} : name:{{user.name}}</p>

    </div>

    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data () {
                return {
                    about: '$set 修改数组值',
                    author: 'xiaoge',
                    arrays: ['张三', '李四', '王二', '麻子'],
                    user: { name: "xiaoge", id: 1 }
                }
            }
        })
    </script>
</body>

</html>

4、$delete删除数组元素

$delete 删除数组元素

语法：

this.$delete(this.arrays, index) [prame ：(数组，下标)]
this.$delete(this.user, name) [prame ：(JSON对象，键值)]

<!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>
</head>

<body>
    <div id="app">
        <h1 v-html="about"></h1>
        <p>{{author}}</p>
        <ul>
            <li v-for="items in arrays">{{items}}</li>
        </ul>
        <p>ID:{{user.id}} : name:{{user.name}}</p>
        <input type="button" :value="'funcDelArrays'" @click="funcDelArrays">
        <input type="button" :value="'funcDelUser'" @click="funcDelUser">
    </div>

    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data () {
                return {
                    about: '$set 修改数组值',
                    author: 'xiaoge',
                    arrays: ['张三', '李四', '王二', '麻子'],
                    user: { name: "xiaoge", id: 1 }
                }
            },
            methods: {
                funcDelArrays: function () {
                    this.$delete(this.arrays, 0)
                },
                funcDelUser () {
                    this.$delete(this.user, 'name')
                }
            }
        })
    </script>
</body>

</html>

5、directive :注册指令

directive 注册指令 Vue中方法

语法：

Vue.directive('name', function (el, bind) { })

<!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>
</head>

<body>
    <div id="app">
        <h1 v-html="about"></h1>
        <p v-author='author'></p>
        <p v-name='user.id + user.name'></p>
    </div>

    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <script>
        Vue.directive('author', function (el, bind) {
            console.log(el) // 文本对象
            console.log(bind) // 对象信息
            el.innerHTML = bind.value
            el.style.color = 'green'
            el.style.backgroundColor = 'yellow'
        })

        Vue.directive('name', function (el, bind) {
            console.log(el) // 文本对象
            console.log(bind) // 对象信息
            el.innerHTML = bind.value
            el.style.color = 'green'
            el.style.backgroundColor = 'yellow'
        })

        new Vue({
            el: '#app',
            data () {
                return {
                    about: 'directive :注册指令',
                    author: 'xiaoge',
                    user: {
                        id: 1,
                        name: "张三"
                    }
                }
            }
        })
    </script>
</body>

</html>

6、filters : 注册过滤器

filters 注册过滤器 钩子函数

语法：

filters:钩子函数 创建过滤器 
<p>{{author | myFilters}}</p>
filters:{
 myFilters( value ){
 	console.log( value )
 	// 返回处理后的数据 给指定的插值
 	return value.split("").reverse().join("")
 }
}

<!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>
</head>

<body>
    <div id="app">
        <h1>{{about}}</h1>
        <p>{{author | myFilters}}</p>
        <p>ID:{{user.id}} & name:{{user.name}}</p>
    </div>

    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data () {
                return {
                    about: 'filters  注册过滤器',
                    author: 'xiaoge',
                    user: {
                        id: 1,
                        name: "张三"
                    }
                }
            },
            filters: {
                myFilters (value) {
                    console.log(value)
                    return value.split("").reverse().join("")
                }
            }
        })
    </script>
</body>

</html>
小戈&328
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue中的列表渲染
weixin_46376652的博客
07-09 251
使用v-for实现循环遍历列表获取的每一个值循环列表中每一项的唯一值，可以是设置的唯一值(id)，也可以是索引值（1）使用变量p接收所遍历数组的每一个元素；（2）使用p和index接收所遍历数组的每一个元素和索引值； 使用value和key接收对象的数值和key 使用char和index接收字符串的字符和索引 1、vue实现代码转化为DOM的过程中，是先将代码转换为虚拟DOM，再将虚拟DOM转换为真实DOM；2、而将虚拟DOM转为真实DOM的过程中，会对比key相同的两个节点虚拟DO
vue-examples:vue练习
04-01
4. **指令**：Vue提供了丰富的内置指令，如`v-on`用于事件监听，`v-bind`用于动态绑定属性，`v-if`和`v-show`用于条件渲染，以及`v-for`用于循环遍历。 5. **计算属性和侦听器**：计算属性是基于其他数据依赖计算...
Vue渲染数据理解以及Vue指令
weixin_30550081的博客
01-23 183
一、Vue渲染数据原理 原生JS改变页面数据，必须要获取页面节点，也即是进行DOM操作，jQuery之类的框架只是简化DOM操作的写法，实质并没有改变操作页面数据的底层原理，DOM操作影响性能（导致浏览器的重绘和回流），Vue是一个mvvm框架（库），大幅度减少了DOM操作，操作数据如下图： View也就是页面，Model是指数据，VM是Vue实例，页面所需的数据或者方法都定义在vm中 ...
vue内容渲染指令
m0_65063660的博客
08-26 400
语法，专门用来解决 v-text 会覆盖默认文本内容的问题。这种 {{ }} 语法的专业名称是。注意：相对于 v-text 指令来说，因为它不会覆盖元素中默认的文本内容。插值表达式在开发中更常用一些。包含 HTML 标签的字符串。注意：v-text 指令会。覆盖元素内默认的值。...
4.内容渲染指令
potato123232的博客
03-10 214
常用的渲染指令有三个。
vue数据列表渲染
qq_23744567的博客
04-01 158
vue数据渲染 第一步：获取数据 methods: { async getFaultList() { const falutlist = await getFaultList({ whe: '' }); //后面是根据要求穿的字段 this.falutlistInfo = falutlist.lst; //data里面创建的对象要加上this. }, } 第二步：执行函数 created() { this.getFaultList(); }, 第三部：在data创建
VUE组件练习：VUE.rar
11-30
4. **响应式系统**：Vue.js 的数据绑定是双向的，当数据变化时，视图会自动更新；反之亦然。这是通过依赖追踪和观察者模式实现的。 5. **模板语法**：Vue.js 使用简单的HTML扩展来定义模板，使得HTML代码保持整洁，...
vue2-struggle:vue2
03-18
4. **计算属性（Computed Properties）**：Vue2提供了计算属性，可以基于其他数据进行计算，并自动缓存结果，当依赖的数据发生变化时，计算属性会自动更新。 5. **侦听器（Watchers）**：用于监听并响应数据变化，...
ppt课件-第3章 Vue指令.zip
03-22
在这个“第3章 Vue指令”的PPT课件中，我们可以期待深入学习Vue指令的各个方面。 1. **Vue指令概述**：Vue指令是Vue.js中用于操纵视图的特殊属性，以响应数据模型的变化。它们以`v-`开头，如`v-if`, `v-for`, `v-...
Vue教程：Vue教程
02-14
- **数据绑定**：Vue采用双向数据绑定，通过`v-model`指令实现视图与模型的同步更新。 - **计算属性与侦听器**：计算属性是依赖于其他数据并自动更新的属性，而侦听器则用于监听数据变化并执行相应操作。 2. **...
vue指令-1.内容渲染指令
weixin_59141649的博客
03-14 636
vue初学
使用this.$delete解决vue中this.$set()不更新问题
最新发布
qq_31552775的博客
11-23 350
碰见了使用`this.$set()`还是不能刷新的情况。解决办法是使用`this.$delete`。
实例方法this.$delete的使用
weixin_30274627的博客
05-15 3214
this.$delete方法是用来删除对象属性的。 语法： this.$delete(obj,key); 例子： <template> <div> {{testData.name}} <button @click="del">删除</button> </div> </template...
vue中删除数组（对象）的某一项
热门推荐
前端挖掘机
02-25 3万+
delete和Vue.delete删除数组的区别： delete只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。 Vue.delete直接删除了数组 改变了数组的键值。 var a=[1,2,3,4] var b=[1,2,3,4] delete a[1] console.log(a) this.$delete(b,1...
Vue.js学习总结——Vue指令
qq_41591033的博客
01-09 266
1. Vue实例 <div id="app"> {{message}} </div> <script> var app = new Vue({ el: '#app', data: { message: 'Hello,Vue' } }) </script> 1.1 el（挂载点） el是用来设置Vue实例挂载（管理）的元素...
Vue $set、$delete给对象动态添加，删除属性、并更新视图-响应式
林中明月间丶
08-08 1755
https://www.cnblogs.com/annie211/p/12654177.html <button @click="addObjB"></button> data:{ obj:{ a:'' } } methods:{ addObjB(){ this.$set(this.obj,'b',111) } } Vue数组、对象改变视图不更新： 第一种情况： 基本数据类型和对象：实例化的时候如果没有被加.
vue里面怎么删除部分页面_vue中数组删除，页面没重新渲染
weixin_39709262的博客
12-19 1271
创建一个组件时，数据类型是数组，在删除这个数组中的数据时，数组中的数据是对的，但页面渲染的数据却不对。举例：(不一定复现){{item.name}}删除export default {data() {return {peoples: [{name: 'tom',id: '1'},{name: 'kitty',id: '2'},{name: 'jack',id: '3'}]}},methods: {...
Vue.set（添加）和 Vue.delete（删除）属性
weixin_42754922的博客
03-05 5094
Vue 可以添加数据动态响应接口。 Vue 不允许在已经创建的实例上动态添加新的根级响应式属性。 Vue 不能检测到对象属性的添加或删除，最好的方式就是在初始化实例前声明根级响应式属性，哪怕只是一个空值。 如果我们需要在运行过程中实现属性的添加或删除，则可以使用全局 Vue，Vue.set 和 Vue.delete 方法。 Vue.set 方法用于设置对象的属性，它可以解决 Vue 无法检测添加属性的限制。Vue.del...
vue.resource delete 方法 传参正确方式
Jesse
07-20 9512
吐槽一下网上说的各种方法太坑，简单实现方法 {body: json参数 } 请以添加 body 这种方式提交～vm.$http.delete(url, {body: vm.shipments}). then(function(response) { //code }, function(response) { //code })
Vue.js入门教程：数据驱动Web界面开发指南
- **列表渲染**：讲解如何处理数组，使用`v-for`指令遍历数据并渲染列表项。 4. **交互与组件化**： - **方法与事件处理器**：详细解释如何定义和调用Vue组件的方法，以及如何处理用户事件。 - **表单控件绑定**...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小戈&328

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值