** 遇见 vue.js ——–阿文的vue.js学习笔记（1）—–初识vue.js … … … 遇见 vue.js ——–阿文的vue.js学习笔记(目录) 关注我，我们一起学习进步。 ** 知识点 ： （1） v-model ： 双向数据绑定 双向数据绑定的意思就是指我们vue 中的 data 数据将和我们绑定的 dom 元素的内容保持一致，当一方放生变化之后另一方也会发生变化 （2） {{xxxx}} ：显示的数据 将数据写在两个大括号内 。 （3）const vm = new vue ({ }) 很多时候我们写vue 实例的时候会写成这种格式。 （4）我们的vue.js 遵循 MVVM 模式 MVVM 是 Model-View-ViewModel 的简写 举例： 举个栗子： 我们插图片的时候， 执行结果： 可以理解为绑定某种方法（函数） 补充： 这里 click 后面绑定的 方法如果不传参数 的话可以不加括号，就直接像上面那个例子那么写，如果要传参数的话，就需要加括号。 举个栗子： Hoping the crowd screams out, screaming your name. Hope if everybody runs, you chose to stay. ** 关注 校园君有话说 公众号 ，回复 web前端 免费领取50G 前端学习资料 一份 ，我们一起学习进步吧。
新学习新征程，我们一起踏上学习 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>
M (model) : 模型，指数据对象 （data）
V （view）：视图，模板页面
VM (viewModel) ： 视图模型 （也就是vue 实例）1、双大括号表达式
执行结果：你可以看到我们的 p标签里面的{{msg}}表示的是我们下面 data里面 msg 的数据
这里的msg 是文本信息，但是如果我们的 msg 是超链接的话，这样写是无法完成执行的。
举个栗子： 你可以发现这样写的话它会将我们的超链接理解为文本，而不是一个超链接
这个时候就需要另一种写法了——v-html2、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:'https://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 也是一样的效果
执行结果：可以看出我们这里是有参数的 ，所以我们的上面需要写括号传参。
**
————愿人群声嘶力竭，呼喊你名；愿众人慌不择路，你毅然留下。
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算
官方软件产品操作指南 (170)
4292