vue知识总结,vue数据库操作
本文主要介绍vue数据操作的相关数据，帮助大家更好的理解和使用vue。感兴趣的朋友可以了解一下。
vue中有很多数据相关的操作方法，比如父子组件数据的传输，子组件对父组件数据的修改，props，computed，watch，sync等。今天就来总结一下这些操作方法的使用方法。
computed是计算属性
Computed是一个计算属性：降低模板{{}}的复杂性。在一个模板中放入过多的逻辑会使它变得过于沉重，难以维护。对于任何复杂的逻辑，都要使用计算属性，将复杂的运算逻辑写入计算函数中，然后在模板中引用，使逻辑简单明了。如何使用：computed与数据并列，将一系列操作封装成一个方法，放入computed。调用时直接写方法名，不用加()。
新Vue({
埃尔： #app ，
数据：{
用户：{
邮箱： dong@qq.com ，
昵称：“oldUath”，
电话：“12812345678”
}
},
//计算属性
计算值：{
displayName(){
//返回结果
const user=this.user
返回用户名.昵称 用户名.电话 用户名.电子邮件
}
},
模板：` 1
差异
{ {显示名称}}
/div
`
})
watch侦听器
Watch: Listener:观察Vue实例上的数据变化，只要指定的数据发生变化，就会执行一个预定的函数。当数据发生变化，需要执行异步或高成本操作时；
watch使用方法一：
div id=应用程序
{{msg}}
英国铁路公司
变了吗？{{isChange}}
Button @click=change 更改/button
/div
新Vue({
埃尔： #app ，
数据：{
//这是第一层数据
味精：“但是你把你的视野扩大了三百英里”，
isChange:否，
用户：{
//这是第二层数据
姓名：“oldUath”，
电话：“18312345678”
}
},
观察：{
//只要msg发生变化，就会执行这个方法。第一层数据只需要写数据名(){}。
消息(val，oldVal){
this.isChange=是
},
//第二层数据需要， user.name(){}
user.name(){
Console.log(“用户名已更改”)
}
},
方法：{
更改(){
This.msg=走上一段楼梯
}
}
})
注意：在vue中，如果一个对象原封不动地分配给它，它的地址就会改变。
//obj:{a:a}
Obj.a=hi//监控Obj时，不会执行监控obj的事件，因为obj的地址没有改变。
可以用deep:true，意思是让手表听深度。如果值改变了，就相当于改变了。
观察：{
obj(){
Handle(){console.log(obj已更改)
},
深：真的
}
使用方法二： vm.$watch(监听的变量,调用的函数，{immediate:true})
效果与方法1相同。
const vm=new Vue({
埃尔： #app ，
数据：{
味精：“但是你把你的视野扩大了三百英里”，
isChange:否，
用户：{
姓名：“oldUath”，
电话：“18312345678”
}
},
方法：{
更改(){
This.msg=走上一段楼梯
}
}
})
vm。$watch(msg ，function(){
Console.log(n已更改)
}，{immediate:true})
父组件给子组件传递数据： Props
如果父组件想要将数据传递给子组件，它需要使用Props在子组件中引入变量。
父母给孩子的钱=100
首先在父组件中引入。
//调用父组件中的子组件
孩子：钱=100 孩子
然后，将数据引入子组件，并引入可变货币。
模板
div class=red
{{money}}元
按钮花钱/按钮
/div
/模板
脚本
导出默认值{
道具：[钱]
}
/脚本
此时，子组件只能使用父组件的数据，不能修改。
子组件修改父组件的数据（.sync原理）
组件不能直接修改props之外的数据。
使用$emit进行修改
在子组件中使用$ emit (parameter 1 ，parameter 2)。
当前实例继承了eventBus，可以触发事件。
在子组件中写$emit，第一个参数是事件名称，第二个参数是修改后的值。
！- $emit()触发一个事件，update:money是事件名-
button @ click= $ emit( update:money ，money-10)花钱/button
使用$event接受父组件中的参数2；
$event将接收子组件参数2返回的结果
！-将货币值传递给子组件，v-on是监控子组件的更新：货币事件，
$event获取子组件事件的结果-
child:money= total v-on:update:money= total=$ event /
简化结果： sync
父组件的大代码太麻烦了，vue把它封装成修改器。
Child :money.sync=total /
子组件仍然是这样编写的。
这只是解决了父子组件的通信问题，那么兄弟组件的通信问题呢？
兄弟组件通信：emit/emit/on
该方法使用一个空的Vue实例作为中央事件总线(事件中心)，并使用它来触发事件和监视事件。它巧妙地、轻巧地实现了任何组件之间的通信，包括父、子、兄、跨级。当我们的项目很大时，我们可以选择一个更好的状态管理解决方案vuex。具体实施方式
var Event=new Vue()；
事件。$emit(事件名称，数据)；//传递事件数据
事件。$on(事件名称，数据={ })；//接受数据
例如，组件A向组件C传输信息，ABC是相邻组件。
首先使用$emit在组件A中提供事件数据，第一个参数是数据名，应该和on的第一个参数相同才能接收数据；第二个参数是数据。
模板id=a
差异
H3组件：{{name}}/h3
Button @click=send 向C组件发送数据/button
/div
/模板
脚本
var Event=new Vue()；//定义一个空Vue实例
var A={
模板：“#a”，
data() {
返回{
姓名：“汤姆”
}
},
方法：{
send() {
事件。$emit(data-a ，this . name)；
}
}
}
/脚本
C组件接收数据$on，第一个参数是数据名，第二个参数用于接收数据。
模板id=c
差异
H3组件：{ {姓名}}，{ {年龄}}/h3
/div
/模板
脚本
var Event=new Vue()；//定义一个空Vue实例
var C={
模板：“#c”，
data() {
返回{
名称： ，
年龄：“”
}
},
Mounted() {//在模板编译后执行。
事件。$on(data-a ，name={
this.name=name//没有新的这将在箭头函数内部生成。如果这里没有使用=的话，这是指事件。
})
}
}
/脚本
总结
Props和$emit用于在父子之间传输数据
使用$emit和$on在兄弟之间传输数据。
父组件使用Provide和inject将数据传输到孙组件。
以上是vue数据运营总结的详细内容。更多关于vue数据运营的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。