Vue.js Watch简介
下面的文章提供了Vue.js观察的大纲。Vue.js是一个易于使用的Web应用框架，可用于开发优秀的交互式前端应用程序。每当某个属性发生变化时，Vue观察器就会帮助人们了解组件的数据。Vue.js有一个特殊的功能，即Watcher，它可以帮助人们跟踪组件状态的某个属性，当属性的值发生变化时，一个函数就会运行。Watcher使代码变得非常简单和快速，因为它能处理数据的任何变化。
语法。
export default { watch: { name: function() { console.log(this.name) } } }
Vue.js中观察属性的工作原理
- 观察器用于观察反应式属性中发生的数据变化。
- 它还支持不同的异步选项与变化的值。
- 上面写的语法是用于在我们的应用程序中使用Vue.js的观察。
- 在Vue.js中提供了许多钩子来观察属性。
- 为了在变化中添加一些功能，我们可以添加一个watch并在变化的值中应用不同的逻辑。
例子
下面提到了不同的例子。
例子 #1
Vue.js手表与按钮来改变文本。
在下面的例子中，"改变内容 "按钮被用来改变显示在输出屏幕底部的内容。按下 "Change the Content "按钮，显示在输出屏幕底部的文本会随机改变。
用来实现以下代码的文件是。
a. favicon.ico
b. index.html
代码。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <title>Application</title> </head> <body> <noscript> <strong>Application doesn't work, kindly enable Codesandbox</strong> </noscript> <div id="app"></div> </body> </html>
c.EDUCBA.png
图片的链接在下面说明。
d.HelloWorld.vue
代码。
<template> <div class="hello"> <h1>{{ msg }}</h1> <h3></h3> <ul> <li> <a href="https://www.educba.com/" target="_blank" rel="noopener" >Website</a> </li> <li> <a href="https://www.educba.com/blog/?source=menu" target="_blank" rel="noopener" >Blogs</a> </li> </ul> <h3>Important Links</h3> <ul> <li> <a href="https://www.educba.com/tutorials/?source=menu" target="_blank" rel="noopener">Free Tutorials</a> </li> <li> <a href="https://www.educba.com/courses/?source=menu" target="_blank" rel="noopener">Certification Courses</a> </li> <li> <a href="https://www.educba.com/corporate/?source=footer" target="_blank" rel="noopener">Corporate Training</a> </li> </ul> <h3>Know More About us</h3> <ul> <li> <a href="https://www.educba.com/about-us/?source=footer" target="_blank" rel="noopener">About Us</a> </li> <li> <a href="https://www.educba.com/signup/?source=footer" target="_blank" rel="noopener">SignUp</a> </li> <li> <a href="https://www.educba.com/contact-us/?source=footer" target="_blank" rel="noopener" >Contact Us</a> </li> <li> <a href="https://www.educba.com/terms-and-conditions/?source=footer" target="_blank" rel="noopener">T&C</a> </li> </ul> </div> </template> <script> export default { name: "HelloWorld", props: { msg: String } }; </script> <style scoped> h3 { margin: 60px 0 0; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #2d43e3; } </style>
e.App.vue
Code:
<template> <div id="app"> <input type="button" v-on:click="changeQuote" value="Change the Content"> <img width="25%" src="./assets/EDUCBA.png"> <HelloWorld msg="Welcome to EduCBA" /> <p>{{quote}}</p> </div> </template> <script> import HelloWorld from "./components/HelloWorld"; export default { name: "App", components: { HelloWorld }, data: function() { return { quotes: [ "Hello! Welcome to EDUCBA.", "EDUCBA is the best place for Upskillment", "For assistance, Connect to our Counselors" ], quote: "" }; }, methods: { changeQuote() { this.quote = this.quotes[Math.floor(Math.random() * this.quotes.length)]; } }, watch: { quote(oldValue, newValue) { console.log("Change " + oldValue + " vers " + newValue); } } }; </script> <style> #app { font-family: 'Times New Roman' , Times , serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #b02558; margin-top: 20px; background-color: #85d12e; } </style>
f. main.js
代码。
import Vue from "vue"; import App from "./App.vue"; Vue.config.productionTip = false; new Vue({ render: h => h(App) }).$mount("#app");
输出。
例子 #2
拖动鼠标，改变方框的值。
在下面的例子中，随着鼠标的移动，矩形的位置沿着X轴发生变化。
用来实现下面代码的文件是。
a.EDUCBA.png
该图片的链接如下所述。
b.Annotator.vue
代码。
<template> <svg :width="w" :height="h"> <foreignObject x="0" y="0" :width="w" :height="h"> <slot></slot> </foreignObject> <slot name="annotation"></slot> </svg> </template> <script> export default { props: { width: Number, height: Number }, data () { return { w: this.width, h: this.height } }, mounted () { this.w = this.$slots.default[0].elm.width || this.width this.h = this.$slots.default[0].elm.height || this.height let currentX = this.$slots.annotation[0].data.attrs.x this.$el.addEventListener("mousemove", evt => { this.$slots.annotation[0].elm.setAttribute('x', evt.clientX) }) } } </script> <style > </style>
c.App.vue
代码:
<template> <div id= 'app'> <annotations> <rect :x="x" class="box" slot="annotation" y="1" width="150" height="90" ></rect> <img src="./assets/EDUCBA.png" /> </annotations> <p>With Mouse, Rectangle will move along x-axis.</p> </div> </template> <script> import Annotator from './components/Annotator' export default { components: { 'annotations': Annotator }, data () { return { x: 1 } }, watch: { x (val) { console.log(val) } } } </script> <style scoped> .box { fill: #de2a8a; } .box:hover { fill: #f7f72a; } #app{ background-color: #85d12e; } </style>
d. index.html
<div id="app"></div>
e. index.js
import Vue from 'vue' import App from './App' Vue.config.productionTip = false new Vue({ el: '#app', template: '<App/>', components: { App } }) console.log('Vue version: ' + Vue.version)
输出。
在全屏上，输出将如下图所示。
例子#3
Vue.js手表与计数器的使用。
在下面的例子中，当 "你点击了_次 "按钮被点击时，计数器的值会发生变化，同时也可以看到当输入 "花费的卢比 "或 "赚取的积分 "值时的变化。
用来实现下面代码的文件是。
a.EDUCBA.png
该图片的链接如下所示。
b.HelloWorld.vue
代码。
<template> <div class="hello"> <h1>{{ msg }}</h1> <div>{{ text }}</div> <br> <div>{{ message }}</div> <br> <div>{{ reversedMessage }}</div> <br> <button-counter></button-counter> <div id="computed_props" class="input-container"> Rupees Spent: <input type="text" v-model="kilometers"> </div> <div id="computed_props" class="input-container"> Points Earned : <input type="text" v-model="meters"> </div> </div> </template> <script> import Vue from "vue"; export default { name: "HelloWorld", props: { msg: String }, data() { return { text: "Mixins are cool", message: "", kilometers: 0, meters: 0 }; }, mounted() { this.text = "Two"; this.$nextTick(() => { this.text = "Track Earned Points!"; }); }, computed: { reversedMessage: function() { return this.message .split("") .reverse() .join(""); } }, watch: { kilometers: function(val) { this.kilometers = val; this.meters = val * 100; }, meters: function(val) { this.kilometers = val / 100; this.meters = val; } } }; Vue.component("button-counter", { data: function() { return { count: 0 }; }, template: '<button v-on:click="count++"> {{ count }} Times, You Clicked.</button>' }); </script> <style scoped> h3 { margin: 35px 0 0; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 11px; } a { color:#e03a69; } .input-container { display: inline-block; width: 100%; margin-bottom: 25px; margin-top: 1px; } </style>
c.App.vue
代码：D:
<template> <div id="app"> <img width="25%" src="./assets/EDUCBA.png"> <HelloWorld msg="Heyoo! Welcome to Point Checker"/> </div> </template> <script> import HelloWorld from "./components/HelloWorld"; export default { name: "App", components: { HelloWorld } }; </script> <style> #app { font-family: 'Times New Roman' , Times , serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #769cc2; margin-top: 1px; background-color: #2c3e50; } </style>
d. main.js
代码:
import Vue from "vue"; import App from "./App.vue"; Vue.config.productionTip = false; export const myMixin = { data() { return { title: "Mixins are cool", copyright: "All rights reserved. Product of super awesome people" }; }, created: function() { this.greetings(); }, methods: { greetings: function() { console.log("Howdy my good fellow!" + this.title); } } }; new Vue({ mixins: [myMixin], render: h => h(App) }).$mount("#app");
输出。
结论
在上述文章的基础上，我们看到了Vue.js中的watch的概念。我们看到了什么时候以及为什么我们应该在Vue.js中使用watch。这些例子将帮助我们理解Vue.js中watch的应用，以及如何在不同的情况和逻辑中使用它。
推荐文章
这是一篇关于Vue.js手表的指南。在这里，我们分别讨论了Vue.js中watch属性的介绍、工作原理和例子。你也可以看看下面的文章来了解更多
The postVue.js Watchappeared first onEDUCBA.
