vue案例笔记
监听对象中的属性变化******
watch: {
‘word.feature_strs’(newv, oldv){
this.$message({showClose: true, message: “newv:”+JSON.stringify(newv)+" oldv:"+JSON.stringify(oldv), type: ‘success’})
}
}
监听对象中的属性变化结束******
存储值到浏览器******
window.localStorage.getItem(‘abc’);
window.localStorage.setItem(‘abc’, ‘sgdfgdf’)
存储值到浏览器结束******
弹窗组件联动****
this.$emit(‘dialogFormVisible’, newv)
dialogFormVisibleChange(value){
console.debug(“监听到dialogFormVisible”+value)
this.dialogFormVisible = value
}
弹窗组件联动结束****
路由传参****
跳转页面
this.$route.params.name
跳转页面
{
path: ‘/particulars/:id’,
name: ‘particulars’,
component: particulars
}
路由传参结束****
为页面跳转添加动画***
<transition name="fade">
<!-- 缓存已访问过的组件 -->
<keep-alive>
<router-view></router-view>
</keep-alive>
</transition>
.fade-enter-active, .fade-leave-active {
transition: opacity .5s
}
.fade-enter, .fade-leave-active {
opacity: 0
}
为页面跳转添加动画结束***
路由切换保留数据不刷新*****
export default new Router({
routes: [
{
path: ‘/’,
name: ‘login’,
component: Login,
meta: {
keepAlive: true
}
},
{
path: ‘/home’,
name: ‘首页’,
component: Home,
meta: {
keepAlive: false
}
}
],
})
<router-view v-if="!$route.meta.keepAlive"></router-view>
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
路由切换保留数据不刷新结束*****
anxios跨域问题****
在config目录下的index.js加入以下proxyTable内容
dev: {
// Paths
assetsSubDirectory: ‘static’,
assetsPublicPath: ‘/’,
proxyTable: {
‘/api’: {
target: ‘http://192.168.1.6:8081’,//设置你调用的接口域名和端口号 别忘了加http
changeOrigin: true,
pathRewrite: {
‘^/api’: ‘’
}
}
},
之后访问路径写为"/api/user"类似于这样的就可以
anxios跨域问题结束****
滚动案例****
cnpm install better-scroll --save
<div class="menu-wrapper" ref = "menuWrapper">
<li v-for="(item, index) in goods" class = "menu-item" :key = "index"
@click="selectMenu(index, $event)" >
</div>
<div class = "foods-wrapper" ref = "foodWrapper">
<li v-for="item in goods" class = "food-list" ref = "foodList" >
</div>
滚动案例结束****
***动态改变组件的值
{{msg}}
***动态改变组件的值结束
自定义指令*
自定义指令结束*
页码按钮随着点击变化颜色*
{{item}}
页码按钮随着点击变化颜色结束*
for循环**
动画淡入淡出*****
<BUTTON v-on:click = 'show=!show'>111</BUTTON>
<transition name = 'fade'>
<p v-show = 'show'>asddsfdff</p>
</transition>
var vm = new Vue({
el: ‘#abc’,
data: {
show:true
}
})
动画淡入淡出结束*****
表单输入框双向绑定****
表单输入框双向绑定结束****
发送监听和接受监听*****
Enlarge text
myMethod(value){console.debug(“监听到的数据为”+value)}
发送监听和接受监听结束*****