遇见 vue.js --------阿文的vue.js学习笔记(2)----- 基本使用 全国鞋服行业首个5G专项应用落地柒牌 自动搬运作业提升效率150% 大数据系统提高生产效率超10% [网络安全自学篇] 九十四.《Windows黑客编程技术详解》之提权技术(令牌权限提升和Bypass UAC) 鸿蒙OS 2.0 开源蹭热浅读 蚂蚁三面滑铁卢!遭分布式截胡,靠这些笔记潜修30天,挺进京东 【高并发】Redis如何助力高并发秒杀系统,看完这篇我彻底懂了!! K8s概述:几种集群方案的对比 Linux到底该怎么学?RHCA架构师整理了300页学习笔记 到了2020年,技术水平到底需要达到怎样的程度才能成为顶级的阿里P8架构师 Linux怎么学?一张思维导图带你深入Linux核心原理 金九银十首战告捷!凭借这份Alibaba爆款“面试宝典”成功斩获美团Offer 大数据杀熟:我投之以元宝,它报之以砍刀! “物联网加持”下的社区长啥样儿? 潘云鹤院士:大数据智能是人工智能2.0的核心组成部分 防小孩和老人走失,定位精度达1厘米?上海社区为先进物联网产品提供落地场景 技术老兵十年专攻MySQL编写了763页核心总结,90MySQL问题全解 【Jenkins自动化部署】Windows节点Apache+Django服务自动化构建 Mybatis 使用通用 mapper 正道的光!阿里爆款Jenkins+K8s笔记终于全网开源了 不要死磕Java并发了,阿里P7架构师带你深入剖析synchronized的实现原理 EtherNet/IP协议基础知识(Part 1) CGB2005-京淘13 思科 OSPF协议简单配置与分析 在一家公司呆了 10 年的程序员,最后都怎么了? 致力物联网芯片研发,奕斯伟计算获逾20亿元融资 Unity性能优化技巧 纪念首次撸出来的编程题--2020深信服软件测试岗 qml 去除标题栏后 拖动窗口和改变窗口大小 如何舒服地在图书馆用ipad入门深度学习【windows jupyter远程】 力扣Java版个人代码分享-树篇( 107. 二叉树的层次遍历 II) 第十届蓝桥杯省赛java类B组 试题 E:迷宫 (动态规划之回溯法) Unity+罗技G29方向盘+Realistic Car Controller 制作简单的模拟驾驶 2020阿里笔试题解(9.11) 起飞!这份技术点拉满的ELk+Lucene笔记,可能价值百万 好文精选整理--Redis+Nginx+设计模式+Spring全家桶+SQL+Dubbo技术 覆盖全网的微服务架构笔记,看完还不懂你来打我 技术干货:JVM架构体系与GC命令全梳理,建议收藏 跪拜,阿里P9加班到凌晨,硬肝三个月推出这份IT架构运维实践 太厉害了,华为架构师终于整理出SSM+Nginx+Redis+SQL+微服务pdf 膜拜!终于有人总结出Spring+SpringMVC+MyBatis源码层PDF了 开发1-5年的Java程序员,该学习哪些知识实现涨薪30K? 云原生景观:供应层(Provisioning)介绍 vulhub学习笔记-struts2 S2-057 Remote Code Execution Vulnerablity远程代码执行 微服务启动报 Error creating bean with name ‘eurekaAutoServiceRegistration‘ 异常 「信息安全-密码与隐藏技术」RSA加密算法的实现(CPP 实现) 单例模式线程是否安全? DDCTF2020 Writeup 迭代器模式在开源代码中的应用 微信群总是有人发广告?看我用Python写一个自动化机器人消灭他! 极光大数据持续亏损,称风控产品数据涉10亿移动端用户、包括财产消费等信息,对外投资极贷管家
您的位置:首页 >程序人生 >

遇见 vue.js --------阿文的vue.js学习笔记(2)----- 基本使用

** 新学习新征程,我们一起踏上学习 vue.js的新长征

