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. SQLServer之 Stuff和For xml path

    示例 昨天遇到一个SQL Server的问题:需要写一个储存过程来处理几个表中的数据,最后问题出在我想将一个表的一个列的多行内容拼接成一行,比如表中有两列数据 : 类别 名称 AAA 企业1 AAA ...

  2. 【mybatis-plus】什么是乐观锁？如何实现“乐观锁”

    "乐观锁"这个词以前我也没听过.上次在测试需求的时候,查询数据库发现有一个version字段,于是请教开发这个字干嘛使, 人家回复我:乐观锁,解决并发更新用的.当时大家都忙,咱也不 ...

  3. easyui中开始时间小于结束时间 不然无法点击

    <tr> <td align="right">用药开始时间:</td> <td><input id="time_fr ...

  4. Spring循环依赖解决方式源码解析

    1. 什么是循环依赖? 循环依赖其实就是循环引用,也就是两个或则两个以上的bean互相持有对方,最终形成闭环.比如A依赖于B,B依赖于A我们直接上代码 先创建一个类ServiceA依赖于Service ...

  5. [leetcode]203. Remove Linked List Elements链表中删除节点

    这道题很基础也很重要 重点就是设置超前节点 public ListNode removeElements(ListNode head, int val) { //超前节点 ListNode pre = ...

  6. Ubuntu安装 Sublime Text 及常用插件推荐

    之前一直在用 Code Blocks 这个IDE工具,可用着还是感觉不怎么好,于是在网上找到了一篇文章,上面介绍了不少IDE,我找到了Sublime Text 感觉挺不错的. 帖子地址: http:/ ...

  7. 多图详解Go中的Channel源码

    转载请声明出处哦~,本篇文章发布于luozhiyun的博客:https://www.luozhiyun.com 本文使用的go的源码时14.4 chan介绍 package main import & ...

  8. 3D动漫人物代码

    <div id="page_end_html"> <script src="https://eqcn.ajz.miesnfu.com/wp-conten ...

  9. k8s之RBAC授权模式

    导读 上一篇说了k8s的授权管理,这一篇就来详细看一下RBAC授权模式的使用 RBAC授权模式 基于角色的访问控制,启用此模式,需要在API Server的启动参数上添加如下配置,(k8s默然采用此授 ...

  10. 基于vue2.x的webpack升级与项目搭建指南--基础篇

    first thing fitrst 博主声明:绝对不当标题党 有人看最好不过的背景: 十月初对公司产品的前端构建做了一些优化,但还遗留了不少问题(可了解我的前一篇博文:一次webpack小规模优化经 ...