-
组件中的data属性
图片.png
data属性的应用
图片.png
图片.png
图片.png
- 实现组件件切换
-
方法一
图片.png
-
方法二
图片.png
-
- 父组件向子组件传值
在子组件的自定义标签上使用v-bind绑定属性并赋值为父组件的data数据，然后在子组件中通过props接收
图片.png
-
父组件向子组件传递方法，子组件向父组件传值
在子组件的自定义标签上使用v-on绑定事件并赋值为父组件的方法，然后在子组件定义的方法中通this.$emit('别名')
图片.png
图片.png
- ref获取DOM元素和组件
-
获取元素
图片.png
- 获取组件可获取组建的data、method等
-
- 前端路由
- Vue.js使用hash（#号），在单页面应用程序中，通过hash来实现切换页面，不会向后台发送请求
图片.png
图片.png
图片.png
图片.png
使用vue-router提供的router-link标签默认渲染成a标签
图片.png
vue、vue-router等的标签可以指定渲染成其他标签
图片.png
强制跳转到登录页面
图片.png
配置路由激活高亮，可修改默认属性配置:router-link-active
图片.png
图片.png
路由切换加入动画效果，体验更好， 用transition标签包裹，自定义定义类
图片.png
图片.png
- 路由传参，
-
使用query方式传递参数
图片.png
图片.png
不需要修改path匹配规则
图片.png
- 路由传参的第二种方式,使用
params
图片.png
图片.png
图片.png
-
- Vue.js使用hash（#号），在单页面应用程序中，通过hash来实现切换页面，不会向后台发送请求
-
chidren属性实现子路由嵌套，子路由的path前面不要带/，否则一直从根目录去匹配，不方便我们理解url
图片.png
图片.png
图片.png
-
同一页面显示多个组件，路由-命名视图实现经典布局
图片.png
图片.png
图片.png
- 使用
watch监视数据的改变
图片.png
图片.png
-
路由监视路由的改变，watch的优势在于可以监听非Dom元素的变化
图片.png
-
-
计算属性
上面的案例还可以通过计算属性实现
图片.png
图片.png
注意：只要计算属性，这个function内部，所用到的任何 data 中的数据发生变化，就会重新计算这个计算属性的值，计算属性的求值会被缓存起来，方便下次使用，如果计算属性方法中，所以来的任何数据，都没有发生变化，则不会重新对计算属性求值
网友评论