mirror of
https://github.com/xsf0105/vue3-h5-template.git
synced 2025-04-06 04:00:04 +08:00
3.8 KiB
3.8 KiB
使用具名路径
<a v-link="{ name: 'myviews', params: { viewId: 123 }}">User</a>
组件传值的时候单个单词小写,如果有多个单词用"-"连接 API说明
<uiradio :items.sync="mutilCheckitems" :mutil-check.sync="mutilCheck">
然后在组件props中用驼峰的方式访问['mutilCheck']。
组件传值得时候尽量不要使用表达式,可以在computed中定义
比如:
<uiradio :items.sync="singleCheckitems" :mutil-check.sync="!mutilCheck">
修改为
<uiradio :items.sync="singleCheckitems" :mutil-check.sync="singleCheck"></uiradio>
然后定义computed
...
computed:{
singleCheck:function(){
return false;
}
},
...
在绑定属性的时候
<div class="tab-panel" v-show="show" transition="transiton">
<slot name="tab-panel"></slot>
</div>
此处的 transition="transiton" 代表的是 transition 这个类名
而如果前面加个:
则代表的是动态属性,: 是 v-bind的简写 参考 Vue1.0.0绑定语法参考
<div class="tab-panel" v-show="show" :transition="transiton">
绑定属性用双引号
关于 vueComponent.sublime-snippet 文件
功能:sublime中编写vue组件的片段提示
使用:
sublime中 菜单栏 - >Preferences - > 浏览插件
将文件复制到 User目录下
项目中新建 `组件名字.vue` 文件
ctrl+shift+p 输入 vuecomponent 回车
在vue组件 template 中不能出现 <
字符, 如果有此字符,那么在使用webpack.optimize.UglifyJsPlugin压缩的时候,编译会报错
DOM属性定义用""包起来,否则不正确的字符可能会导致在 使用webpack.optimize.UglifyJsPlugin压缩的时候,控制台卡死。
vue文件的,template模版中,注释的html里面如果有img标签,相关资源也会被打包。
<!--
...
<img src="./xx.jpg">
...
-->
在data属性里面不要定义以下划线开头的字段。
data:{
_k:'v' // this._k 获取不到
}
vue-router路由配置的时候,不要写下划线
'/loan':{
name:'loan',
component: require('./views/loan.vue')
},
'/loan_old':{
name:'xxx',
component: require('./views/loan_old.vue')
},
下面的会覆盖上面的,原来本应该跳转到loan的可能现在都跳到了loan_old
关于版本控制
参考: http://webpack.github.io/docs/long-term-caching.html
plugins: [
new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.[chunkhash:8].js'),
new webpack.optimize.UglifyJsPlugin({sourceMap: false}),
new ExtractTextPlugin("style.[chunkhash:8].css"),
function() {
return this.plugin('done', function(stats) {
var content;
content = JSON.stringify(stats.toJson().assetsByChunkName, null, 2);
return fs.writeFileSync('build/assets.json', content);
});
}
]
禁止在层上滑动(比如:背景层,不想让用户滚动)
@touchstart.stop.prevent
如果要阻止默认事件,一定要写在前面,否则会影响其他事件绑定
@touchmove.stop.prevent @click.stop="show=false"
尽量少用,用多了,感觉渲染的会慢很多。
<template v-if="flag">
bla bla bla...
</template>
压缩,发布生产的时候,设置 Vue.config.debug = false; 去除注释,因为某些安卓机型里面,可能会出现莫名奇妙的问题。
<template v-if="flag">
bla bla bla...
</template>