遇见 vue.js --------阿文的vue.js学习笔记(1)-----初识vue.js

… … …

遇见 vue.js --------阿文的vue.js学习笔记(目录)

       关注我,我们一起学习进步。

**        首先我们来做一个例子,需要实现当我们在输入框中输入内容之后,我们下面的你好后面也会出现相同的内容:

在这里插入图片描述 代码如下:

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body>//创建一个盒子 放入我们的输入框和p标签<div id="a"><input type="text" v-model="message">//v-modle 就是 双向数据绑定<p>你好 {{message}}</p>// 显示数据{{ xxx }}</div>//引入 vue.js <script src="vue.js"></script>//创建 vue 实例<script type="text/javascript">var a = new Vue({//表明是将哪个元素交个vue 管理的el: "#a", //这里的 el 就是 element 的缩写 ,代表(元素);data: { //这里指我们的数据message : ""}})</script></body></html>

知识点 : (1) v-model : 双向数据绑定

双向数据绑定的意思就是指我们vue 中的 data 数据将和我们绑定的 dom 元素的内容保持一致,当一方放生变化之后另一方也会发生变化

                 (2) {{xxxx}} :显示的数据

将数据写在两个大括号内 。

                 (3)const vm = new vue ({

                                                     })

很多时候我们写vue 实例的时候会写成这种格式。

                 (4)我们的vue.js 遵循 MVVM 模式

MVVM 是 Model-View-ViewModel 的简写 M (model) : 模型,指数据对象 (data) V (view):视图,模板页面 VM (viewModel) : 视图模型 (也就是vue 实例)

1、双大括号表达式

举例: 在这里插入图片描述 执行结果:你可以看到我们的 p标签里面的{{msg}}表示的是我们下面 data里面 msg 的数据 在这里插入图片描述        这里的msg 是文本信息,但是如果我们的 msg 是超链接的话,这样写是无法完成执行的。 举个栗子: 你可以发现这样写的话它会将我们的超链接理解为文本,而不是一个超链接 在这里插入图片描述 这个时候就需要另一种写法了------v-html

2、v-html

举个栗子: 在这里插入图片描述 执行结果:你就可以看到这是一个超链接,并且是可以点击的 在这里插入图片描述

3、v-bind 强制数据绑定

我们插图片的时候,

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script src="vue.js"></script></head><body><div id="a">//必须要添加 这个 v-bind ,不然是不会将二者进行绑定,那么图片也不会显示出来<img v-bind:src="imgurl"></div><script>const vm=new Vue({el:"#a",data:{//这个是去网上随便复制的一张图片的地址 imgurl:'http://p5.itc.cn/q_70/images03/20200912/dd4bf25da88e44219ee2ccda312538da.jpeg'}})</script></body></html>

执行结果: 在这里插入图片描述 补充: 当然很多时候 你也可以将前面的 v-bind 省略 只需要在src前面添加一个冒号也可以表示 强制绑定数据 ,即写作 :src=“”

4、v-on 绑定事件监听

可以理解为绑定某种方法(函数) 举个栗子:这里的点击按钮说 和我们下面的 dj 函数绑定,相当于一个鼠标的单击事件 在这里插入图片描述 执行结果:点击按钮就会执行我们下面的 dj 方法 在这里插入图片描述 当然这里的 v-on:click 也可以写作 @click 也是一样的效果

补充: 这里 click 后面绑定的 方法如果不传参数 的话可以不加括号,就直接像上面那个例子那么写,如果要传参数的话,就需要加括号。

举个栗子: 在这里插入图片描述 执行结果:可以看出我们这里是有参数的 ,所以我们的上面需要写括号传参。 在这里插入图片描述 **

       Hoping the crowd screams out, screaming your name. Hope if everybody runs, you chose to stay.        ------------愿人群声嘶力竭,呼喊你名;愿众人慌不择路,你毅然留下。

**

     关注 校园君有话说 公众号 ,回复 web前端 免费领取50G 前端学习资料 一份 ,我们一起学习进步吧。 在这里插入图片描述

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。