[WEB] Vue.JS基础以及本地指令:v-text,v-html,v-on,v-show
作者:CC下载站 日期:2020-06-18 00:00:00 浏览:51 分类:站长帮
为了不让这位爷的青春终结,我来日更了。感谢各位的支持。
这几天学了点Django,感觉js也得接触下了,于是看到学习站上有一套黑马程序员的4小时快速入门Vue.js的教程,发现Vue.Js似乎挺容易的。
Vue.Js官方文档:https://cn.vuejs.org/v2/guide/
第一个指令:v-text:设置标签的文本值(textContent)
首先如果要在网页中使用Vue.Js的话就得先引用Vue(在官方文档有两句,第一句适合开发环境,会有相应提示,第二句更加的快,适合生成环境)
<!--开发环境版本,包含了有帮助的命令行警告--> <scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--生产环境版本,优化了尺寸和速度--> <scriptsrc="https://cdn.jsdelivr.net/npm/vue"></script>
到这里代码就分为两部分了,一部分写在html中,一部分写在JS中(大概就是用过JS渲染HTML内容了)。
打开了尘封已久的VS Code,并写入了对于Vue的HelloWorld
首先来解释一下这两句话(凭个人感觉理解):
首先是html里面的这句,新建一个div,ID为Lan,为了方便JS操作的时候找得到这个
<!--www.lanol.cn--> <divid="Lan"> {{message}} </div>
这里应该是新建一个app,vue型的,el是选择中我们之前创建的div,data就是数据,message就是我们要展现的text
varapp=newVue({ el:'#Lan', data:{ message:'HelloVue!' } })
首先呢,这个message有两种写法,第一种就是我们刚刚写的Hello Vue这种,用{{}}包围起来,这种写法不会清除原有的内容,
<!--www.lanol.cn--> <divid="Lan"> {{message}} </div>
而另一种写法就是写在标签的属性区,这样写也是可以的。
<!--www.lanol.cn--> <divid="Lan"v-text='message'> </div>
然后我们来对比一下两者的区别。
<!--www.lanol.cn--> <divid="Lan"> <h2>{{message}}www.lanol.cn</h2> <h2v-text='message'>www.lanol.cn</h2> </div>
由图可以看见,放在{{}}内的www.lanol.cn显示出来了而放在属性区的则看不见了,这就是两者区别了。
在这里面你还可以进行字符串的拼接等操作,如果是{{}}直接加就可以了,而属性区则需要一个+号和引号(因为我包含message用的是单引号,所以里面只能用双引号了如果Python一样)
<divid="Lan"> <h2>{{message}}www.lanol.cn</h2> <h2v-text='message'>www.lanol.cn</h2> <h2v-text='message+"www.lanol.cn"'></h2> </div>
然后需要注意的是message内的内容可以是列表、字典等数据类型(用Python的话说)
第二个指令:v-html:设置标签的innerhtml(说白了就是用JS写HTMl)
这个指令呢就对比着上一个v-text来记录一下。
<body> <!--www.lanol.cn--> <divid="Lan"> <h2v-text='message'></h2> <h2v-html='message'></h2> </div> <script> varapp=newVue({ el:'#Lan', data:{ message:'<h1>www.lanol.cn</h1>' } }) </script> </body>
可以看见使用了v-text的被直接显示出来了,而v-html则被渲染了,就这?就这。
第三个指令:v-on:为元素绑定事件(click,dblclick,monseenter)
使用方法:
<divid="Lan"> <inputtype="button"value="按钮"v-on:事件名="方法"> <inputtype="button"value="按钮"@事件名="方法"> </div>
varapp=newVue({ el:"#Lan", methods:{ dolt:function(){ } } )}
这里有两种写法,第一个是v-on:事件名="方法",[email protected]
然后这里就只演示一下click的事件
<body> <divid="Lan"> <inputtype="button"value="点击按钮"v-on:click="dolt"> <inputtype="button"value="点击按钮"@click="dolt"> </div> <script> varapp=newVue({ el:'#Lan', methods:{ dolt:function(){ console.log("Lan点击了按钮") } } }) </script> </body>
到此,三个基本指令已经写完了,发现掌握一个东西的最好办法就是将他自己用文字写一遍,就像我这样写一篇笔记,记录一下。
最后这是一个点击就数字就增加或减少的DEMO,过大过小则提示
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <title>VueJS基本指令学习By:Lan</title> <!--开发环境版本,包含了有帮助的命令行警告--> <scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <divid="Lan"> <inputtype="button"value="加"@click="add"> <inputtype="button"value="减"@click="sub"> <h2>{{num}}</h2> </div> <script> varapp=newVue({ el:'#Lan', data:{ num:1 }, methods:{ add:function(){ if(this.num>20){ alert('太大了') }else{ this.num++; console.log(this.num) } }, sub:function(){ if(this.num<=0){ alert('太小了') }else{ this.num--; console.log(this.num) } }, } }) </script> </body> </html>
第四个指令:v-show:根据条件决定元素是否显示(并不会从dom树中删除)。
这里呢继续用上一个DEMO来展示。给h2标签加一个v-show='true'
再将这个ture改为false来看一下,发现已经隐藏了,但是源码里面还是可以看得到的
这个true和false就和Python里面的if条件一样,也可以用其他办法来确定真假,如数字未满18则不显示。
<h2v-show='num>=18'>{{num}}</h2>
因为一开始是1,所以不会显示。
然后我们不断点击加知道超过18看看。
第五个指令:v-if:根据表达式的真假切换元素的显示状态。
本质是通过操纵dom元素来切换显示状态,表达式的值为true,元素存在于dom树中,为false从dom树中移除
<h2v-if='num>18'>{{num}}</h2>
第六个指令:v-bind:设置元素的属性(src,title,class)。
<body> <divid="Lan"> <imgv-bind:src="imgSrc"v-bind:title='imgTitle'><br> <img:src="imgSrc":title='imgTitle'><br> </div> <script> varapp=newVue({ el:'#Lan', data:{ imgSrc:'https://pan.lanol.cn/zb_users/theme/Blogs/image/logo.png', imgTitle:'https://www.lanol.cn' }, }) </script> </body>
猜你还喜欢
- 03-29 [环境测试] Hexo部署GitHub Pages
- 03-22 [源码设置] 如何设置Xiuno BBS URL-Rewrite(伪静态设定)
- 03-06 [建站交流] PicGo + smms 构建图床
- 11-18 [emlog技巧] Emlog非插件显示评论者IP属地
- 11-09 [网站维护] WordPress 后台速度慢?加快仪表板速度的 15 种方法
- 11-09 [WordPress插件] 10 个最好用的 WordPress 聊天机器人插件(免费和付费)
- 11-09 [WordPress开发] 探索 WordPress 6.3 中的增强样板(Patterns)
- 11-09 [网站维护] 无需插件即可优化 WordPress 速度的 12 种策略
- 11-09 [网站安全] WordPress 安全统计:WordPress 到底有多安全?
- 09-20 [jsp技术] JSP ssm 特殊人群防走失系统myeclipse开发mysql数据库springMVC模式java编程计算机网页设计
- 09-15 [Lightsail容器] AWS Lightsail VPS:一种在云中运行容器的简单方法
- 07-28 [运维笔记] 解决网站出现"SSL_ERROR_RX_RECORD_TOO_LONG"问题
取消回复欢迎 你 发表评论:
- 精品推荐!
-
- 最新文章
- 热门文章
- 热评文章
[文件传输] 【Android/IOS/Win】互传 EasyShare 3.6.5 零流量、极速、多平台快捷传输工具
[辅助下载] 4K高清壁纸图片批量下载工具2.0版本
[资料教程] 事业单位必刷题库
[技术课程] 【易锦】WEB渗透Hacker技术特训营(直播课第14期)
[课程] 轻松汽车摄影-全能课,最全汽车视频拍摄技巧(32节课)
[资料教程] 辣条制作配方及教程
[音乐] 低音炮车载340首
[课程] 夜鹰10分钟救命课(完结)
[资料] 寻道网道医精品视频课程集合15部
[资料课程] 适合3-7岁学前幼小衔接 《22天搞定拼音》,认、读、拼、写
[资料] [大学期末救急课] 猴博士+高斯课堂+斐多课堂,全集视频合集
[云资源] 价值2万元的老男孩Python教程
[书库] 史上最全摄影书推荐(附700本PDF版打包下载)
[云资源] 花了一千多元买的私人健身教程
[下载工具] Internet Download Manager 6.42.7 (IDM)
[影视] 灌篮高手 WEB-DL版下载/Slam Dunk/スラムダンク/灌篮高手:THE FIRST/灌篮高手电影版 2022 The First Slam Dunk 61.35G
[安卓软件] 酷我音乐APP_v10.7.6.4 去广告破解豪华VIP版
[即时通讯] 微信PC版WeChat 3.9.9.43 多开防撤回绿色版
[安卓软件] Solid Explorer文件管理器APP 2.8.38 破解版
[浏览器] Google Chrome v123.0.6312.59便携增强版
[云资源] 价值2万元的老男孩Python教程
[影视] 灌篮高手 WEB-DL版下载/Slam Dunk/スラムダンク/灌篮高手:THE FIRST/灌篮高手电影版 2022 The First Slam Dunk 61.35G
[云资源] 花了一千多元买的私人健身教程
[书库] 史上最全摄影书推荐(附700本PDF版打包下载)
[动画] 北斗神拳(1984) [两季合集] [MKV]
[资料] 抗战阵亡将士资料+续编
[电视剧] 三体 (2024) 全8集 网飞版本 中文字幕 合集
[纪录片] 河西走廊【10集 国语 中文字幕 1080P 10.8G MP4】
[电影] 2024年喜剧片·热辣滚烫 [mp4]
[影视] 铁爪 WEB-DL版下载 2023 The Iron Claw 23.48G
- 最新评论
-
杂物房内的旧档资源不保证有效CC下载站 评论于:05-14 不能**123 评论于:05-14 我想看看mw2ddyy 评论于:04-26 好东西阿zfy123123 评论于:04-18 谢谢楼主xiaoqi 评论于:04-12 勿在线解压,勿手机解压,请在电脑上用最新款压缩软件解压!推荐360压缩或者好压CC下载站 评论于:04-10 无法解压啊,客服能不能给个解压教程ravengrey 评论于:04-10 谢谢支持!!CC下载站 评论于:03-26 很棒的资源,感谢分享云体风身 评论于:03-26 感谢分享,好东西云体风身 评论于:03-26
- 热门tag