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