1. vue2.0 给data对象新增属性，并触发视图更新 $set
this.$set(this.ossData, "signature", 222) // 正确用法
1 // 数据
2 data() {
3 return {
4 ossData: {
5 signature: ''
6 }
7 }
8 }
9
10 // 正确用法
11 this.$set(this.ossData, "signature", 222)
12
13 // 错误用法
14 this.ossData.signature = 24
View Code
2. el-dialog 弹出组件的遮罩层在弹出层的上面
:append-to-body="true"
3.父组件值变化子组件值变化
（1）Vue父组件向子组件传递一个动态的值，子组件如何保持实时更新实时更新？
1 typeCode(newValue, oldValue) { //watch
2 this.$set(this.listQuery, 'typeCode', newValue)
3 this.getList()
4 }
View Code
4.axios在ie浏览器下提示promise未定义
5.vue引用jquery
1: npm i jquery
2. webpack.base.conf.js文件中，加入（这一段： new webpack.ProvidePlugin...）
1 resolve: {
2 extensions: ['.js', '.vue', '.json'],
3 alias: {
4 '@': resolve('src')
5 }
6 },
7 plugins: [
8 new VueLoaderPlugin(),
9 // jquery开始
10 new webpack.ProvidePlugin({
11 jQuery: "jquery",
12 $: "jquery"
13 })
14 // jquery结束
15 ],
View Code
3: import $ from 'jquery
4: end
6.对话框el-dialog关闭事件（包括右上角的x）
<el-dialog title="标题" :visible.sync="bind" size="small" @close='closeDialog'></el-dialog>
7. props default 数组／对象的默认值应当由一个工厂函数返回
1 propE: {
2 type: Object,
3 default: function () {
4 return {}
5 }
6 }
View Code
8.vue中使用 ztree
9.使用element el-date-picker 插件选取时间不回填
选取时间不回填是因为你的数据属性没有事先在 data 里声明，参见 https://cn.vuejs.org/v2/guide/reactivity.html
10. v-for 需要加上 :key
11.Vue 2中ref属性的使用方法及注意事项
1 // html
2 <ul>
3 <li v-for="item in people" ref="refContent">{{item}}</li>
4 </ul>
5
6 // js
7 data: {
8 people:['三姑','四婶','五叔','六姨','七舅姥爷']
9 },
10 created: function() {
11 this.$nextTick(() => {
12 // refContent: 存在n个
13 console.log(this.$refs.refContent[0])
14 })
15 }
View Code
12. vue去除前后空格trim
1 // 使用 trim 修饰符
2 <input type="text" v-model.trim="content">
3
4 // 使用 filter 属性
5 <input type="text" v-model="name" />
6 <p> {{ name | trim }}</p>
View Code
13. 子组件和父组件双向数据绑定
1 // 父组件
2 <kind-editor :content.sync="editorText" />
3
4 // 子组件
5 <input v-model="editorText" />
6 watch: {
7 content(val) {
8 this.editorText = val
9 },
10 editorText(val) {
11 this.$emit('update:content',val)
12 }
13 }
View Code
14.指定文件、指定行、指定代码块不使用 ESLint 语法检查
15.axios发送数据
uploadImg (f) {
this.axios.get('./getToken').then((response) => {//获取token
let param = new FormData(); //创建form对象
param.append('file',f.file);//通过append向form对象添加数据
param.append('token',response.data.token);//通过append向form对象添加数据
param.append('key',response.data.key);//添加form表单中其他数据
let config = {
headers:{'Content-Type':'multipart/form-data'}
}; //添加请求头
this.axios.post(f.action,param,config)//上传图片
.then(response=>{
onSuccess(response.data)
})
.catch(({err}) => {
f.onError()
})
})
.catch(() => {
f.onError()
})
},
View Code
16.vue项目的多语言/国际化插件vue-i18n详解
（2）api
17.vue 报错 exports is not defined？
1 // 修改前
2 import { interNal } from '@/utils/internalReference'
3 exports.install = function (Vue, options) {
4 Vue.prototype.filter_rules = function(item) {
5 }
6 }
7
8 // 修改后
9 import { interNal } from '@/utils/internalReference'
10 export default {
11 install(Vue) {
12 Vue.prototype.filter_rules = function(item) {
13 }
14 }}
View Code
18. vue把localhost改成ip地址无法访问—解决方法
（1）修改 package.json文件 增加 --host ip 重新编译即可
（2）dev后面增加 --host 192.168.8.123
1 "scripts": {
2 "dev": "cross-env BABEL_ENV=development webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 192.168.8.123",
3 "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js",
4 "build:sit": "cross-env NODE_ENV=production env_config=sit node build/build.js",
5 "lint": "eslint --ext .js,.vue src",
6 "test": "npm run lint",
7 "precommit": "lint-staged",
8 "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml"
9 },
View Code
19.vue中使用 scss
<style scoped lang="scss"></style>
20. vue 关闭 eslint
Use // eslint-disable-next-line to ignore the next line.
21. Vue Elementui Form表单验证 filter_rules
23. 删除node_modules文件夹
1 // 由于node.js依赖问题，经常出现node_modules文件夹层次过深，从而导致windows无法直接删除。可以全局安装rimraf来解决：
2 npm install rimraf -g
3
4 // 用法
5 rimraf node_modules
View Code
24. 清除穿梭框里的搜索值
1 <el-transfer
2 ref="elTransfer"
3 :titles="[$t('common.altRobot'), $t('common.selectedRobot')]"
4 v-model="addEditForm.snBoundList"
5 :data="updateDialog.sn"
6 :filter-placeholder="$t('common.inpSNSearch')"
7 filterable/>
8
9 this.$nextTick(() => {
10 this.$refs.elTransfer.clearQuery('left')
11 this.$refs.elTransfer.clearQuery('right')
12 })
View Code
