GSO (vue08)

監視屬性

watch

watch是Vue的一個屬性，可以監視指定數據的變化,然後觸發對應的處理函數
例如：

data:{
				first:""
			}，
	watch:{
				'first':function(newVal,oldVal){
					this.make();
					console.log(newVal+"-----"+oldVal);}
			}

函數中收到改變前的值和改變後的值兩個參數。
watch甚至可以監視this.$route.path

computed

computed是Vue的一個屬性，在裏面要自己定義屬性（並非監視已有的），並給每個屬性添加一個有返回值的函數，屬性的值就是函數的返回值。

data:{
			 first:"",
			 last:""
			},
			computed:{
			 'hole':function(){
				  return this.first+" "+this.last;
			  }}

• 和watch不同，watch的屬性名是已有的屬性，computed的屬性名是重新定義的屬性。
• 函數中的任何一個數據改變，都會重新運行函數，重新計算屬性的值，屬性的值會保存起來，當函數中的數據沒有一點變化時，調用屬性會直接調用內存中保存的值，而不會重新運行函數。
• 屬性的調用方法和data中的屬性一樣。

Webpack中引用Vue

在webpack中
import Vue from 'vue’
導入的vue是runtime-only的，與網頁中用法不同
要明白包的查找原則
1，找 根目錄中的node_modules文件夾
2，在node_models中根據包名，找到vue文件夾
3，在vue文件夾中找 package.json
4，在package.json中，找main屬性（main指定入口文件）
可以用
**import Vue from ‘…/node_modules/vue/dist/vue.js’**導入完整的vue
也可以在webpack.config中添加

  resolve:{
		alias:{
			'vue$':'vue/dist/vue.esm.js'
		}
	}

webpack中導入.vue模塊

在引用vue前提下建立login.vue組件模塊文件
使用import login from './login.vue'導入.vue

webpack轉換.vue需要安裝loader
命令行npm i vue-loader vue-template-compiler -D
同時新版loader需要加入新的vue的plugin，修改 webpack.config

const VueLoaderPlugin = require('vue-loader/lib/plugin');
new VueLoaderPlugin() //plugins中
{test:/\.vue$/,use:[          //module的rules中
				'vue-loader'
			]}

在引入login.vue的main.js中創建實例

var vm = new Vue({
	el:'#app',
	data:{
		msg:'123'
	},
	render:c=>c(login)
})

將會替換，引用main.js的html頁面中id爲app的標籤爲login.vue中的組件。

export暴露

node導入成員方式
var 名稱 = require(‘模塊標識符’);
Node向外暴露成員的方式
module.exports = {};
es6中
導入模塊
import 模塊名 from '模塊標識符’或 import ‘標識路徑’
暴露成員
export default
export default向外暴露的成員，可以使用任意變量來接收
在一個模塊中，export default 只允許暴露一個對象。

var info ={
	name:'yang',
	soul:'half'
}

export default info;    //導出

--------------------------------------------
import test from './test.js'     //接收

export
export可以暴露多個，接收要嚴格按導出名字，同時並不是每一個導出的對象都要接收，接收加花括號
實例

export var title = 'asmr';
export var content = 'sliu';  //導出
---------------------------------------------
import {title,content } from './test.js'   //接收

想要給接收的對象換名字可以這樣
{title as them,content }

webpack中的vue-router