Vue 选项 详解

最新推荐文章于 2024-08-16 08:39:42 发布
最新推荐文章于 2024-08-16 08:39:42 发布
阅读量627 收藏
点赞数
分类专栏： Vue 文章标签： Vue 选项
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_34531165/article/details/83088986
版权

所有demo均可以在技术胖博客找到，他的博客写得非常好，也经常更新一些新的知识，有兴趣的小伙伴可以移步去他的博客。链接：web前端技术

1.propsData Option 全局扩展的数据传递

<!DOCTYPE html>
<html>
<head>
	<title>propsData Option 全局扩展的数据传递</title>
</head>
<body>
	<h1>propsData Option 全局扩展的数据传递</h1>
	<hr>
	<div id="app">
		<header></header>
	</div>



	<script type="text/javascript" src="../assets/js/vue.js"></script>

	<script>
		var header_a = Vue.extend({
			template:`<div>{{message}}-{{a}}</div>`,
			data(){
				return {
					message:'Hello, I am Header'
				}
			},
			props:['a']
		})

		new header_a( {propsData:{a:'这是props传值'}} ).$mount('header')
	</script>
</body>
</html>

2.computed Option 计算选项

<!DOCTYPE html>
<html>
<head>
	<title>computed Option 计算选项</title>
</head>
<body>
	<h1>computed Option 计算选项</h1>
	<hr>
	<div>computed 的作用主要是对原数据进行改造输出。改造输出：包括格式的编辑，大小写转换，顺序重排，添加符号……。</div><br>
	
	<div style="font-weight: 700;">computed 属性是非常有用，在输出数据前可以轻松的改变数据。</div>
	<div id="app">
		<br><div>格式化输出结果：</div>
		<div style="color:red;">{{newPrice}}</div><br>
		<div>反转数据：</div>
		<ol style="color:red;">
			<li v-for="item in newArr">{{item.title}}-{{item.date}}</li>
		</ol>
	</div>



	<script type="text/javascript" src="../assets/js/vue.js"></script>

	<script>
		var app = new Vue({
			el:"#app",
			data:{
				price:100,
				arr:[
					{title:'香港或就“装甲车被扣”事件追责 起诉涉事运输公司',date:'2017/3/10'},
					{title:'日本第二大准航母服役 外媒：针对中国潜艇',date:'2017/3/12'},
					{title:'中国北方将有明显雨雪降温天气 南方阴雨持续',date:'2017/3/13'},
					{title:'起底“最短命副市长”：不到40天落马，全家被查',date:'2017/3/23'},
				]
			},
			computed:{
				newPrice(){
					return this.price = "这件衣服的价格是"+this.price+"元";
				},
				newArr(){
					return this.arr.reverse()
				}
			}
		})
	</script>
</body>
</html>

3.Methods Option 方法选项

<!DOCTYPE html>
<html>
<head>
	<title>Methods Option 方法选项</title>
</head>
<body>
	<h1>Methods Option 方法选项</h1>
	<hr>
	<div id="app">
		<div>{{count}}</div>
		<button @click="add">Add</button>
		<button @click="add2(number)">方法传参</button>
		<button @click="add3($event)">方法$event参数</button>
		<btn @click.native="add2(3)"></btn>
	</div>
	<button onclick="app.add2(2)">作用域外部调用构造器里的方法</button>
	<div style="color: red;">作用域外部调用构造器里的方法,这种不经常使用，如果你出现了这种情况，说明你的代码组织不够好。</div>
	<script type="text/javascript" src="../assets/js/vue.js"></script>
		
	<script>
		var btn = {
			template:`<button>native 给组件绑定构造器里的原生事件</button>`
		}
		var app = new Vue({
			el:"#app",
			data:{
				count:0,
				number: 5
			},
			methods:{
				add(){
					this.count++;
				},
				add2(num){
					if (num != '') {
						this.count += num;
					}else{
						this.count++;
					}
				},
				add3($event){
					console.log($event);
				}
			},
			components:{
				'btn':btn
			}
		})
	</script>
</body>
</html>

4.Watch 选项 监控数据

<!DOCTYPE html>
<html>
<head>
	<title>Watch 选项 监控数据</title>
</head>
<body>
	<h1>Watch 选项 监控数据</h1>
	<hr>
	<div>数据变化的监控经常使用</div>
	<div id="app">
		<div>当前温度是：{{count}}</div>
		<div>
			<button @click="add">加</button>
			<button @click="del">减</button>
		</div>
		<div style="color:red;">{{tip}}</div>
	</div>



	<script type="text/javascript" src="../assets/js/vue.js"></script>

	<script>
		var app = new Vue({
			el:"#app",
			data:{
				count:0,
				tip: '我们建议穿棉衣羽绒服',
				tipArr:['我们建议穿T恤短袖','我们建议穿夹克长裙','我们建议穿棉衣羽绒服']
			},
			methods:{
				add(){
					this.count = this.count+1;
					if (this.count >= 26) {
						this.tip = this.tipArr[0];
					}else if(this.count <= 26 && this.count > 0){
						this.tip = this.tipArr[1];
					}else if(this.count <= 0 ){
						this.tip = this.tipArr[2];
					}
				},
				del(){
					this.count = this.count-1;
					if (this.count >= 26 ) {
						this.tip = this.tipArr[0];
					}else if(this.count <= 26 && this.count > 0){
						this.tip = this.tipArr[1];
					}else if(this.count <= 0 ){
						this.tip = this.tipArr[2];
					}
				}
			}
		})
	</script>
