1.传递参数时,第二个参数要与前面的逗号有一个空格
window.localStorage.setItem(STORAGE_KEY, JSON.stringify(items))
2. 注意空格
正确格式
<script>
import Store from './store'
console.log(Store)
export default {
...
}
</script>
错误格式
<script>
import Store from './store'
console.log(Store)
export default {
...
}
</script>
3. 父向子组件传参
父组件中
//模板中
<template>
<div id="app">
//之前老版本 <conponent-a msgfromfather="父亲传给儿子!"></conponent-a>
<ConponentA msgfromfather="父亲传给儿子!"></ConponentA>
</div>
</template>
//Js
<script>
export default {
//注册ConponentA
components: {ConponentA},
}
</script>
子组件中
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<button v-on:click="onClickMe()">点我啊,小样儿</button>
</div>
</template>
<script>
export default {
data () {
return {
msg: 'hello from component A!'
}
},
//props 可以是数组或对象，用于接收来自父组件的数据
props: ['msgfromfather'],
methods: {
onClickMe: function () {
//打印从父组件传过来的值
console.log(this.msgfromfather)
}
}
}
</script>
<style scoped>
h1 {
font-weight: normal;
}
</style>
4. 子向父组件传参
儿子告诉父亲 需要使用vm.$emit 和vm.$on 触发事件和监听事件
子组件中
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h1>{{msgfromfather}}</h1>
<button v-on:click="onClickMe()">点我啊,小样儿</button>
</div>
</template>
<script>
export default {
data () {
return {
msg: 'hello from component A!'
}
},
methods: {
onClickMe: function () {
// 子传父 触发当前实例上的事件
this.$emit('child-tell-me-something', this.msg)
}
}
}
</script>
<style scoped>
h1 {
font-weight: normal;
}
</style>
父组件中
<template>
<div id="app">
<p>child tells me: {{childWorlds}}</p>
<ConponentA msgfromfather="父亲传给儿子!" v-on:child-tell-me-something="listenToMyBoy"></ConponentA>
</div>
</template>
<script>
import ConponentA from './components/componentA.vue'
export default {
data: function () {
return {
childWorlds: ''
}
},
components: {ConponentA},
watch: {
items: {
handler: function (items) {
Store.save(items)
},
deep: true
}
},
methods: {
//监听
listenToMyBoy: function (msg) {
console.log(msg)
this.childWorlds = msg
}
}
}
</script>
除了这个方法外,还有其他方法,详见Vue.js官网
- 自定义组件指定属性数据类型
export default {
props: {
slides: {
type: Array, //数组
default: [] //默认值
}
},
- 在加载完毕执行某个方法
mounted () {
this.loadxxx()
}
-
@mouseover="xxxx"鼠标进入(执行某个事件),@mouseout="xxxx"鼠标移出(执行某个事件); -
transiotions动画对left和right等无效,要想实现动画效果,只能用x轴了; -
slot插槽 -
this.abc = false等同于this['abc'] = false - 父组件
style不添加scoped,这样他的子组件可以共用他的样式,也就是说,可以把子组件的样式,写在父组件中.
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
......
</style>
-
&代表父元素
<!--css书写规范 可被继承的写在前面,不让继承的的写在后面-->
<style lang="stylus" rel="stylesheet/stylus">
#app
.tab
display: flex
width: 100%
height: 40px
line-height: 40px
.tab-item
flex: 1
text-align: center
/* & > a & 代表父元素 tab-item 子元素选择器 */
& > a
display: block
font-style: 14px
color: rgb(77,85,93)
&.active
color: rgb(240,20,20)
</style>
- 1像素边框的实现
在pc端可以通过下面的设置,来实现,
border-bottom: 1px solid rgba(7,17,27,0.1)
pc端1像素边框
但是,在移动端,由于
dpi的概念,它的物理像素是设备像素的2倍(iPhone6手机),如果用上面的方法,获取到的边框线比1像素要粗!
- 引入
stylus
<style lang="stylus" rel="stylesheet/stylus">
@import "./common/stylus/mixin.styl"
#app
.tab
display: flex
width: 100%
height: 40px
line-height: 40px
.tab-item
flex: 1
text-align: center
border-1px(rgba(7,17,27,0.1))
/* & > a & 代表父元素 tab-item 子元素选择器 */
& > a
display: block
font-style: 14px
color: rgb(77,85,93)
&.active
color: rgb(240,20,20)
</style>
- 一行显示 ,显示不全显示省略号
/*设置一行显示 显示不全显示...*/
white-space: nowrap
overflow: hidden
/*显示省略号*/
text-overflow: ellipsis
- 模糊高斯效果
1.让自身边模糊
filter: blur(10px)
让自身边模糊
- 背景变模糊(仅仅在iOS上有效果)
backdrop-filter: blur(10px)
WechatIMG5.jpeg
- 在前端开发中,只要设置了
display: flex,它就变成了水平布局. - CSS中,上下
margin是有重叠效果的,只显示一个margin的高度. - 在
chrome浏览器中,最低只能显示12px的字体,小于12px的字体按12px显示. - CSS书写规则:
影响布局的写在前面
影响样式的写在后面 - img标签的宽高建议写在标签里面
img width="57" height="57" :src="food.icon" -
Vue.js 1.0版本获取dom对象使用v-el,(Vue.js 1.0版本中v-el已经废除)
//v-el:food-wraper 注意: 用中划线连接 不能使用驼峰
<div class="menu-wrapper" v-el:food-wraper>
调用的时候,使用驼峰
this.menuScroll = new BScroll(this.$els.foodWraper);
- 获取
dom节点的高度clientHeight;
item.clientHeight;
- Math.abs()取正值 ; Math.round() 四舍五入成整数
- 参数传递
@click="selectMenu($index,$event)"把index和点击事件event传递到下面的函数中
<li @click="selectMenu($index,$event)">
......
</li>
- 设置圆
border-radius: 50%
- 设置文字居中,如果把
text-align: center设在当前元素上没效果,试试设置在它的父元素上看看!!!
text-align: center
- 在Vue里,如果你的props是数组或者Object, 那么它的 default 就是一个函数, 并return一个默认的值
props: {
selectFoods: {
type: Array,
/* 在Vue里,如果你的props是数组或者Object, 那么它的 default 就是一个函数, 并return一个默认的值*/
default() {
return [];
}
},
deliveryPrice: {
type: Number,
default: 0
},
minPrice: {
type: Number,
default: 0
}
}
- forEach() 遍历
let total = 0;
this.selectFoods.forEach((food) => {
total += food.price * food.count;
});
- 设置阴影
box-shadow: 0px 4px 8px 0 orange
购物车阴影
-
给对象添加新的属性(1)
/* 给对象新增属性 */
Vue.set(this.food, 'count', 1); // 给food对象新增了count属性,赋值为1
使用:
// 如果count的属性不存在,就新增count属性
if (!this.food.count) {
/* 给对象新增属性 */
Vue.set(this.food, 'count', 1);
} else {
this.food.count++;
}
-
给对象添加新的属性(2)
this.seller = Object.assign({}, this.seller, response.data);
- 获取
dom使用v-el
<div class="list-content" v-el:list-content>
- 获取子组件使用
v-ref
<food :food="selectedFood" v-ref:food></food>
- 主动触发浏览器重绘
let rf = el.offsetHeight; - 组件的 私有方法 , 公有方法
私有方法,不允许外部调用的,书写规范
methods: {
/* 如果不允许被外部调用的话,在方法前加 "_" 下划线 */
_show() {
this.showFlag = true;
}
}
公有方法,允许外部调用
methods: {
/* 该方法可以被外部调用 */
show() {
this.showFlag = true;
}
}
-
设置图片宽高相等
html部分
<template>
<div class="food">
<div class="image-header">
<i mg :src="food.image">
</div>
</div>
</template>
CSS部分 => 黑魔法 设置宽高相等 当设置padding-top: 100%时,它是相对于盒子的宽度计算的
<style lang="stylus" rel="stylesheet/stylus">
.food
......
.image-header
position: relative
width: 100%
height: 0
/* 黑魔法 设置宽高相等 当设置padding-top: 100%时,它是相对于盒子的宽度计算的 */
padding-top: 100%
/* 用绝对定位,设置宽高100%,把图片嵌套到父容器中 */
img
position: absolute
top: 0
left: 0
width: 100%
height: 100%
</style>
宽高相等的图片
----------------------------以下已经废掉----------------------------
-
子组件向父组件派发事件儿
this.$dispatch('ratingtype.select', type);
methods: {
select(type, event) {
if (!event._constructed) {
return;
}
this.selectType = type;
/* 向父组件派发事件 */
this.$dispatch('ratingtype.select', type);
}
}
在父组件events方法中,监听这个事件
events: {
'ratingtype.select'(type) {
this.selectType = type;
/* 异步刷新UI */
this.$nextTick(() => {
this.scroll.refresh();
});
}
}
------------------------------以上已经废掉-------------------------
-
数组过滤
filter()
computed: {
/* 计算出推荐的数组 */
positives() {
return this.ratings.filter((rating) => {
return rating.rateType === POSITIVE;
});
},
/* 计算出吐槽的数组 */
negatives() {
return this.ratings.filter((rating) => {
return rating.rateType === NEGATIVE;
});
}
},
-
:class如果绑定的内容是对象的话,可以为多个对象!
如下:
<span :class="{'icon-thumb_up':rating.rateType===0,'icon-thumb_down':rating.rateType===1}"></span>
- 设置圆:
border-radius: 50%
border-radius: 50%
- 不同结构(标签)水平布局,css需要设置
vertical-align: top,
相同结构(标签)水平布局,不需要设置。 - 给特殊尺寸屏幕做适配
@media only screen and (max-width: 320px)
.overview-left
flex: 0 0 137px
padding: 6px 0
width: 137px
border-right: 1px solid rgba(7, 17, 27, 0.1)
text-align: center
/* 适配小屏幕 320px 手机 */
@media only screen and (max-width: 320px)
flex: 0 0 120px
width: 120px
-img标签src前面一定要交“ : ”,不然报错!!!
-
年月日
html中
<div class="time">
{{rating.rateTime | formatDate}}
</div>
js中
先引用进来
import {formatDate} from 'common/js/date';
filters: {
formatDate(time) {
let date = new Date(time);
return formatDate(date, 'yyyy-MM-dd hh:mm');
}
}
时间处理
-
对象也可以是一个函数
data() {
return {
favorite: (() => {
return loadFromLocal(this.seller.id, 'favorite', false); // 他的返回值是 true or false;
})()
};
}
-
router-view的keep-alive属性,保证该视图只渲染一次,来回切换不重复渲染
<router-view :seller="seller" keep-alive></router-view>
router-view的keep-alive属性
网友评论