遇见 vue.js --------阿文的vue.js学习笔记（2—1）----- 基本使用 [1]
遇见 vue.js --------阿文的vue.js学习笔记（2—1）----- 基本使用 [1]
**
新学习新征程，我们一起踏上学习 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 的简写 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 绑定事件监听
可以理解为绑定某种方法（函数） 
当然这里的 v-on:click 也可以写作 @click 也是一样的效果
补充： 这里 click 后面绑定的 方法如果不传参数 的话可以不加括号，就直接像上面那个例子那么写，如果要传参数的话，就需要加括号。
举个栗子： 执行结果：可以看出我们这里是有参数的 ，所以我们的上面需要写括号传参。 **
Hoping the crowd screams out, screaming your name. Hope if everybody runs, you chose to stay.
------------愿人群声嘶力竭，呼喊你名；愿众人慌不择路，你毅然留下。
**
关注 校园君有话说 公众号 ，回复 web前端 免费领取50G 前端学习资料 一份 ，我们一起学习进步吧。
