mirror of
https://github.com/xsf0105/vue3-h5-template.git
synced 2025-04-06 04:00:04 +08:00
145 lines
3.8 KiB
Markdown
145 lines
3.8 KiB
Markdown
|
||
|
||
#### 使用具名路径
|
||
|
||
```
|
||
<a v-link="{ name: 'myviews', params: { viewId: 123 }}">User</a>
|
||
```
|
||
|
||
#### 组件传值的时候单个单词小写，如果有多个单词用"-"连接 [API说明](http://rc.vuejs.org/guide/components.html#camelCase_vs-_kebab-case)
|
||
|
||
```
|
||
<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绑定语法参考](https://github.com/vuejs/vue/issues/1325)
|
||
|
||
```
|
||
<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](http://webpack.github.io/docs/long-term-caching.html)
|
||
|
||
[https://github.com/teambition/coffee-webpack-starter/blob/92082085d96f6c5003711e042da38bfa140d8dd6/webpack.min.coffee#L21](https://github.com/teambition/coffee-webpack-starter/blob/92082085d96f6c5003711e042da38bfa140d8dd6/webpack.min.coffee#L21)
|
||
|
||
|
||
```
|
||
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>,用多了，感觉渲染的会慢很多。
|
||
```
|
||
<template v-if="flag">
|
||
bla bla bla...
|
||
</template>
|
||
```
|
||
|
||
|
||
#### 压缩，发布生产的时候，设置 Vue.config.debug = false; 去除注释，因为某些安卓机型里面，可能会出现莫名奇妙的问题。
|
||
|