Skip to content

Latest commit

 

History

History
144 lines (110 loc) · 3.78 KB

约定.md

File metadata and controls

144 lines (110 loc) · 3.78 KB

使用具名路径

<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

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 v-if="flag">
  bla bla bla...
</template>

压缩,发布生产的时候,设置 Vue.config.debug = false; 去除注释,因为某些安卓机型里面,可能会出现莫名奇妙的问题。