Vue基础之插值表达式的另一种用法！附加变量的监听！

讲这个之前我们先回顾一下原来的用法！

<body>

	<!-- Vue.js的应用可以分为两个重要的组成部分

	一个是视图!

	另一个是脚本!！ -->

	<!-- 下面的就是视图！ -->

	<div id="app">

		<h1>{{message}}</h1>

	</div>

	<!-- 下面的就是脚本！ -->

	<script type="text/javascript">

	// 

	var app = new Vue({

		el:'#app', // 这个就是你要操作的元素！

		data: {

			message: 'lvhang'

		} // data用于保存数据！插值表达式！我们在视图中声明了那些变量， 就需要在data中注册同名的变量，并且对变量进行赋值！

	})

	</script>

</body>

原来的插值对象表达式是写在一个大的对象里面的！就是在app 下面的data属性里面的！

新的方式是在外面创建一个对象， 然后把新创建的对象放在data 属性的后面！

<body>

		<div id="app">

			{{name}}

		</div>

		<script type="text/javascript">

			// 每个Vue的应用都是通过Vue函数创建一个新的Vue实例开始的!

			// 通常我们都会创建一个变量来接受Vue返回的一个对象！

			// 当一个Vue实例被创建时，它将data对象中的所有的属性加入到Vue的响应式系统中，当这些属性的值发生改时，视图将会产生响应，及匹配为更新的值!

			var data = {

				name: 'lvchengxin'

			}

			var app = new Vue({

				el: '#app',

				data: data

			})

			// data.name = 'daxia'

			// data.$name = 'lvhang!'; // lvchengxin

			// app.name = 'chengdu'

			// 上面的就是 数据属性！

			// 除了数据属性，Vue实例还暴露了一些有用的实例属性与方法，它们都有前缀$.以便与用户定义的属性区分开来，例：

			// $watch 是一个实例方法! 方法要放在你监听的变量名或属性名之前!

						// 第一个参数就是你要观察那个变量的变化！

						// 第二个参数就是回调函数！回调函数有两个参数，第一个是最新的值， 第二个是原来的值！

			app.$watch('name', function(newVal, oldVal) {

				console.log(newVal) // xiaoxia

				console.log(oldVal) // lvchengxin

			} )

						app.$data.name = 'xiaoxia'; // xiaoxia

		</script>

	</body>

最后还附加一个监听变量的一个方法， 上面已经给出来了！最重要的就是这个方法使用的时候要放在变量的前面!

Vue基础之插值表达式的另一种用法！附加变量的监听！的更多相关文章

  1. vue简介，插值表达式，过滤器

    目录 VUE框架介绍 what?什么是vue? why?为什么要学习vue? special特点? how如何使用? 下载安装? 导入方式? 挂在点el 插值表达式 delimiters自定义插值表达 ...

  2. Blazor和Vue对比学习（基础1.8）：Blazor中实现计算属性和数据监听

    1.7章<传递UI片断>,需要做几个案例,这部分暂停消化几天.我们先把基础部分相对简单的最后两章学习了. 计算属性和数据监听是Vue当中的概念,本质上都是监听数据的变化,然后做出响应.两者 ...

  3. vue路由钩子拦截器beforeEach和afterEach及页面路由变化路由监听

    在路由跳转的时候,我们需要一些权限判断或者其他操作.这个时候就需要使用路由的钩子函数. 定义:路由钩子主要是给使用者在路由发生变化时进行一些特殊的处理而定义的函数. 总体来讲vue里面提供了三大类钩子 ...

  4. [Vue入门及介绍，基础使用、MVVM架构、插值表达式、文本指令、事件指令]

    [Vue入门及介绍,基础使用.MVVM架构.插值表达式.文本指令.事件指令] 1)定义:javascript渐进式框架 ​ 渐进式:可以控制一个页面的一个标签,也可以控制一系列标签,也可以控制整个页面 ...

  5. （day65、66）Vue基础、指令、实例成员、JS函数this补充、冒泡排序

    目录 一.Vue基础 (一)什么是Vue (二)为什么学习Vue (三)如何使用Vue 二.Vue指令 (一)文本指令 (二)事件指令v-on (三)属性指令v-bind (四)表单指令v-model ...

  6. Vue基础语法-数据绑定、事件处理和扩展组件等知识详解（案例分析，简单易懂，附源码）

    前言: 本篇文章主要讲解了Vue实例对象的创建.常用内置指令的使用.自定义组件的创建.生命周期(钩子函数)等.以及个人的心得体会,汇集成本篇文章,作为自己对Vue基础知识入门级的总结与笔记. 其中介绍 ...

  7. Vue（1）- es6的语法、vue的基本语法、vue应用示例，vue基础语法

    一.es6的语法 1.let与var的区别 ES6 新增了let命令,用来声明变量.它的用法类似于var(ES5),但是所声明的变量,只在let命令所在的代码块内有效.如下代码: { let a = ...

  8. Vue基础认识

     一:什么是Vue? vue是一个渐进式的JavaScript框架,采用的是MVVM模式.Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整 ...

  9. vue基础指令了解补充及组件介绍

    v-once指令 """ v-once:单独使用,限制的标签内容一旦赋值,便不可被动更改(如果是输入框,可以主动修改) """ <di ...

随机推荐

  1. 用Python实现童年的回忆：俄罗斯方块！别说还挺好玩

    在那个电子产品比较匮乏的年代,小游戏机

  2. 前台js获取url传递参数(后台Request.QueryString接收)

    方法 封装 function GetQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^ ...

  3. MySQL如何优雅的删除大表

    前言 删除表,大家下意识想到的命令可能是直接使用DROP TABLE "表名",这是初生牛犊的做法,因为当要删除的表达空间到几十G,甚至是几百G的表时候.这样一条命令下去,MySQ ...

  4. spring整合sharding-jdbc实现分库分表

    1.创建两个库,每个库创建两个分表t_order_1,t_order_2 DROP TABLE IF EXISTS `t_order_1`; CREATE TABLE `t_order_1` ( `i ...

  5. oracle 19c dataguard aws ORA-03186报错

    环境说明 在亚马逊云AWS上面安装了一套oracle 19c dataguard,linux centos 7.7的操作系统,开始时同步正常,实时应用redolog,一会儿之后就不行了.报错如下: o ...

  6. java中将从数据库查询的信息输出到excel文件中

    package com.cn.peitest.excel; import java.io.File; import java.lang.reflect.Field; import java.util. ...

  7. 在Ubuntu14.04下配置Samba 完成linux和windows之间的文件共享

    在Windows和Linux之间传递文件可以使用Samba服务.下面是安装步骤: 1. 安装Samba. sudo apt-get install samba 2. 修改配置文件 sudo gedit ...

  8. Pytest测试框架（一）：pytest安装及用例执行

    PyTest是基于Python的开源测试框架,语法简单易用,有大量的插件,功能非常多.自动检测测试用例,支持参数化,跳过特定用例,失败重试等功能. 安装 pip install -U pytest  ...

  9. JavaScript中对象是否需要加引号？

    对象的属性名是包括空字符串在内的所有字符串. 那么问题来了,我们平时定义的对象如下,是没有引号""or''的,这样不加引号有没有错呢? 答案是,加不加分情况!但加了肯定没问题... ...

  10. UNraid学习随手记：显示主板、CPU传感器温度

    话不多说直接开始 首先安装NerdTools 地址: https://raw.githubusercontent.com/dmacias72/unRAID-NerdPack/master/plugin ...