Vue 变量，成员，属性监听
Vue变量
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>变量</title>
</head>
<body>
<div id="app">
<p>{{ msg }}</p>
<p>{{ info }}</p>
<h3>{{ msg }}</h3>
</div>
<div id="main">
<p>{{ msg }}</p>
<p>{{ info }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
// 实例成员中的data是为vue页面模板通过数据变量的
let app = new Vue({
el: '#app',
data: {
msg: 'message',
info: 'vue变量信息'
}
});
let main = new Vue({
el: '#main',
data: {
msg: 'msg',
info: 'info'
}
});
console.log(app.info);
console.log(main.info);
// 创建vue实例（new Vue）传进去的字典(对象)的key，称之为vue实例成员(变量)
// 访问实例成员，用 vue实例.$成员名, eg：app.$el
console.log(app.$el);
console.log(app.$data);
console.log(app.$data.info);
</script>
</html>
分隔符成员
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>分隔符</title>
</head>
<body>
<div id="app">
<p>{{ num }}</p>
<!--<p>{[ num ]}</p>-->
<p>{ num ]}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
num: 100
},
// 用来修改插值表达式符号
// delimiters: ['{[', ']}'],
delimiters: ['{', ']}'],
})
</script>
</html>
计算属性成员
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<input type="text" v-model="v1">
+
<input type="text" v-model="v2">
=
<button>{{ res }}</button>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
v1: '',
v2: '',
// res: '结果',
},
// 1、computed中定义的是方法属性，data中定义的也是属性，所以不需要重复定义(省略data中的)
// 2、方法属性的值来源于绑定的方法的返回值
// 3、方法属性必须在页面中渲染后，绑定的方法才会被启用(调用)
// 4、方法中出现的所有变量都会被监听，任何变量发生值更新都会调用一次绑定的方法，重新更新一下方法属性的值
// 5、方法属性值不能手动设置，必须通过绑定的方法进行设置
computed: {
res () {
console.log('该方法被调用了');
return this.v1 && this.v2 ? +this.v1 + +this.v2 : '结果';
}
}
})
</script>
<script>
console.log(1 + '2');
console.log(1 - '2');
console.log(+'2');
</script>
</html>
属性监听
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>属性的监听</title>
</head>
<body>
<div id="app">
<p>
姓名：<input type="text" v-model="full_name">
</p>
<p>
姓：<span>{{ first_name }}</span>
</p>
<p>
名：<span>{{ last_name }}</span>
</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
full_name: '',
first_name: '',
last_name: '',
},
watch: {
// 1、watch中给已有的属性设置监听方法
// 2、监听的属性值一旦发生更新，就会调用监听方法，在方法中完成相应逻辑
// 3、监听方法不需要返回值(返回值只有主动结束方法的作用)
full_name() {
if (this.full_name.length === 2) {
k_v_arr = this.full_name.split('');
this.first_name = k_v_arr[0];
this.last_name = k_v_arr[1];
}
}
}
})
</script>
</html>
Vue 变量，成员，属性监听的更多相关文章
- Vue ---- 表单指令 条件指令 循环指令 分隔符 过滤器 计算属性 监听属性
目录 案例讲解: 一. 表单指令 1.重点: 补充 2.单选框 3.单一复选框 4.多复选框 二 . 条件指令 v-if/v-show ... v-clock 三 . 循环指令 string arra ...
- Vue之计算属性Computed和属性监听Watch，Computed和Watch的区别
一. 计算属性(computed) 1.计算属性是为了模板中的表达式简洁,易维护,符合用于简单运算的设计初衷. 例如: <div id="app"> {{ myname ...
- Vue.js之计算属性（computed）、属性监听（watch）与方法选项（methods）
vue.js官网:https://cn.vuejs.org/v2/guide/components-registration.html 一.计算属性-computed 1. 作用:能够避免数据冗余,通 ...
- vue（4）—— vue的过滤器，监听属性，生命周期函数，获取DOM元素
过滤器 vue允许自定义过滤器,我个人认为,过滤器有两种,一种是对数据的清洗过滤,一种是对数据切换的动画过滤 数据切换的动画过滤 这里还是利用前面的动态组件的例子: 这里由于没办法展示动画效果,代码如 ...
- vue watch关于对象内的属性监听
vue可以通过watch监听data内数据的变化.通常写法是: data: { a: 100 }, watch: { a(newval, oldVal) { // 做点什么... console.lo ...
- vue对象属性监听
对象属性监听的两种方法: 1.普通的watch data() { return { frontPoints: 0 } }, watch: { frontPoints(newValue, oldValu ...
- 微信小程序实现watch属性监听数据变化
Vue 提供了一种通用的方式来观察和响应 Vue 实例上的数据变动:监听属性 watch. 虽然watch的滥用会导致性能不佳,但在一些情况下我们还是需要watch,使得代码更加简洁.逻辑更加清晰(其 ...
- vue2.x版本中Object.defineProperty对象属性监听和关联
前言 在vue2.x版本官方文档中 深入响应式原理 https://cn.vuejs.org/v2/guide/reactivity.html一文的解释当中,Object.defineProperty ...
- vue中的数据监听以及数据交互
现在我们来看一下vue中的数据监听事件$watch, js代码: new Vue({ el:"#div", data:{ arr:[,,] } }).$watch("ar ...
随机推荐
- Algorithm lesson final exam
1.algorithm analysis O B/W/AV/AMOR,混入其他问题,设计+分析 2.传统算法(肯定要考) 1)divide and conquer master therem. rec ...
- 更好的构建 Node 服务的工具
更好的构建 Node 服务的工具 无论前端项目在打包后都发送给后台, 有时候自己想看看效果在运行 npm run build 后只是看到一个 build 文件夹,但是直接打开是无法浏览,因此需要开启一 ...
- 通过jedis连接redis单机成功，使用redis客户端可以连接集群，但使用JedisCluster连接redis集群一直报Could not get a resource from the pool
一,问题描述: (如题目)通过jedis连接redis单机成功,使用JedisCluster连接redis集群一直报Could not get a resource from the pool 但是使 ...
- vsCode格式化插件
ESlint:是用来统一JavaScript代码风格的工具,不包含css.html等. 背景 近来研究前端,然后一直在百度上找VScode格式化(ESlint)的插件,结果找了半天都不靠谱.目前没有一 ...
- hibernate中的@GeneratedValue与@GenericGenerator
1.GeneratedValue与GenericGenerator的区别 @GeneratorValue注解----JPA通用策略生成器 @GenericGenerator注解----自定义主键生成策 ...
- 好书推荐：OpenSuse
现在正值暑期,有大把的空闲时间,觉得有必要好好琢磨琢磨,进一步学习认识网站相关的东东. 之前,出于某种考虑,购买了一年的搬瓦工虚拟主机(vps),每月有500G的流量.单纯使用Shadowsocks, ...
- AI工程师职业规划和学习路线完整版
AI工程师职业规划和学习路线完整版 如何成为一名机器学习算法工程师 成为一名合格的开发工程师不是一件简单的事情,需要掌握从开发到调试到优化等一系列能 力,这些能力中的每一项掌握起来都需要足够的努力 ...
- c++中byte数组与字符串的转化
我们不讨论与字符集有关的内容,只讨论在字节流传递过程中的问题. 我们在做一系统操作时会需要使用到数据流,比如接收网络数据,文件数据,图片数据,原始数据大多是以byte数组的形式提供,与其它语言(c#, ...
- Cocos2d-X网络编程(4) Cocos2d中的网络通信协议——Socket通信
Socket,俗称网络套接字,本身并不是协议,而是一个调用接口,是对TCP/IP协议的封装和应用,.提供了一系列方法方便开发者进行网络通讯. TCP/IP协议是使用最早的通讯协议,它是传输层协议,主要 ...
- codeforces 1156E Special Segments of Permutation
题目链接:https://codeforc.es/contest/1156/problem/E 题目大意: 在数组p中可以找到多少个不同的l,r满足. 思路: ST表+并查集. ST表还是需要的,因为 ...