vue案例笔记

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}}

{{msg}}

页码按钮随着点击变化颜色结束*

​

for循环**

{{i}}

var vm = new Vue({ el: '#abc', data: { list:['a', 'b', 'c', 'd'] } }) **************************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)}
发送监听和接受监听结束*****