Vue基础之插值表达式的另一种用法！附加变量的监听！
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基础之插值表达式的另一种用法！附加变量的监听！的更多相关文章
- vue简介，插值表达式，过滤器
目录 VUE框架介绍 what?什么是vue? why?为什么要学习vue? special特点? how如何使用? 下载安装? 导入方式? 挂在点el 插值表达式 delimiters自定义插值表达 ...
- Blazor和Vue对比学习（基础1.8）：Blazor中实现计算属性和数据监听
1.7章<传递UI片断>,需要做几个案例,这部分暂停消化几天.我们先把基础部分相对简单的最后两章学习了. 计算属性和数据监听是Vue当中的概念,本质上都是监听数据的变化,然后做出响应.两者 ...
- vue路由钩子拦截器beforeEach和afterEach及页面路由变化路由监听
在路由跳转的时候,我们需要一些权限判断或者其他操作.这个时候就需要使用路由的钩子函数. 定义:路由钩子主要是给使用者在路由发生变化时进行一些特殊的处理而定义的函数. 总体来讲vue里面提供了三大类钩子 ...
- [Vue入门及介绍，基础使用、MVVM架构、插值表达式、文本指令、事件指令]
[Vue入门及介绍,基础使用.MVVM架构.插值表达式.文本指令.事件指令] 1)定义:javascript渐进式框架 渐进式:可以控制一个页面的一个标签,也可以控制一系列标签,也可以控制整个页面 ...
- （day65、66）Vue基础、指令、实例成员、JS函数this补充、冒泡排序
目录 一.Vue基础 (一)什么是Vue (二)为什么学习Vue (三)如何使用Vue 二.Vue指令 (一)文本指令 (二)事件指令v-on (三)属性指令v-bind (四)表单指令v-model ...
- Vue基础语法-数据绑定、事件处理和扩展组件等知识详解（案例分析，简单易懂，附源码）
前言: 本篇文章主要讲解了Vue实例对象的创建.常用内置指令的使用.自定义组件的创建.生命周期(钩子函数)等.以及个人的心得体会,汇集成本篇文章,作为自己对Vue基础知识入门级的总结与笔记. 其中介绍 ...
- Vue（1）- es6的语法、vue的基本语法、vue应用示例，vue基础语法
一.es6的语法 1.let与var的区别 ES6 新增了let命令,用来声明变量.它的用法类似于var(ES5),但是所声明的变量,只在let命令所在的代码块内有效.如下代码: { let a = ...
- Vue基础认识
一:什么是Vue? vue是一个渐进式的JavaScript框架,采用的是MVVM模式.Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整 ...
- vue基础指令了解补充及组件介绍
v-once指令 """ v-once:单独使用,限制的标签内容一旦赋值,便不可被动更改(如果是输入框,可以主动修改) """ <di ...
随机推荐
- 5分钟看懂系列：Python 线程池原理及实现
概述 传统多线程方案会使用"即时创建, 即时销毁"的策略.尽管与创建进程相比,创建线程的时间已经大大的缩短,但是如果提交给线程的任务是执行时间较短,而且执行次数极其频繁,那么服务器 ...
- 无法启动IIS Express Web服务器
解决 打开项目文文件夹以.csproj结尾的文件),找到WebProjectProperties节点然后,将图中框选的三项节点内容全部清空 删除.vs 重新启动即可
- Tomcat如何使用线程池处理远程并发请求
Tomcat如何使用线程池处理远程并发请求 通过了解学习tomcat如何处理并发请求,了解到线程池,锁,队列,unsafe类,下面的主要代码来自 java-jre: sun.misc.Unsafe j ...
- char*,const char*和string 互转
1. string转const char* 1 string s = "abc"; 2 const char* c_s = s.c_str(); 2. const char*转st ...
- java 常用时间操作类，计算到期提醒，N年后，N月后的日期
package com.zjjerp.tool; import java.text.ParseException; import java.text.ParsePosition; import jav ...
- SpringBoot 2.X以上集成redis
在网上看到的教程和资料大多数都是2.X以下的版本.使用起来会出现各种问题,通过百度,最后终于弄好了. 2.x以上使用的是 spring-boot-starter-data-redis 2.x一下使用的 ...
- Spring IOC 笔记
什么是IOC与DI IOC(inversion of control) 它描述的其实是一种面向对象编程中的设计原则,用来降低代码之间的耦合度, 而DI(dependency Injection)依赖注 ...
- C#设计模式——建造者模式（Builder Pattern）
1.建造者模式简介 1.1>.定义 建造者模式(Builder)将复杂的构建与其表示相分离,使得同样的构建过程可以创建不同的表示. 1.2>.使用频率 中低 1.3>.原型模式应用 ...
- JVM 分代GC策略分析
JVM 分代GC策略分析 我们以Sun HotSpot VM来进行分析,首先应该知道,如果我们没有指定任何GC策略的时候,JVM默认使用的GC策略.Java虚拟机是按照分代的方式来回收垃圾空间,我 ...
- Eureka Server启动过程分析
1.首先,SpringCloud充分利用了SpringBoot的自动装配特点 eureka-server的jar包,发现在META-INF下面的配置文件spring.factories,里面记录了Sp ...