2-Vue2相关API

最新推荐文章于 2024-02-05 13:20:14 发布
最新推荐文章于 2024-02-05 13:20:14 发布
阅读量216 收藏
点赞数
分类专栏： vue2 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44808878/article/details/115187961
版权
本文详细介绍了Vue2中的自定义指令、Vue.set的使用场景，以及如何通过filters进行文本过滤。还涵盖了数组操作（push、sort、$delete）、DOM更新时机的管理（$nextTick）以及组件开发（全局注册和局部组件）。
摘要由CSDN通过智能技术生成

2-Vue2相关API

1.自定义指令 directive

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <p v-red="msg"></p>
    <p v-red="msg2"></p>
    <p v-red="msg3"></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
	/*自定义指令*/
	Vue.directive("red", (node, bind) => {
		node.innerText = bind.value;
		node.style.color = "red";
		node.onclick = function () {
			alert("111");
		};
	});


	new Vue({
		el: "#app",
		data() {
			return {
				msg: "Hello",
				msg2: "Vue",
                msg3: "Pikaka"
			}
		}
	});
</script>
</body>
</html>

2.set
set-1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
  <p v-for="item in arr":key="item">{{item}}</p>
  <button @click="fn">点击切换</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
  el: "#app",
  data(){
    return {
      arr: ["小明","小红","小白"]
    }
  },
  methods: {
      fn() {
        /*数组里面的每一项单独改变的时候，是不会触发DOM变化的*/
        //this.arr[0] = "大明"

        //使用全局set可以解决
        Vue.set(this.arr,0,"大明");
        this.$set(this.arr,1,"幼儿园扛把子");
      }
  }
});
</script>
</body>
</html>

set-2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
  <p v-for="item in arr":key="item">{{item}}</p>
  <button @click="fn">按钮</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
  el: "#app",
  data(){
    return {
      arr: ["小明","小红","小白"]
    }
  },
  methods: {
      fn() {
          //会触发DOM更新的情况

          //this.arr.sort(()=>-1)
          //this.arr.push("mint"); //pop shift unshift
          //this.arr = ["1","2","3"];
          this.arr = [...this.arr,"好嗨哦"];
      }
  }

});
</script>
</body>
</html>

set-3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
  <p v-for="value,key in info":key="value">{{value}}</p>
  <button @click="fn">按钮</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
  el: "#app",
  data(){
    return {
        info: {
        	name: "mint",
            age: 20,
            sex: "男"
        }
    }
  },
  methods: {
      fn() {
         this.info.name = "薄荷er";
      }
  }
});
</script>
</body>
</html>

set-4

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="item in info">
            <b>{{item.name}}</b>
            <em>{{item.age}}</em>
            <em>{{item.sex}}</em>
        </li>
    </ul>
  <button @click="fn">按钮</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
  el: "#app",
  data(){
    return {
        info: [
            {name: "mint",age: 20,sex: "男"},
	        {name: "weige",age: 20,sex: "女"},
	        {name: "zhiyuan",age: 19,sex: "男"},
	        {name: "xiaoxi",age: 21,sex: "女"}
        ]
    }
  },
  methods: {
      fn() {
         this.info[0].name = "薄荷er";
         this.info[0].age = 3;
         this.info[0].sex = "女";

         this.info[1].age = 18;
      }
  }
});
</script>
</body>
</html>

set-5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="item in info">
            <b>{{item.name}}</b>
            <em>{{item.age}}</em>
            <em>{{item.sex}}</em>
            <span v-for="val in item.friends">{{val}}</span>
        </li>
    </ul>

  <button @click="fn">按钮</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
  el: "#app",
  data(){
    return {
        info: [
            {name: "mint",age: 20,sex: "男",friends:["薄荷er，皮卡，","伟哥"]},
	        {name: "伟哥",age: 20,sex: "女",friends:["神秘人x，"]},
	        {name: "志远",age: 19,sex: "男",friends: ["小哲"]},
	        {name: "小希",age: 21,sex: "女",friends: ["mint"]}
        ]
    }
  },
  methods: {
      fn() {
      	//不行
        //this.info[1].friends[1] = "薄荷er";

        //可以
        //this.info[1].friends.push("薄荷er");
        this.$set(this.info[1].friends,1,"bohe");
      }
  }
});
</script>
</body>
</html>

