vue的计算属性 computed,必须return,
computed
有缓存数据的效果,,利于减少性能的消耗,但是当真实数据(data)发生改变,计算属性才会更新.
传统写法:
![](https://i-blog.csdnimg.cn/blog_migrate/5c691b91fb6f7c7105445341bbe59fd9.png)
学习了vue的计算属性就可以如图.必须return:
![](https://i-blog.csdnimg.cn/blog_migrate/93d944d210e98b67d4124ea917a181b4.png)
在vue中不推荐v-for和v-if一起使用,因为v-for的优先级更高,想要解决这个方法就要使用计算属性,如下:
![](https://i-blog.csdnimg.cn/blog_migrate/82a228102d25fa7c9dd3999e8554e11a.png)
vue的计算属性侦听器watch方法,两个值,一个新值一个老值,
通过 watch 来响应数据的变化
,
一般用于在项目中监听路由的变化
watch方法分为基本类型与引用类型
基本类型如下:
![](https://i-blog.csdnimg.cn/blog_migrate/47b044226320fc2d0f754ea22e10326a.png)
handler
引用类型如下:
deep深入监听 ,不返回新老值,直接监听
![](https://i-blog.csdnimg.cn/blog_migrate/167d418841b886aabd35cb9b6de4f771.png)
immediate
一打开页面就会执行侦听器
![](https://i-blog.csdnimg.cn/blog_migrate/ae9dc50b824511673a0ba628cf8e428b.png)
引用数据类型简单粗暴的用法
![](https://i-blog.csdnimg.cn/blog_migrate/25c300483113f3b0f3a8fe710f6a5a37.png)
Vue.js 组件
组件(Component)是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素,封装可重用的代码。
注:顺序为组件优先new Vue,
组件分为全局组件和局部组件
全局组件:
所有的实例都能用全局组件
组件名要是使用的驼峰写法,就要使用-来分割
也可以缩写/来关闭
![](https://i-blog.csdnimg.cn/blog_migrate/baa8c6bc08498267d9c56d95f4b755e2.png)
局部组件
我们也可以在实例选项中注册局部组件,这样组件只能在这个实例中使用
html部分
![](https://i-blog.csdnimg.cn/blog_migrate/42d30aea86a0f0f13c2da3325a7e8a8e.png)
组件部分
![](https://i-blog.csdnimg.cn/blog_migrate/19a8a5c985d88e2c010ce5345d22745d.png)
vue部分
![](https://i-blog.csdnimg.cn/blog_migrate/6dfc28f27e07cb8babf1075c3b69434e.png)
自定义组件
在自定义组件不要使用驼峰命名
props父传子,注意点是加v-bind传的是变量,不加v-bind穿的是字符串
子级:
![](https://i-blog.csdnimg.cn/blog_migrate/a5075d2b0b3192eef408fc949a37a63e.png)
父级
![](https://i-blog.csdnimg.cn/blog_migrate/ede47b888fd6c5214ea8bad2709d37e8.png)
但是单型数据流,只能父级穿给子级,如果要改变父亲的值,只能用自定义事件this.$emit()
<body>
<div id="app">
<h1>{{msg}}</h1>
<!-- 组件名使用大写,要使用-分割 -->
<!-- 多个组件不在一起不要缩写 -->
<!-- :msg="msg" 父传子 加v-bind 传的是变量, 不加v-bind传的是字符串 -->
<List-Page v-bind:msg="msg" @msgfn="msgfn"></List-Page>
<datail></datail>
<chidpage></chidpage>
</div>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script>
// 全局组件,注意顺序,先写全局组件 在new实例
Vue.component("ListPage", {
props: ["msg"],
template: `
<div>
<h1>自定义组件!</h1>
<h2 @click="changeMsg">{{msg}}</h2>
</div>
`,
methods: {
changeMsg() {
// 单向数据流
// 直接改,父组件的值没有变化
// 需要使用自定义事件的方法来实现子改父
this.$emit("msgfn", "我不爱")
}
}
})
Vue.component("datail", {
template: '<h1>全局组件!</h1>'
})
new Vue({
el: "#app",
data: {
msg: "我爱"
},
methods: {
msgfn(s) {
this.msg = s;
},
},
components: {
"chidpage": {
template: `
<h1>子组件!</h1>
`
}
},
})
</script>
</body>