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

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

遇见 vue.js --------阿文的vue.js学习笔记（1）-----初识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>