Vue选项

Vue中的extends选项

Vue中的extends选项，通过外部增加对象的形式，对构造器进行扩展。
现在有一个按钮，实现每次点击按钮都加1的功能
现在先定义一个对象：

var extendsObject={
	methods:{
		add:function(){
			this.numbers++;
			console.log("我是扩展出来的方法")
		}
	}
}

在extendsObject对象里面定义了一个add方法，实现每次点击按钮都实现加1的功能。
在构造器里面将扩展对象进行声明

extends:extendsObject

完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>extends扩展选项</title>
		<script src="../assets/js/vue.js" type="text/javascript"></script>
	</head>
	<body>
		<h1>extends扩展构造器</h1>
		<div id="app">
			<p>结果：{{numbers}}</p>
			<button type="button" @click="add">Add</button>
		</div>
		<script type="text/javascript">
			var extendsObject={
				updated:function(){
					console.log("我是扩展的updated方法")
				},
				methods:{
					add:function(){
						this.numbers++;
						console.log("我是扩展出来的方法")
					}
				}
			}
			var demo=new Vue({
				el:'#app',
				data:{
					messages:"这是一个extends扩展选项实例",
					numbers:1
				},
				updated:function () {
					console.log("我是原生的updated方法")
				},
				extends:extendsObject
			});
		</script>
	</body>
</html>

运行结果：
在这里插入图片描述

注意：
1.如果原生方法名与扩展方法名是一样的话，程序只会执行原生的方法，扩展的方法是不会被执行的。
2.扩展选项后面接的是对象，混入选项后面接的是数组
3.扩展的updated方法比原生的updated方法先执行

delimiters选项

delimiters的作用是改变我们插值的符号。Vue默认的插值是双大括号{{}}。但有时可以根据需求更改这个插值的形式。
默认的插值方式：

<p>结果：{{numbers}}</p>

运用delimiters选项的插值方式：${}，其后边跟着的是一个数组

<p>结果：${numbers}</p>

在构造器内部进行定义以及声明：

delimiters:['${','}']

原文链接：https://blog.csdn.net/weixin_43913219/article/details/104075082