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 ...
随机推荐
- MySQL：判断逗号分隔的字符串中是否包含某个字符串 && 如何在一个以逗号分隔的列表中的一个字段中连接MySQL中的多对多关系中的数据
需求: sql语句中,判断以逗号分隔的字符串中是否包含某个特定字符串,类似于判断一个数组中是否包含某一个元素, 例如:判断 'a,b,c,d,e,f,g' 中是否包含 'a',sql语句如何 ...
- 本地H5模式写的APP体验可以比APP还好
很多APP使用H5编写,但APP链接的是远程的url的模式,导致了APP的用户体验极差,因为当你使用远程的H5 url的时候,打开H5页面的速度由网络决定,而不是由手机性能决定,假如用户在没有网络的地 ...
- 发送微信通知 java 实现
/实现类 @Service public class WeChatServiceImpl implements IWeChatService { @Override public WeChatSend ...
- 如何在K8S中优雅的使用私有镜像库 (Docker版)
前言 在企业落地 K8S 的过程中,私有镜像库 (专用镜像库) 必不可少,特别是在 Docker Hub 开始对免费用户限流之后, 越发的体现了搭建私有镜像库的重要性. 私有镜像库不但可以加速镜像的拉 ...
- Centos7无网络下安装mysql5.7——mysql-rpm安装
本教程指将mysql安装到系统默认目录下,如想自定义修改目录,请在rpm安装时自行修改: rpm -ivh --prefix= /opt xxx.rpm #将xxx.rpm安装到/opt下 一.下载m ...
- JVM内存设置多大合适？Xmx和Xmn如何设置？
JVM内存设置多大合适?Xmx和Xmn如何设置? 问题:新上线一个java服务,或者是RPC或者是WEB站点, 内存的设置该怎么设置呢?设置成多大比较合适,既不浪费内存,又不影响性能呢? 分析:依 ...
- Java GC --- Java堆内存
Java堆是被所有线程共享的一块内存区域,所有对象实例和数组都在堆上进行内存分配.为了进行高效的垃圾回收,虚拟机把堆内存划分成: 1. 新生代(Young Generation): 由 Eden 与 ...
- three.js 中使用多线程以及性能测试
今天郭先生说一下WebWorker以及WebWorker在three.js中的应用.我们都知道Javascript是单线程的,比如执行js代码的同时UI渲染就会停止,对于多核CPU的点脑,这一点让人难 ...
- .Net 5中Windows Forms运行时的新功能(翻译)
本文翻译自Igor的文章,原文地址:https://devblogs.microsoft.com/dotnet/whats-new-in-windows-forms-runtime-in-net-5- ...
- 2.2.1 Sqoop1的基本架构
当用户通过shell命令提交迁移作业后,Sqoop会从关系型数据库中读取元信息,并根据并发度和数据表大小将数据划分成若干分片,每片交给一个Map Task处理,这样多个Map Task同时读取数据库中 ...