3.delete

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="item in info">
            <b>{{item.name}}</b>
            <em>{{item.age}}</em>
            <em>{{item.sex}}</em>
            <span v-for="val in item.friends">{{val}}</span>
        </li>
    </ul>
    <button @click="fn">按钮</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
	let app = new Vue({
		el: "#app",
		data() {
			return {
				info: [
					{name: "mint", age: 20, sex: "男", friends: ["薄荷er，皮卡，", "伟哥"]},
					{name: "伟哥", age: 20, sex: "女", friends: ["神秘人x，"]},
					{name: "志远", age: 19, sex: "男", friends: ["小哲"]},
					{name: "小希", age: 21, sex: "女", friends: ["mint"]}
				]
			}
		},
		methods: {
			fn() {
				//this.info.pop();
				// this.info.splice(1,1);

				//this.$delete(this.info,1);

				// this.$delete(this.info[1],"friends");

				this.info = this.info.map(item => {
					delete item.friends;
					return item;
				});
			}
		}
	});
</script>
</body>
</html>

4-filters
filters-1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <p v-for="item in teacher" :key="item.name">
        <b>
            {{item.sex | sex}}
            {{item.name | fn}}
        </b>
    </p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
	new Vue({
		el : "#app",
		data(){
			return {
				teacher:[
					{name:"简",sex:"男"},
					{name:"罗",sex:"男"},
					{name:"毛",sex:"女"},
				]
			}
		},
		filters:{
			fn(value){
				return value+"老师";
			},
			sex(value){
				return (value==="男")?"帅气的":"漂亮的";
			}
		}
	});
</script>
</body>
</html>

filters-2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <p v-for="item in teacher" :key="item.name">
        <b>
            {{item | fn}}
        </b>
    </p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
	new Vue({
		el: "#app",
		data() {
			return {
				teacher: [
					{name: "简老师", sex: "男"},
					{name: "罗老师", sex: "男"},
					{name: "毛老师", sex: "女"},
				]
			}
		},
		filters: {
			fn(value) {
				let str = (value.sex === "男") ? "帅气的" : "漂亮的";
				return str + value.name + "老师";
			},
		}
	});
</script>
</body>
</html>

filters-3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <p v-for="item in teacher" :key="item.name">
        <b>
            {{item.name}}
        </b>
        <em>{{item.price | add}}</em>
    </p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
	new Vue({
		el: "#app",
		data() {
			return {
				teacher: [
					{name: "简老师", price: 666},
					{name: "罗老师",price: 9999999},
					{name: "毛老师", price:888},
				]
			}
		},
		filters: {
			add(value) {
				value = (value+"").split("").reverse().join("");
				return "￥"+value.match(/\d{1,3}/g).join(",").split("").reverse().join("");
			}
		}
	});
</script>
</body>
</html>

5-nextTick

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <p>{{msg}}</p>
  <button @click="change">按钮1</button>
  <button @click="change2">按钮2</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  new Vue({
    el: "#app",
    data() {
      return {
        msg : "Hello Vue!"
      }
    },
    methods: {
      change() {
        //如果我们需要在DOM更新之后做一些后续处理的话,写前写后，都不会影响执行顺序
        //在未完全掌握箭头函数的情况下，这里尽量不要用箭头函数，this指向不一定指向这里
        //Vue.nextTick()
        this.$nextTick(function(){
          console.log('DOM更新了！');
        });
        this.msg = "Hello World!";
      },
      change2() {
        this.msg = "Hello1";
      }
    }
  });
