1.在侦听器中无法侦听对象内的属性，这时候可以用计算属性先返回想要侦听的属性，或者用深度侦听 deep。
computed: {
editor() {
return this.$refs.TextEditor.quillEditor
},
site_id(){
return this.setForm.site
},
},
watch:{
site_id:function(){}
}
2.这个坑算是axios的，axios在默认的情况下是不带cookies的，要让它带上cookies需要在vue中的main.js进行设置：
axios.defaults.withCredentials=true;
3.vue与Django结合的时候会有一个csrf_token的问题，对于这个问题，解决的办法是先安装Django-cors-headers，并在django中的settings中进行设置：
# 先在APP里面进行添加：
INSTALLED_APPS += 'corsheaders'
# 再在最后追加内容：
APPEND_SLASH = False
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_WHITELIST = ()
CORS_ALLOW_METHODS = (
'DELETE',
'GET',
'OPTIONS',
'PATCH',
'POST',
'PUT',
'VIEW',
)
# * 表示接受所有的头
CORS_ALLOW_HEADERS = (
'accept',
'accept-encoding',
'authorization',
'content-type',
'dnt',
'origin',
'user-agent',
'x-csrftoken',
'x-requested-with',
'x-file-name',
'identity',
)
4.Vue中v-bind和v-model的区别：
V-bind的话只有单向的绑定，栗子如下：
<div id="my_test" :style="my_style">这样的话，my_style数据发生了改变会更新到这个dom元素上，但是dom元素的操作不会更新my_test数据。
v-model则相反：
首先，v-model一般用于input这类的标签上，<input v-mode="my_test">这就是一个双向绑定了，dom元素的操作会更新数据，数据的操作也会更新dom元素。
5.关于Vue中export的data：
<template>
<div id="test">
{{test}}
</div>
</template>
<script>
export default {
name:"test",
// 注意这里
data:()=>({
test:"this is a test !"
})
}
</script>
第二种写法：
<template>
<div id="test">
{{test}}
</div>
</template>
<script>
export default {
name:"test",
// 注意这里！
data(){
return {
tsest:"this is a test !"
}
}
}
</script>
6.关于Vue的跨域
上面django中跨域的方法是通过后端来设置请求头的方式，但在Vue中可以在config中的index.js来配置开发服务器的代理：
// 更新proxyTable:
// 将Vue默认的host下的/api（http://localhost:8080/api/xxx）代理到 http://localhost:3001/api/xxxx
proxyTable: {
'/api':{
target:'http://localhost:3001/api',
changeOrigin: true,
// 重写相应的路径
pathRewrite:{
'^/api':'^/api'
}
}
},
缩减Vue工程生成的js文件的大小
一般来讲，直接npm run build 生成的文件工程文件都普遍偏大，这时候我们可以通过开启gzip的方式来减小打包后生成的文件大小：
首先安装compression-webpack-plugin这里注意要安装1.1.12版本的才行！: npm i compression-webpack-plugin@1.1.12
然后开启gzip压缩，在Vue-cli生成的config文件夹中index.js进行设置：productionGzip: true,
最后设置webpack.prod.conf.js:
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
// 设置这里的asset为filename
filename: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\\.(' +
config.build.productionGzipExtensions.join('|') +
')$'
),
threshold: 10240,
minRatio: 0.8
})
)
}
Vue中计算属性传参
Vue的计算属性本身是不能传参的，只能通过闭包来实现传参的操作，具体的代码如下：
:data="closure(item, itemName, blablaParams)"
computed: {
closure () {
return function (a, b, c) {
/** do something */
return data
}
}
}
Vue中v-model的坑,循环动态改变一个json将导致这个json中被v-model绑定的元素失去Vue中默认的getter和setter方法，导致无法改变数据。
<template>
<div id="app">
<input v-for="(item,key) in test" :key="key" v-model="item.model"/>
</div>
</template>
<script>
const datas = {
data: {name:'test1'},
data2: {name:'test1'},
}
export default {
name: 'app',
data() {
return {
test: {}
}
},
methods: {
change() {
// 这样将导致失去getter和setter方法，导致v-model失效：
for(let key in datas) {
this.test[key] = {...datas[key],model: ""}
}
// 可以用一个变量来装上面循环生成的数据，再将test一次性赋值成为这个数据：
let _data = {}
for(let key in datas) {
_data[key] = {...datas[key],model: ""}
}
this.test = _data
}
}
}
</script>
