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 ...
随机推荐
- element ui 左侧导航栏
<el-menu class="left-menu" :default-active="$route.name" :unique-opened=" ...
- Astra示例程序库正式上线啦
新上线的Astra示例程序库提供了基于多种编程语言和框架使用Astra的例子.借助这个示例程序库,你可以在短时间内建构起数据库.创建多个表.装载示例数据并部署基于Cassandra的应用程序. 什么是 ...
- 微服务痛点-基于Dubbo + Seata的分布式事务(TCC模式)
前言 Seata 是一款开源的分布式事务解决方案,致力于提供高性能和简单易用的分布式事务服务.Seata 将为用户提供了 AT.TCC.SAGA 和 XA 事务模式,为用户打造一站式的分布式解决方案. ...
- Idea mybatis maper接口与mapper.xml文件关联 会根据接口中的方法点在mxl中生成相应sql方法
- Java动态代理分析
Java动态代理机制的出现,使得Java开发人员不用手工编写代理类,只要简单地制定一组接口及委托类对象,便能动态地获得代理类.代理类会负责将所有的方法调用分配到委托对象上反射执行,配置执行过程中,开发 ...
- JavaScript内置可用类型
string,number,boolean,null和undefined,object,symbol(ES6新语法)
- JavaDailyReports10_15
2020-10-15 16:12:16 今天学习了如何实现倒计时控制程序的运行: 1 package timer; 2 3 import java.util.Calendar; 4 import ja ...
- 已加载"C:\Windows\SysWOW64\msvcp120d.dll".无法查找或打开 PDB 文件.
已加载"C:\Windows\SysWOW64\msvcp120d.dll".无法查找或打开 PDB 文件. 今天使用vs2013遇到了这样的问题. 解决方案: 点调试. 然后选项 ...
- android 百度地图 团队开发及正式apk发布
百度地图开发关键是获取正确的API Key, 百度官网写的只是在你本地的机器能运行 你把AndroidManifest.xml(这里是最新的v2_4_1,API Key配置在这里) svn 提交后 ...
- Tensorflow创建已知分布的张量
一.随机数 tf.random(num) 随机产生返回0----num-1的数 二.图变量 tf.Variable.init(initial_value, trainable=True, collec ...