</script>
</body>
</html>

5-component
component-1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <a-mint></a-mint>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    //全局组件
    Vue.component(
    	//组件的名字，在html中，就使用这个标签来渲染内容
        //如果标签中有 - 驼峰命名法
        "aMint",

        //一些选项参数
        {
            //对应生成的DOM结构
            /*
            结构中只能有一个根标签
            * */
            template: `<div>
                            <p>这是 aMint组件来写的 p标签鸭~</p>
                        </div>`
        }
    );

	new Vue({
		el: '#app',
		data: {
			message: 'Hello Vue!'
		},
		methods: {}
	});

</script>
</body>
</html>

component-2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <a-mint></a-mint>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
	//全局组件
	Vue.component(
		//组件的名字，在html中，就使用这个标签来渲染内容
		//如果标签中有 - 驼峰命名法
		"aMint",

		//一些选项参数
		{
			//对应生成的DOM结构
			/*
            结构中只能有一个根标签
            * */
			template: `<div>
                            <p>{{num}}</p>
                            <button @click="add">按钮</button>
                        </div>`,

			//这里定义组件的数据
			data() {
				return {
					num: 0
				}
			},
			methods: {
				add() {
					this.num++;
				}
			}
		}
	);

	//根组件 ROOT
	new Vue({
		el: '#app',
		data: {
			msg: "Hello Vue!"
		},
	});

