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 ...
随机推荐
- 前中后序递归遍历树的体会 with Python
前序:跟->左->右 中序:左->根->右 后序:左>右->根 采用递归遍历时,编译器/解释器负责将递归函数调用过程压入栈并保护现场,在不同位置处理根节点即可实现不 ...
- Python之猜拳游戏
第一次写这东西,主要是为了记录自己的学习历程,或者说是为了忘记的时候找回来看看. 今天是参加风变编程培训第10天.昨天晚上完成了第10关关底的猜拳小游戏. 要求:人和电脑轮流出拳.判断输赢. 给出列表 ...
- “体检医生”黑科技|让AI开发更精准，ModelArts更新模型诊断功能
摘要:华为云AI开发平台ModelArts黑科技加持AI研发,让模型开发更高效.更简单,降低AI在行业的落地门槛.全面的可视化评估以及智能诊断功能,使得开发者可以直观了解模型各方面性能,从而进行针对性 ...
- 创建Web Service项目
使用AXIS框架 idea方式: 创建后 加入axis依赖包到输出目录,idea也会提示你进行这步操作 项目启动后访问 http://localhost:8080/AxisWebService/s ...
- 读取pdf中的内容
import com.spire.pdf.PdfDocument;import com.spire.pdf.PdfPageBase;import java.io.*; public class Ext ...
- jsp页面技术总结
1.日期框只能选择不能输入属性设置 data-options="editable:false" 2.列表中多出一列空白 .datagrid-view1{ width: 0px!im ...
- Java动态代理分析
Java动态代理机制的出现,使得Java开发人员不用手工编写代理类,只要简单地制定一组接口及委托类对象,便能动态地获得代理类.代理类会负责将所有的方法调用分配到委托对象上反射执行,配置执行过程中,开发 ...
- spring传播机制注意点
在同一个类里面spring的传播机制是不起作用的比如说在执行saveA方法的时候调用C方法插入C设置的传播属性是不使用事物 但是执行的效果是saveA方法抛出异常后导致C的记录回滚了也就是说明C方法设 ...
- [leetcode]222. Count Complete Tree Nodes完全二叉树的节点数
/* 满二叉树的特点是2^n-1,对于完全二叉树,一个node如果左右子树深度相同,那么 是一个满二叉树.如果不是,那就把node算上,继续往下看,下边的可能是满二叉树 由于完全二叉树中有一些子满二叉 ...
- Linux目录的慨念
1.路径 对文件进行访问时,要用到"路径"(Path)的慨念. 顾名思义,路径是指从树型目录中的某个目录层次到某个文件的一条道路. 此路径的主要构成是目录名称,中间用"/ ...