Vue2.0视频课程（选项）笔记

Vue2.0视频课程（选项）

propsData Option 全局拓展的数据传递

• 功能：传值，需要在扩展中用 props 接收

<abc></abc>

<script>
	var abc = Vue.extend({
		template: `<p>{{message}} -> {{a}}</p>`,
		data: function(){
			return {
				message: '接受参数：'
			}
		},
		props: ['a']
	});

	// 挂载
	new abc({ propsData: {a:3} }).$mount('abc');
</script>

computed Option 计算选项

• 功能：Vue 的计算属性，官方称任何复杂逻辑，你都可以使用计算属性。
• computed 的作用主要是对原数据进行改造输出

<div id='app'>
    <ul>
    	<li v-for='item in reversNews'>{{item.title ----item.data}}</li>
    </ul>
</div>

<script>
	var newsList = [
            { titile: '我是第一条数据', data: '2020/1/25' },
            { titile: '我是第二条数据', data: '2020/1/26' },
            { titile: '我是第三条数据', data: '2020/1/27' },
            { titile: '我是第四条数据', data: '2020/1/28' },
            { titile: '我是第五条数据', data: '2020/1/29' },
        ];
    var app = new Vue({
        el : '#app',
        data : {
            newsList: newsList,
        },
        computed: {
            reversNews: function(){
                return this.newsList.reverse();
            }
        }
    });
</script>

methods Option 方法选项

• 功能：在构造器中定义方法
• 自定义组件调用构造器中的方法时，需要加上 .native 修饰符
• 作用域外部标签调用构造起中的方法通过 -> 实例名 . 方法名

<div id='app'>
   {{message}}
   <button @click="add(2)">累加2</button>
   <p><btn @click.native-"add(4)"></btn></p>
</div>
<button onclick="app.add(8)">作用域外部标签调用 Vue 作用域内的函数</button>

<script>
	var btn = {
		template: `<p><button>自定义标签 累加4</button></p>`
	}

	var app = new Vue({
		el : '#app',
		data : {
			message: 0
		},
		methods: {
			add: function(num){
				if(num!==''){
                    this.message += num;
                }else{
					this.message ++;
				}
			}
		},
		components: {
			'btn': btn
		}
	});
</script>

watch Option 监控数据

• 功能：监听实例的数据变化

<div id='app'>
	<p>{{message}}</p>
    <button @click='add'>加1</button>
	<br>
    <button @click='minus'>减1</button>
</div>

<script>
	var app = new Vue({
        el: '#app',
        data: {
            message: 0
        },
        methods: {
            add: function(){
                this.message ++;
            },
            minus: function(){
                this.message --;
            }
        },
        watch: { 'message' : function(newVal,oldVal){
            if(newVal > oldVal){
                console.log('数字增加');
            }else{
                console.log('数字减少');
            }
        } }
    });        
</script>

mixins Option 混入选项

• 用途
  • 当需要给一个已经写好的构造器添加临时方法时，可以通过混入减少对源代码的污染
  • 很多地方都会用到的公用方法，用混入的方法可以减少代码量，实现代码重用。

<div id="app">
	<p v-text='message'></p>
	<button @click="add">ADD</button>
</div>

<script>
	var addConsole = {
        updated: function(){
            console.log('数据发生变化，变成了'+this.message);
		}
	}
    Vue.mixin({
    	updated: function(){
    		console.log('全局定义，数据发生变化，变成了'+this.message);
    	}
    });
    var app = new Vue({
    	el : '#app',
    	data : {
    		message : 0,
    	},
    	methods: {
    		add: function(){
    			this.message ++;
    		}
    	},
    mixins: [addConsole],
    updated: function(){
        console.log('Vue 原生,生命周期，数据发生了变化');
    }
    });

</script>

extends Option 扩展选项

• 通过外部增加对象的形式，对构造器进行扩展

<div id="app">
	<p v-text='message'></p>
	<button @click="add">ADD</button>
</div>

var extendsObj = {
	updated: function(){
		console.log('我是拓展的 updated');
	}
};

var app = new Vue({
	el : '#app',
	data : {
		number : 0
	},
	methods: {
		add: function(){
			console.log('我是原生的方法');
			this.number ++;
		},
	},
	updated: function(){
		console.log('我是 updated');
	},
	extends: extendsObj,
});

delimiters 修改插值方式

<div id='app'>${message}</div>

<script>
	var app = new Vue({
		el: '#app',
		data: {
			message: 'Hello World'
		},
		// 把 {{}} 形式修改成 ${} 功能不变
		delimiters:['${','}']
	});
</script>

参考文章

• 【第三季】Vue2.0视频教程-选项（共6集）