VUE 学习代码 监视和 模板语法回调函数
2024-04-08 12:05:04
文章目录
- HelloWorld
- 模板语法
- 03_计算属性和监视
HelloWorld
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>01_HelloWorld</title>
</head>
<body><!--1. 引入Vue.js2. 创建Vue对象el : 指定根element(选择器)data : 初始化数据(页面可以访问)3. 双向数据绑定 : v-model4. 显示数据 : {{xxx}}5. 理解vue的mvvm实现
--><!--模板-->
<div id="test"><input type="text" v-model="msg"><br><!--指令--><input type="text" v-model="msg"><!--指令--><p>hello {{msg}}</p><!--大括号表达式-->
</div><script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">const vm = new Vue({ // 配置对象 options// 配置选项(option)el: '#test', // element: 指定用vue来管理页面中的哪个标签区域data: {msg: 'atguigu'}})
</script>
</body>
</html>
<!--
MVVM
MODWL:DATA 模型数据对象
VIEW: 模板页面
VIEWMODEL: 视图模型(vue 实列 new)
-->模板语法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>模板语法</title>
</head>
<body>
<!--
1. 模板的理解:动态的html页面包含了一些JS语法代码大括号表达式指令(以v-开头的自定义标签属性)
2. 双大括号表达式语法: {{exp}} 或 {{{exp}}}功能: 向页面输出数据可以调用对象的方法
3. 指令一: 强制数据绑定功能: 指定变化的属性值完整写法:v-bind:xxx='yyy' //yyy会作为表达式解析执行简洁写法::xxx='yyy'
4. 指令二: 绑定事件监听功能: 绑定指定事件名的回调函数完整写法:v-on:click='xxx'简洁写法:@click='xxx'
-->
<div id="app"><h2>1. 双大括号表达式</h2><p>{{msg}}</p><h2>2.指令一: 强制数据绑定</h2><a href="url">访问指定站点</a><br><a v-bind:href="url">访问指定站点2</a><br><img v-bind:src="url"><img :src="url"><h2>3. 指令二: 绑定事件监听</h2><button v-on:click="test">点我</button><button @click="test">点我</button>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">new Vue({el:'#app',data:{msg: '你好啊大括号！',url:'http://www.gulixueyuan.com/files/default/2018/06-15/0918251905f6057842.jpg'},methods:{test(){alert("你好回调函数！");}}})</script>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>02_模板语法</title>
</head>
<body>
<!--
1. 模板的理解:动态的html页面包含了一些JS语法代码大括号表达式指令(以v-开头的自定义标签属性)
2. 双大括号表达式语法: {{exp}} 或 {{{exp}}}功能: 向页面输出数据可以调用对象的方法
3. 指令一: 强制数据绑定功能: 指定变化的属性值完整写法:v-bind:xxx='yyy' //yyy会作为表达式解析执行简洁写法::xxx='yyy'
4. 指令二: 绑定事件监听功能: 绑定指定事件名的回调函数完整写法:v-on:click='xxx'简洁写法:@click='xxx'
--><div id="app"><h2>1. 双大括号表达式</h2><p>{{content}}</p><p>{{content.toUpperCase()}}</p><h2>2. 指令一: 强制数据绑定</h2><a href="url">访问指定站点</a><br><a v-bind:href="url">访问指定站点2</a><br><a :href="url">访问指定站点2</a><br><h2>3. 指令二: 绑定事件监听</h2><button v-on:click="test">点我</button><button @click="test">点我</button></div><script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">new Vue({el: '#app',data: {content: 'NBA I Love This Game',url: 'http://www.atguigu.com'},methods: {test () {alert('好啊!!!')}}})
</script>
</body>
</html>
03_计算属性和监视
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>03_计算属性和监视</title>
</head>
<body>
<!--
1. 计算属性
在computed属性对象中定义计算属性的方法
在页面中使用{{方法名}}来显示计算的结果
2. 监视属性:
通过通过vm对象的$watch()或watch配置来监视指定的属性
当属性变化时, 回调函数自动调用, 在函数内部进行计算
3. 计算属性高级:
通过getter/setter实现对属性数据的显示和监视
计算属性存在缓存, 多次读取只执行一次getter计算
-->
<div id="demo">姓:<input type="text" placeholder="First Name" v-model="firstName"><br>名:<input type="text" placeholder="Last Name" v-model="lastName"><br>姓名1:<input type="text" placeholder="Full Name1" v-model="fullName1"><br>姓名2:<input type="text" placeholder="Full Name" v-model="fullName2"><br>姓名3:<input type="text" placeholder="Full Name" v-model="fullName3"><br>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">const vm = new Vue({el: '#demo',data: {firstName: 'A',lastName: 'B',//fullName1: 'A-B'},computed:{fullName1() {return this.firstName + '' + this.lastName;}}})
</script></body>
</html>
--------------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>03_计算属性和监视</title>
</head>
<body>
<!--
1. 计算属性在computed属性对象中定义计算属性的方法在页面中使用{{方法名}}来显示计算的结果
2. 监视属性:通过通过vm对象的$watch()或watch配置来监视指定的属性当属性变化时, 回调函数自动调用, 在函数内部进行计算
3. 计算属性高级:通过getter/setter实现对属性数据的显示和监视计算属性存在缓存, 多次读取只执行一次getter计算
-->
<div id="demo">姓: <input type="text" placeholder="First Name" v-model="firstName"><br>名: <input type="text" placeholder="Last Name" v-model="lastName"><br><!--fullName1是根据fistName和lastName计算产生-->姓名1(单向): <input type="text" placeholder="Full Name1" v-model="fullName1"><br>姓名2(单向): <input type="text" placeholder="Full Name2" v-model="fullName2"><br>姓名3(双向): <input type="text" placeholder="Full Name3" v-model="fullName3"><br><p>{{fullName1}}</p><p>{{fullName1}}</p>
</div><script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">const vm = new Vue({el: '#demo',data: {firstName: 'A',lastName: 'B',fullName2: 'A-B'},// 计算属性配置: 值为对象computed: {fullName1 () { // 属性的get()console.log('fullName1()', this)return this.firstName + '-' + this.lastName},fullName3: {//回调函数的使用//你定义的，2.你没有调用，3.但最终它执行。// 当获取当前属性值时自动调用, 将返回值(根据相关的其它属性数据)作为属性值get () {console.log('fullName3 get()')return this.firstName + '-' + this.lastName},// 当属性值发生了改变时自动调用, 监视当前属性值变化, 同步更新相关的其它属性值set (value) {// fullName3的最新value值 A-B23console.log('fullName3 set()', value)// 更新firstName和lastNameconst names = value.split('-')this.firstName = names[0]this.lastName = names[1]}}},watch: {// 配置监视firstNamefirstName: function (value) { // 相当于属性的setconsole.log('watch firstName', value)// 更新fullName2this.fullName2 = value + '-' + this.lastName}}})// 监视lastNamevm.$watch('lastName', function (value) {console.log('$watch lastName', value)// 更新fullName2this.fullName2 = this.firstName + '-' + value})</script>
</body>
</html>
VUE 学习代码 监视和 模板语法回调函数相关推荐
- Vue学习心得记录之模板语法
下面是我这半年以来总结的Vue学习笔记,帮助自己复习学习Vue的基本用法.有需要的同志可以参考下. Vue的模板语法 Vue有很简单的模板语法,这些Vue指令用来响应式改变渲染DOM可以快速入门上手这 ...
- python导入模块的语法结构_python学习第五讲,python基础语法之函数语法,与Import导入模块....
python学习第五讲,python基础语法之函数语法,与Import导入模块. 一丶函数简介 函数,就是一个代码块,这个代码块是别人写好的.我们调用就可以. 函数也可以称为方法. 1.函数语法定义 ...
- 微信小程序学习6：页面生命周期回调函数
微信小程序学习6:页面生命周期回调函数 文章目录 微信小程序学习6:页面生命周期回调函数 1 生命周期图像 2 生命周期回调函数触发条件 onLoad(Object query) onShow() o ...
- VUE 学习代码理解(1~5课时代码)
文章目录 HelloWorld 模板语法 03_计算属性和监视 04_class与style绑定 05_条件渲染 HelloWorld <!DOCTYPE html> <html l ...
- Vue入门（一）—— 模板语法
Vue.js 是什么? Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架. Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合. 什么是渐进 ...
- vue加载时闪现模板语法-处理方法
问题:使用VUE时,页面加载瞬间,会闪现模板语法,例如{{ item.name }}等 解决办法: 1.可以通过VUE内置的指令v-cloak解决这个问题(推荐) 具体实现: <ul v-clo ...
- Vue学习之监视属性watch
简介 设置监视属性的作用: 当被监视的属性发生变化时,回调函数会自动调用,进行相关操作. 监视的熟悉必须存在,才能进行监视. 使用vue的配置对象中的watch属性进行配置. <!DOCTYPE ...
- Django 2.0 学习(12)：Django 模板语法
Django 模板语法 一.模板 只要是在html里面有模板语法就不是html文件了,这样的文件就叫做模板. 二.模板语法 模板语法变量:{{ }} 在Django模板中遍历复杂数据结构的关键是句点字 ...
- cocos2d-x学习笔记 动作 CCCallFunc家族（回调函数包装器）
CCCallFunc是CCActionInstant的子类,是非常重要的一个类族,就是适配器.用大白话说,就是做了一层包装,把函数包装成动作,这样你在执行动作的时候,就可以执行函数了.听起来很怪异吗? ...
最新文章
- ASP.NET MVC以ValueProvider为核心的值提供系统: DictionaryValueProvider
- grunt-connect-proxy解决开发时跨域问题
- Spring基于 XML 的声明式事务控制（配置方式）
- ie6 下最佳 PNG透明方案【转】
- 使用hbuilder的maps模块调起百度地图导航
- 映世便携音箱我对你一见钟情啦~
- 神经网络 顾晓东_基于神经网络的图像边缘检测方法
- 论文Algorithms for non-negative matrix Factorization
- Hadoop出现core-site.xml not found的解决办法
- linux环境 下载Neo4j
- 新手记录SPSS学习笔记1
- python 换行打印
- vue基于Echarts的拖拽数据可视化功能实现
- Qtum量子链周报（7月29日-8月4日）
- 一篇文章彻底搞懂海明码
- FIL新一轮上涨：FIL算力通证迎来新热潮
- 什么样的程序员适合去创业公司
- 计算机基础与应用说课ppt课件,广东省“XX杯”说课大赛计算机应用基础类一等奖作品：PPT写字动画的制作现场说课课件.ppt...
- Windows删除文件夹提示“文件夹被某一程序占用”，删除失败
- CrackMe160 学习笔记 之 044