</body>
</html>

5.Mixins的基本用法

<!DOCTYPE html>
<html>
<head>
	<title>Mixins的基本用法</title>
</head>
<body>
	<h1>Mixins的基本用法</h1>
	<hr>
	<div id="app">
		<div>{{count}}</div>
		<div><button @click="add">add</button></div>
		<div>从执行的先后顺序来说，都是混入的先执行，然后构造器里的再执行，需要注意的是，这并不是方法的覆盖，而是被执行了两边。</div>
		<div style="color:red;">当混入方法和构造器的方法重名时，混入的方法无法展现，也就是不起作用</div>
	</div>



	<script type="text/javascript" src="../assets/js/vue.js"></script>

	<script>
		//额外临时加入，用于显示日志
		var addLog = {
			updated: function(){
				console.log("数据发生变化"+this.count)
			}
		}
		var app = new Vue({
			el:"#app",
			data:{
				count:0
			},
			methods:{
				add(){
					this.count++;
					console.log("anniu自增")
				}
			},
			mixins:[addLog],
			updated(){
				console.log("构造器里的updated方法。")
			}
		})
	</script>
</body>
</html>

6.Extends Option 扩展选项

<!DOCTYPE html>
<html>
<head>
	<title>Extends Option 扩展选项</title>
</head>
<body>
	<h1>Extends Option 扩展选项</h1>
	<hr>
	<div id="app">
		${message}
		<div><button @click="add">add</button></div>
	</div>



	<script type="text/javascript" src="../assets/js/vue.js"></script>

	<script>
		var myExtends = {
			created:function(){
				console.log("我是被created出来方法");
			},
			methods:{
				add:function(){
					console.log("我是被methods出来方法");
				}
			}
		}

		var app = new Vue({
			el:"#app",
			data:{
				message:"你好，世界！"
			},
			methods:{
				add(){
					console.log("我是构造器原生方法")
				}
			},
			extends:myExtends,
			//改变插值的符号
			delimiters:['${','}']
		})
	</script>
</body>
</html>

 

