点击上方“蓝字”关注我们
常用选项
vue有许多配置选项,这节之类出常用的一些选项
1、computed
计算属性:主要是对原数据进行改造输出。改造输出:包括格式化数据(价格,日期),大小写转换,排序,添加符号
computed: {
newPrice () {
return '¥' + this.price + '元';
}}
1
2
3
4
5
2、methods
方法属性:用于绑定html中的事件对应的方法
methods:{
add (num) {
this.count += num;
}}
1
2
3
4
5
3、watch
数据变化监听器:主要用于监测data中的数据变化, 定义使用时,需要与data中的变量同名
watch: {
question(val, oldVal) {
console.log('new: %s, old: %s', val, oldVal);
}}
1
2
3
4
5
4、filters [vue3.0弃用]
过滤器:通常格式化字符,使用传值
filters: {
filterA(value) {
return value.toUpperCase();
}}
1
2
3
4
5
5、mixins
混入:用于减少代码污染、减少代码量、实现代码重用
// 额外临时加入时,用于显示日志var addLog={
updated:function(){
console.log("数据放生变化,变化成"+this.count+".");
}}// 实例化vuevar app = new Vue({
// 挂载实例
el:'#app',
// 页面数据初始化,字符,对象、数组
data:{
count: 100
},
// 混入
mixins: [addLog]})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
6、extends
扩展:对构造器进行扩展
// 扩展var extendObj ={
created: function(){
console.log("我是被扩展出来的");
}}// 实例化vuevar app = new Vue({
// 挂载实例
el:'#app',
// 页面数据初始化,字符,对象、数组
data:{
},
// 扩展
extends: extendObj})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
完整的代码示例
DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Vue入门之Helloworldtitle><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>head><body><div id="app">
{{message}} <div>价格:{{newPrice}}div><div>数字:{{count}}div><div><button @click="add(2)">addbutton>div><div><input v-model="question">div><div>过滤:{{filtera | filterA}}div>div><script type="text/javascript">// 额外临时加入时,用于显示日志var addLog={updated:function(){
console.log("数据放生变化,变化成"+this.count+".");}}// 扩展var extendObj ={created: function(){
console.log("我是被扩展出来的");}}// 实例化vuevar app = new Vue({// 挂载实例
el:'#app',// 页面数据初始化,字符,对象、数组
data:{
message: 'hello Vue!',
price: 100,
count: 100,
question: '',
filtera: 'abc'},// 计算属性:主要是对原数据进行改造输出。// 改造输出:包括格式化数据(价格,日期),大小写转换,排序,添加符号
computed: {newPrice () {return '¥' + this.price + '元';}},// 方法声明:用于绑定html中的方法
methods:{add (num) {this.count += num;}},// data属性监听器, 作用v-model
watch: {question(val, oldVal) {
console.log('new: %s, old: %s', val, oldVal);}},// 过滤器,通常格式化字符,使用传值
filters: {filterA(value) {return value.toUpperCase();}},// 混入,作用:减少代码污染、减少代码量、实现代码重用
mixins: [addLog],// 扩展extends: extendObj})script>body>html>
↓↓↓ 三连一下,天天好心情!