记录写项目时遇到的问题——vue篇

vue中如何监听对象中属性的变化

vue中常用watch去监听数据的改变，如下所示，我们可以监听一些简单的数据类型

var data = {
     name: 'Jack',
     age: 18,  
     sex: 'man',        
}
watch: {
     age(val) {
          this.age = val
    }
}

在vue官网中，我们了解到watch可以监听的数据类型

以及他的相关参数

其中deep属性的解释是为了监听对象内属性的变化，可以设置deep:true

var data = {
	father: {
    	name: 'Jack',
    	age: 30,
    	sex: 'man',
  	}
}
watch: {
  	father: {
    	handler: function(val) { // 此处注意，handler函数不能为箭头函数，this会取上下文，而不是组件里的this,此外，深度监听，必须为handler函数名，否则会无效果
      	console.log(val)
      //可以做些相应的处理
    	},
    	deep: true
  	},
　	'father.name' (val) { // 可以监听对象的单个属性
　　	console.lov(val)
　	}
}

我们也可以将computed与watch相结合（推荐使用）

var data = {
  	father: {
    	name: 'Jack',
    	age: 30,
    	sex: 'man',
  	}
}
computed: {
  	getAge() {
      	return this.father.age;
    },
}
watch: {
  	getAge(newAge,oldAge){
  		console.log(newAge)
  	}
}

vue中如何引入weui并使用

安装

npm install weui.js weui -S

main.js注册

import weui from '../node_modules/weui.js'
import 'weui'
Vue.prototype.$weui = weui

使用

<script>
export default {
	name: "ColorPicker",
	data() {
    	return {
      		color: '#778899'
    	};
  	},
  	methods: {
    	headleChangeColor(){
	  		console.log("颜色发生改变")
	  		if(this.color == ""){
	  			this.$weui.topTips("颜色值不能为空", 2000);
	  		}
    	},
  	}
};
</script>

vue中如何使用过滤器

vue中的过滤器分为两种，一种全局过滤器，一种是局部过滤器
1、全局过滤器

Vue.filter('getRandom', function(max) {
	return Math.floor(Math.random() * max);
})

使用

<template>
	<div>{{ 100 | getRandom }}</div>
</template>

2、局部过滤器

<script>
export default {
  	name: "Random",
  	filters: {
    	getRandom2(max) {
     		return Math.floor(Math.random() * max);
    	},
  	},
};
</script>

使用

<template>
	<div>{{ 100 | getRandom2 }}</div>
</template>

上面我举得例子都是传递单个参数的过滤器，下面介绍一下传递多个参数的过滤器

<script>
export default {
  	name: "Random",
  	filters: {
  		//min为随机数的最小值，max为随机数的最大值，ratio为比率
    	getRandom3(min, max, ratio) {
      		return Math.floor(Math.random() * (max - min) + min) / ratio;
    	},
  	},
};
</script>

使用

<template>
	<div>{{ 2000 | getRandom3(3000, 100) }}%</div>
	// 由此我们可以得到20.00到30.00（不包括30.00）之间的随机数
</template>

vue项目如何部署到IIS上

正常流程

1. npm run build打包生成dist文件夹
2. 在D盘（也可以是其他任意位置桌面除外）新建文件夹，复制粘贴放入刚刚打包生成的dist文件夹里的内容
3. 打开IIS新建站点（在"网站"执行鼠标右键，选择添加网站），物理路径为刚刚新建的文件夹，端口号他默认80端口，可改成其他未使用的端口号，比如8080
4. 然后使用http://localhost:端口号/或者http://ip地址:端口号/即可访问网址。
   举例：http://localhost:8080/或者http://192.168.25.167:8080/

1、第一个问题，空白页
2、第二个问题，URL拼写错误
一、url重写
下载urlrewrite模块
https://www.iis.net/downloads/microsoft/url-rewrite
安装之后在下图红笔圈出来的位置就多了一个图标

双击进入之后，点击右侧的添加规则，在入站规则里双击空白规则进入，编辑规则，名称随意填写，最好使用英文，其他需要修改的地方显示在下图中


如果还有其他条件需要配置，可自行添加