绪锋
关注
专栏目录
Vue mixins详解
一碗清深的博客
12-12 317
在Vue中，mixins是一种可重用的代码片段，可以在多个组件中共享。它可以包含组件的选项，如data、methods、computed等，以及生命周期钩子函数。 本文将详细介绍Vue中的mixins的使用方法和特点，并与vuex和公共组件进行对比。
vue知识点总结
liyihh的博客
10-04 986
1、Vue和其他两大框架的区别 Angular 学习成本太高 React 代码可读性差 Vue 学习成本较低 很容易上手 传送门 https://cn.vuejs.org/v2/guide/comparison.html ️2、Vue是什么 Vue是一套用于构建用户界面的渐进式框架 “前端框架” 让程序员脱离自己操作DOM 专注于写逻辑和操作数据 Vue的核心库只关注视图层 易上手 便于与第三方库或既有的项目整合 当与现代化的工具链以及各种支持的库结合使用时 Vue也完全能够为复杂的单页应用提供驱动 ️3、
vue--vuex详解
weixin_30721077的博客
05-08 174
　　Vuex 　　　　什么是Vuex？ 　　　　　　官方说法：Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 　　　　　　个人理解：Vuex是用来管理组件之间通信的一个插件 　　　　为什么要用Vuex？ 　　　　　　我们知道组件之间是独立的，组件之间想要实现通信，我目前知道的就只...
Vue.js 基础语法详解：带你领略渐进式 JavaScript 框架的魅力
最新发布
weixin_63490470的博客
08-16 1221
Vue.js 是一款用于构建用户界面的渐进式 JavaScript 框架。它易学易用，性能出色，并且拥有活跃的社区支持，成为了众多开发者构建 Web 应用的首选框架。自定义指令允许我们扩展 HTML 元素的功能，实现更复杂的交互效果。el.focus();});: 定义一个名为focus的自定义指令。: 指令插入到 DOM 中时执行的回调函数。el.focus(): 将焦点设置到input元素上。
Vue 详解
买不起冰露的博客
08-25 332
Vue基础语法 一、HelloWord 二、MVVM设计思想 三、指令 1. v-cloak 2. v-text 3. v-html 4. v-show 4. v-pre 5. v-once 6. v-model（双向数据绑定） 7. v-on 事件修饰符 按键修饰符 自定义按键修饰符 8. v-bind class样式绑定 style样式绑定 9. v-if、v-else、v-else-if 10.v-for 四、Vue常用特性 1. 表单操作 基于vue的表单操作 表单域修饰符 2.自定义指令 Vue.
Vue详解
yinuo_chao的博客
05-19 1万+
Vue详解 Vue.js目前最火的一个前端框架。点击跳转Vue详解视频 在谷底也要开花！ P00 前言：回顾SSM阶段 P01 前端核心分析 Vue：前端体系、前后端分离 1、概述 Vue（读音 /vju`/，类似于 view）是一套用于构建用户界面的渐进式框架，发布于2014年2月。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库（如：vue-router：跳转，vue-resource：通信，vuex：管理）或既有项目
Vue初始化中的选项合并之initInternalComponent详解
10-15
在Vue中，组件的实例化过程中，选项合并是一个核心步骤，它涉及到如何将用户的自定义选项和Vue内部的选项进行合并，以及如何处理父子组件之间的选项继承关系。在Vue的初始化流程中，`initInternalComponent`方法是...
Vue实例的对象参数options的几个常用选项详解
10-16
本文将深入讲解 Vue 实例创建时的对象参数 `options` 的一些常用选项。 首先，创建 Vue 实例有两种常见方式： 1. 直接通过 `new Vue()` 创建： ```javascript var app = new Vue({ el: '#todo-app', data: { ...
VUE的选项
weixin_46535287的博客
07-10 280
vue中选项 data methods props watch computed data 存放数据 在组件内，必须是一个返回初始对象的函数 为了保证当前组件的多个实例直接不会共享data中的数据 props 用于接收父组件传来的数据 定义的props属性的对象，该对象中有四个属性：type ， default， required, validator type:设置当前属性的数据类型，可以用数组设置多个数据类型：【String，Number】,一共有八种数据类型即：String、Number
Vue篇(超详细讲解)
2301_77112535的博客
12-14 7537
Vue:一套用于构建用户界面的渐进式JavaScript框架渐进式: vue可以自底向上逐层的应用如果应用很简单:只需要一个轻量小巧的核心库如果应用很负责:可以引用各式各样的Vue插件1、采用组件化模式,提高代码复用率,且让代码更好维护。2、声明式编码,让编码人员无需直接操作DOM,体高开发效率、3、使用虚拟DOM+优秀的Diff算法,尽量复用DOM节点。1、Vue的操作命令 启动.Vue 去你对应的包里 直接 yarn serve2、首先先需要检测自己是否安装了yarn 命令。
初识Vue
Floatwor青舟的博客
10-30 1324
目录为什么学习流行框架框架和库的区别Vue.js简介安装第一个简单实例一些常用指令跑马灯小案例 为什么学习流行框架 企业中为了提高开发效率：在企业中，时间就是效率，效率就是金钱。 提高开发效率的发展历史：原生JS–>Jquery之类的类库–>前端模板引擎–>Angular.js/Vue.js等（能够帮助我们减少不必要的DOM操作，提高渲染效率。通过框架提供的指令，我们前端程序员只需要关心数据的业务逻辑，不再关心DOM是如何渲染的了） 在Vue中，一个核心的概念就是，让用户不再操作DOM元
vue基础详解（全）
热门推荐
梁婉玲krysliang的博客
02-14 1万+
一，VUE的核心 1.数据驱动（mvvm模型，只要改变model的数据，视图层就会自动更新） 2.视图组件： 把整一个网页的拆分成一个个区块，每个区块我们可以看作成一个组件。网页由多个组件拼接或者嵌套组成。 二，使用vue 1.引入vue之后就可以进行下面的步骤 2.创建语法（创建 ，设置数据，挂载，渲染） var vm = new Vue（{}）//参数是一个对象 三、定义...
vue详解
python_limiao的博客
02-27 2467
Vuex教程第一讲：Vuex 到底是什么？ 先说两句 官方已经有教程了，为什么还要写这个教程呢？说实话，还真不是我闲着蛋疼，官方的教程真的是太官方了，对于刚入门 Vuex 的童鞋来说，想必看官方的教程，很多地方就如同看圣经一样，比如「欧玛尼玛尼牙」，所有的字都认识，就是不知道说些什么玩意，不信，你可以戳进去看看。 当然，对于大神级别一看就懂的，那就不用说了，肯定是看官方的更权威。还有，如果对 Fl...
VUE详解
weixin_45649686的博客
06-26 2988
JavaWeb项目前后端分离         前后端分离已成为互联网项目开发的业界标准使用方式，通过nginx+tomcat的方式有效的进行解耦，并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务（多种客户端，例如：浏览器，车载终端、安卓、IOS等等）打下坚实的基础。         这个步骤是系统架构从猿进化成人的必经之路
Vue - 常用选项总结
LIN的博客
10-29 1512
目录 一、创建Vue实例 二、el ：vue实例的挂载 三、data：含有零个或多个的 key/value 对，进行数据传递 三、methods：可以通过实例及表达式，进行调用的方法。 四、computed：进行方法内的计算（实现一个变量依赖多个变量） 1- 纯粹进行计算相关的操作 2- 实现一个变量依赖于多个变量 五、watch：监听变量，变量修改是触发方法（实现多个变量依赖于一...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值