vue之watch用法

一个对象,键是观察表达式,值是对应回调。值也可以是方法名,或者是对象,包含选项。在实例化时为每个键调用 $watch() ;

<template>   <input v-model="example0"/>   <input v-model="example1"/>  //如果对象的键值发生变化,则需要添加deep:true参数,数组不需要这样做   <input v-model="example2.inner0"/></template><script>   export default {      data(){        return {          example0:"",          example1:"",          example2:{            inner0:1,            innner1:2          }        }      },      watch:{        example0(curVal,oldVal){          console.log(curVal,oldVal);        },        example1:‘a‘,//值可以为methods的方法名        example2:{         //注意:当观察的数据为对象或数组时,curVal和oldVal是相等的,因为这两个形参指向的是同一个数据对象          handler(curVal,oldVal){            conosle.log(curVal,oldVal)          },          deep:true        }      },      methods:{        a(curVal,oldVal){          conosle.log(curVal,oldVal)        }      }    }</script>
时间: 2024-08-10 09:53:49

vue之watch用法的相关文章

Vue组件基础用法

前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需,使用不同的组件来拼接页面.这种开发模式使前端页面易于扩展,且灵活性高,而且组件之间也实现了解耦.本文将详细介绍Vue组件基础用法 概述 组件是一个自定义元素或称为一个模块,包括所需的模板.逻辑和样式.在HTML模板中,组件以一个自定义标签的形式存在,起到占位符的功能.通过Vue.js的声明式渲染后,

vue路由高级用法

五.路由设置高级用法alias 别名 {path:'/list',component:MyList,alias:'/lists'}redirect 重定向 {path:'/productList',redirect:'/list'}path:'*' 异常处理 {path:'*',component:'NotFound'} <!doctype html> <html> <head> <meta charset="UTF-8"> <ti

vue的基础用法

基础用法(没有搭建框架就在html文件里演示) 一. Hello World起步 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hello World</title> </head> <body> <!-- 模板 --> <div id="app&qu

vue的基本用法

公共样式---pc版的404报错 动态src 这个是vue组件template部分 <div class="not-found"> <img :src="img" alt="404"> </div> <div>{{fish}}</div> script部分 import './404.css' //先引入less import img from './error-404.png' exp

cdn模式下vue的基本用法

我们知道jq是简化了dom操作,而react和vue则是通过使用虚拟dom的方式,不需要频繁的更改ui界面,而是通过更改数据的方式来更新界面. 我们知道些jq插件时会在IFFE中传入jQuery,jQuery在此程序中映射为符号,这样可以避免$号被其他库覆写.其实vue中new Vue()对象, 效果也是类似,可以避免vue范围类的数据或变量被污染. 我们先来看一些基本的用法 插入文本值 v-html 直接插入html结构 v-bind属性 <a :href="url">

Vue SSR: 基本用法 (二)

上一篇讲解了ssr的原理,这篇主要讲基本用法: 1.安装 npm install vue vue-server-renderer --save 我们将在整个指南中使用 NPM,但你也可以使用 Yarn. 注意: 推荐使用 Node.js 版本 6+ . vue -server -renderer 和 vue 必须匹配版本. 必须匹配版本. vue -server -renderer 依赖一些 Node.js  原生模块,因此只能在 Node.js原生模块 中使用. 我们可能会提供一个更简单的构建

Vue:基本用法。

一.起步 1.下载核心库vue.js bower info vue #查看版本号 npm init --yes #下载vue.js cnpm install vue --save 版本 v2.5.17 目前最新版本() vue2.0比1.0相比最大的变化就是引入Virtual DOM(虚拟DOM),页面更新效率高,速度更快 2.hello world(对比 angular)2.1angular实现 js: let app=angular.module("myApp",[]) app.c

分享vue中 slot用法

//slot默认用法 //slot带参数name用法

vue 模版组件用法

第一种 //首先,别忘了引入vue.js <div id="user_name_01"></div> <script src="../node_modules/vue/dist/vue.js"></script> <script> var User_01 = Vue.extend({// 创建可复用的构造器 template: '<p>{{firstName}} {{lastName}} age

vue动画的用法

vue动画 在vue.js中有两种写动画的方法,第一种就是像js里一样,用原生代码来实现,第二种则是使用animate.css的动画类文件,这个动画类和bootstrap.css文件类似,直接调用类就可以了,话不多说,直接上代码. 一.vue.js原生动画 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title>