一. vue要求我们转变像jquery一样直接操作dom的思想，拥抱数据驱动的思想，例如，需要操作列表中其中一个元素时，可以为该列表所有元素添加index遍历，然后使用index达到想要实现的目的
// 绑定索引和事件
<ul>
<li v-for="(item, index) in items" @click="changeActive">
</ul>
// 在方法中使用索引
methods: {
changeActive (index) {
console.log(index)
}
}
二. 即使完全是数据驱动，有些时候还是会造成一些麻烦，我们难免会想要通过操作dom来直接获取我们想要的元素，别担心，vue也能替我们解决的
<div ref="selectdiv">我是div</div>
mounted () {
console.log(Vue.$refs.sellectdiv.innerHTML) // 我是div
}
三. vue实例化以后绑定到data上的数据是无法响应式更新的，这是es5语法本身的限制，所有初始化一个空数组然后ajax更新数组的想法在一般情况下是行不通的，但是vue提供了一个方法，使用Vue.$set可以动态的绑定数据到data上并能够响应式刷新
四. 使用vue.$router.go(0)可以对当前组件强制刷新，这里也是使用了history API和vue-router的编程式导航
五. vux组件样式的重写，解决组件下重写vux样式不能加scoped的问题，解决方法是可以将vux组件写为一个新的自定义组件，在该组件下重写全局样式（不加scoped），然后其他组件引用这个自定义组件就可以了
六. vux内部集成了ajaxPlugin，可以使用像vue-resource一样的api，类似this.$http来发起ajax请求，有个小问题，在this.$http的回调函数then中，不能再使用this来调用实例的数据和方法，应该在请求外部定义let that = this，然后再在请求内部使用它
let that = this
this.$http({
method: 'get',
url: 'http://xxx.com',
data: ''
}).then(function (response) {
let res = response.data
that.data = res
console.log(that.data)
})
七. 下拉刷新，由于vue数据驱动视图的特点，那下拉刷新就很好实现了，判断页面滚动的高度与页面文档的高度进行一定条件的对比，在mounted中使用js监听页面滚动即可
window.addEventListener("scroll",yourFunction)
八. vue提供了一个监听函数可以页面路由的变化，watch，在这个函数中可以监听路由的变化而执行相应的事件（这个函数也可以监听页面数据的变化）
watch: {
// route代表你的路由，路由变化即执行你的函数
'route': 'yourFunction'
}
九. 在使用vux的组件时（如轮播图，其实不论哪个插件哪个组件都一样），如果组件处在一个条件渲染（v-show）的父组件下会出现各种诡异的问题，因为使用了v-show时父组件会隐藏，而各类插件的轮播图会获取不到父级宽度，这时候可能出现的问题就随着不同轮播的实现方式不同而不同（这个问题可能只有在具体碰到的时候才会明白我在说什么）
十. 在对router-link进行状态切换时，首先可以采用vue自带的方式，当你选中一个路由时，vue会给你的router-link加上一个class:router-link-active，当class满足不了你的需求时，可以给你的所有路由都加上一个状态，然后用数据切换，这里就可以在你点击不同的路由时切换显示的图片
<ul>
<li v-for="(item, index) in ifimgsrc" @click="changeActive(index)">
<router-link :to="/index/index">
<div>
<img :src=item.imgsrc1 alt="" v-show="!ifimgsrc[index].status">
<img :src=item.imgsrc2 alt="" v-show="ifimgsrc[index].status">
</div>
</router-link>
</li>
</ul>
export default {
data () {
return {
ifimgsrc: [
{'status': false},
{'status': true},
{'status': false},
{'status': false},
{'status': false}
]
},
methods: {
changeActive (index) {
for (let i = 0; i < this.ifimgsrc.length; i++) {
this.ifimgsrc[i].status = false
}
this.ifimgsrc[index].status = !this.ifimgsrc[index].status
}
}
}
十一. routerEach配合meta字段可以实现单页面修改页面标题
// 路由钩子
router.afterEach((to, from, next) => {
if (to.meta) {
document.title = to.meta
}
})
网友评论