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来配置开发服务器的代理:
路径.jpg
// 更新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>
网友评论