</script>
</body>
</html>
皮卡卡卡
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
2.vue2.x之vue2.x的全局api(一)
l_b_c的博客
11-03 414
重学vue之vue的全局api Vue.extend https://www.jb51.net/article/159958.htm
Vue2 API的使用
weixin_48207715的博客
05-17 255
组件通信 1.1父传子用props <template> //父组件 <div class="parent"> <h1>父组件</h1> <Child a=1></Child> </div> </template> <script> import Child from './Child.vue' export default { name:'Parent',
vue2.0中文手册API
05-25
vue2.0中文手册API,离线资源
Vue2常用api
2026的博客
03-17 848
vue2基本知识点
Vue2 Api 总结大全
tianruine的博客
05-14 2010
全局配置 ignoredElements 须使 Vue 忽略在 Vue 之外的自定义元素 (e.g. 使用了 Web Components APIs)。否则，它会假设你忘记注册全局组件或者拼错了组件名称，从而抛出一个关于 Unknown custom element 的警告。 就是你在页面用一个<he></he>标签的时候，这个是一个自定义元素，并不是自已定义的组件，这时候就会抛出一个警告，要想不想让他抛出这个警告就要在全局设置main.js 里面 Vue.config.i
了解Vue2全局API这一篇就够了
weixin_62520914的博客
02-05 1296
过滤器是一个函数，接受输入参数并返回处理后的结果。过滤器函数的第一个参数是要处理的值，后面可以跟上其他参数。
Vue3.2 api
qq_40611370的博客
07-05 225
Vue
vue-auto-complete-Vue2的自动完成。 适用于对象或api调用。-Vue.js开发
05-27
vuejs-auto-complete Vue自动完成组件npm install vuejs-auto-complete --save使用安装，将自动完成组件添加到您的应用程序中vuejs-auto-complete Vue自动完成组件npm install vuejs-auto-complete --save使用安装，...
vite-vue2-windicss-starter：Vite-使用composition-api和windiCSS的Vue 2入门模板
03-04
恶毒 :high_voltage: -Vue 2入门模板 创建由闪电般的快速构建工具捆绑在一起的Vue 2应用程序 :fire: 特征 :high_voltage: ， 和 :vertical_traffic_light: :package: :artist_palette: 快速和黑暗模式的点播...
vite-plugin-vue-i18n:Vue I18n的快速插件
04-09
:globe_with_meridians: @ intlify / vite-plugin-vue-i18n Vue I18n的Vite插件 :handshake: 支持新...安装此插件后，Vue I18n只能使用Composition API，如果要使用Legacy API，则需要将compositionOnly选项设置为f
vue2.0 中文API
12-13
Vue 只关注视图层， 采用自底向上增量开发的设计。 Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 Vue 学习起来非常简单，本教程基于 Vue 2.1.8 版本测试。
Vue 2.x教程之基础API
11-27
本文主要介绍的是关于Vue 2.x之基础API的相关内容，主要内容如下 模板语法（文本插值、属性绑定、JS表达式、过滤器、指令） Vue实例（viewModal(属性+函数)、生命周期） 计算属性和监听器 (computed(get,set) 与 watch) 样式绑定（对象绑定、数组绑定、内联绑定） 条件绑定（v-if v-show） 列表渲染 (v-for、:key、数组监测、过滤/排序) 事件处理 (监听、修饰符、key修饰符) 表单输入绑定（text、checkbox、radio、select） 一、模板语法 文本插值 - 使用 `{{ }} / <s
newbee-mall-vue-app：Vue2全家桶+ Vant建造大型单页面商城项目。新蜂商城前替代分离版本-前端Vue项目
01-30
综上所述，“newbee-mall-vue-app”项目是一个集成了Vue2全家桶、Vant UI和Spring Boot的实战项目，涵盖了前端开发的诸多关键知识点，包括单页面应用架构、状态管理、组件化UI设计、前后端分离以及RESTful API设计。...
基于 SpringBoot2 magic-api Vue3 Element Plus amis3.0 快速开发
最新发布
04-09
标题中的“基于 SpringBoot2 magic-api Vue3 Element Plus amis3.0 快速开发”描述了一个集成多种技术的快速开发平台，旨在利用这些先进的技术栈提高开发效率和管理系统的性能。这个系统的核心组件包括： 1. **...
Vue系列——Vue2基础Api学习
weixin_34146410的博客
03-02 263
2019独角兽企业重金招聘Python工程师标准>>> ...
Vue2 API重点摘选
Crane的博客
12-16 1433
Vue3已经Beta版本了，对Vue2进行一下回顾。下面列举了Vue2官网中一些不熟悉或者认为重要的点，一来用作温故知新承上启下，二来用作终点备查以免每次都看官网巨篇幅的文档。 Vue选项 mount 注意 mounted 不会保证所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以在 mounted 内部使用 vm.$nextTick： activated/deactivated 被 keep-alive缓存的组件激活/停用时调用 beforeDestroy 实例销毁之前调用。在这一步，.
VUE2开发API式组件
cenkangmu的博客
07-18 946
由于API式组件需要在调用API的时候才渲染，因此，我们需要在调用方法的时候，才能让组件实例挂载。当用完了这个组件，我们需要让它自动挂载，比如一个弹窗组件，在弹窗结束之后，我们要让它自动卸载。因此我们需要用到两个VUE的API：$mount、$destroy。......
combox绑定值以后再赋值给text_VUE2.x实现双向数据绑定的核心API
weixin_39885067的博客
11-20 100
VUE2.x实现双向数据绑定的核心API作者: 郭政鸿 2020/8/1前言: 前端有三大框架Vue、React、Angular, 本文知识由Vue引出, Vue的一个十分重要的特性就是双向数据绑定, 在Vue的1.x 和 2.x版本中, 双向数据绑定依赖的是Object.defineProperty API, 此API中双向数据绑定最主要就是依赖get和set下面我们就用原生javas...
Vue2 API-源码解析
Yes_You_Can 的博客
04-11 693
vue2 api的一些源码解析
fastapi-vue-admin
05-09
fastapi-vue-admin是一个全堆栈（full-stack）工程。它使用Python的FastAPI作为后端框架、Vue.js作为前端框架和Element-UI UI Kit。FastAPI是一个快速（因其只使用了部分Python标准库并使用了Pydantic库的数据校验，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值