1.组件引入css。
例：test.vue引入swiper.min.css
| -- src
| | -- components
| | -- test
| | -- test.vue
| | -- css
| | -- swiper.min.css
<script>
import '../../css/swiper.min.css';
</script>
组件所在处为相对位置。
2.全局安装vue-cli
首先确保安装node，检查node-v;.
在node目录下输入:
npm install - g vue-cli
3.不要使用编辑器自带的代码格式整理
4.请求本地数据配置
5.修改代码规范
.eslintrc.js文件内的rules(好像没效果？)
6.移动端设备访问
移动端设备必须和计算机处于局域网内。
config>>index.js文件内修改dev属性值host为本机IP地址。
然后把网址生成二维码通过手机微信或QQ扫描。
二维码可通过firebox或草料二维码生成
dev: {
host: '192.168.31.129',
}
7.vue-resource
前后端数据调用.
首先在package.json里“dependencies”引入"vue-router": "^3.0.1"
然后npm install vue-resource
例：使用data数据seller
HTML调用组件，传递值
<v-header :seller="seller"></v-header>
js
import header from './components/header/header'
const ERR_OK = 0
export default {
name: 'App',
data () {
return {
seller: {}
}
},
created () {
// vue-resourse use
this.$http.get('/api/seller').then((response) => {
response = response.body
if (response.errno === ERR_OK) {
this.seller = response.data
console.log(this.seller)
}
})
},
components: {
'v-header': header
}
}
header组件
HMTL
<template>
<div class="header">
我是{{msg}}
<div class="content-wrapper">
<div class="avatar">
<img width="64" height="64" :src="seller.avatar"/>
</div>
<div class="content">
<div class="title">
<span class="brand"></span>
<span class="name">{{seller.name}}</span>
</div>
<div class="description">
{{seller.description}}/{{seller.deliveryTime}}分钟送达
</div>
</div>
</div>
</div>
</template>
JS
<script type="text/ecmascript-6">
export default {
name: 'header',
data () {
return {
msg: 'this is header!'
}
},
props: {
seller: {
type: ''
}
}
}
</script>
8.stylus使用
package.json内“devDependencies” 添加属性
{
"devDependencies": {
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
}
}
npm
npm install stylus -g
src下common内创建文件夹stylus，存放styl文件
调用minxin.styl文件，并使用border-1px函数
minxin.styl文件
border-1px($color)
position : relative
&:after
display: block
position: absolute
left: 0
bottom: 0
border-top 1px solid $color
width: 100%
content: ' '
引用
<style lang="stylus" rel="stylesheet/stylus">
@import "common/stylus/mixin.styl";
.tab
// border-bottom: 1px solid rgba(7, 17, 27, 0.1)
border-1px(rgba(7, 17, 27, 0.1))
</style>
9.没有找到相应的模块。
These relative modules were not found
例：引用图标字体路径不对。
大多都是路径的引用出了问题。
10.过渡和v-for
transition
一定要使用<transition name="abc"></transition>包裹。
使用transition="abc"，方法不行
v-for
<div v-for="(value, key, index) in object">
{{ index }}. {{ key }}: {{ value }}
</div>
new Vue({
el: '#v-for-object',
data: {
object: {
firstName: 'John',
lastName: 'Doe',
age: 30
}
}
})
11. this.nextTick()
DOM更新后的回调函数，
操作DOM在这个回调函数里比较好
12.watch和computed属性
compute属性可以更改data的值。要设置set属性
computed: {
msgChange: {
get: function () {
return this.msg.split('').reverse().join('')
},
set: function (abc) {
this.msg = abc
}
}
},
可以使用watch监听事件来更改data属性值
watch: {
// 总数发生变化时，show属性值更改为false
count: function () {
this.show = false
}
},
13.事件修饰符：stop,prevent
prevent.stop
.prevent
.capture
.self
.once
.passive
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form> <!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a> <!-- 只有修饰符 -->
<form v-on:submit.prevent></form> <!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div> <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。
14.父组件调用子组件的方法 ref="children"
15.prop是单向绑定，不能更改数据的解决方案
use a data or computed property based on the prop's value.
https://blog.csdn.net/a_bet_of_three_years/article/details/78470757
16.$emit,$on的使用详解
主要介绍了vue2.0 中#$emit,$on的使用详解
vue1.0中 vm.$dispatch 和 vm.$broadcast 被弃用，改用$emit,$on
vm.$on( event, callback )
监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。
vm.$emit( event, […args] )
触发当前实例上的事件。附加参数都会传给监听器回调。
例子：
//父组件
<template>
<ratingselect @select-type="onSelectType"></ratingselect>
</template>
<script>
data () {
return {
selectType: 0,
},
methods: {
onSelectType (type) {
this.selectType = type
}
}
</script>
父组件使用@select-type="onSelectType"@就是v-on的简写，监听由子组件vm.$emit触发的事件，通过onSelectType()接受从子组件传递过来的数据，通知父组件数据改变了。
// 子组件
<template>
<div>
<span @click="select(0, $event)" :class="{'active': selectType===0}"></span>
<span @click="select(1, $event)" :class="{'active': selectType===1}"></span>
<span @click="select(2, $event)" :class="{'active': selectType===2}"></span>
</div>
</template>
<script>
data () {
return {
selectType: 0,
},
methods: {
select (type, event) {
this.selectType = type
this.$emit('select-type', type)
}
}
</script>
子组件通过$emit来触发事件，将参数传递出去。
17.缓存组件状态keep-alive
<!-- 失活的组件将会被缓存！-->
<keep-alive>
<component v-bind:is="currentTabComponent"></component>
</keep-alive>