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

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

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

… … …

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

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

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

遇见 vue.js --------阿文的vue.js学习笔记(2—1)----- 基本使用 [1]_第1张图片
代码如下:

<!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、双大括号表达式

举例:
遇见 vue.js --------阿文的vue.js学习笔记(2—1)----- 基本使用 [1]_第2张图片
执行结果:你可以看到我们的 p标签里面的{ {msg}}表示的是我们下面 data里面 msg 的数据
遇见 vue.js --------阿文的vue.js学习笔记(2—1)----- 基本使用 [1]_第3张图片
       这里的msg 是文本信息,但是如果我们的 msg 是超链接的话,这样写是无法完成执行的。
举个栗子: 你可以发现这样写的话它会将我们的超链接理解为文本,而不是一个超链接
遇见 vue.js --------阿文的vue.js学习笔记(2—1)----- 基本使用 [1]_第4张图片
这个时候就需要另一种写法了------v-html

2、v-html

举个栗子:
遇见 vue.js --------阿文的vue.js学习笔记(2—1)----- 基本使用 [1]_第5张图片
执行结果:你就可以看到这是一个超链接,并且是可以点击的
遇见 vue.js --------阿文的vue.js学习笔记(2—1)----- 基本使用 [1]_第6张图片

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>

执行结果:
遇见 vue.js --------阿文的vue.js学习笔记(2—1)----- 基本使用 [1]_第7张图片
补充: 当然很多时候 你也可以将前面的 v-bind 省略 只需要在src前面添加一个冒号也可以表示 强制绑定数据 ,即写作 :src=“”

4、v-on 绑定事件监听

可以理解为绑定某种方法(函数)
举个栗子:这里的点击按钮说 和我们下面的 dj 函数绑定,相当于一个鼠标的单击事件
遇见 vue.js --------阿文的vue.js学习笔记(2—1)----- 基本使用 [1]_第8张图片
执行结果:点击按钮就会执行我们下面的 dj 方法
遇见 vue.js --------阿文的vue.js学习笔记(2—1)----- 基本使用 [1]_第9张图片
当然这里的 v-on:click 也可以写作 @click 也是一样的效果

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

举个栗子:
遇见 vue.js --------阿文的vue.js学习笔记(2—1)----- 基本使用 [1]_第10张图片
执行结果:可以看出我们这里是有参数的 ,所以我们的上面需要写括号传参。
遇见 vue.js --------阿文的vue.js学习笔记(2—1)----- 基本使用 [1]_第11张图片
**

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

**

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

你可能感兴趣的:(vue)