前端最火Vue从新手村到老师傅(一)

最新推荐文章于 2024-03-04 02:02:03 发布

瓦坎达forever

最新推荐文章于 2024-03-04 02:02:03 发布

阅读量120

点赞数

分类专栏： Vue 文章标签： vue java vue.js node.js reactjs

本文链接：https://blog.csdn.net/cssnnd/article/details/108434186

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在这里插入图片描述

1.1vue.js下载

进入到vue.js的官方网站: https://cn.vuejs.org/

2.1 VueのHelloWorld

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="js/vue.js"></script>
	<script type="text/javascript">
	window.onload = function(){
		var app = new Vue({
			el:'#box', //指明数据展示在哪个view里面
			data:{    //data: 表示需要展示的数据
				msg:"helloworld"
			}
		});
	};
	</script>
</head>
<body>
	<!--Vue的入门程序:HelloWorld-->
	<div id="box">
		{{msg}}  <!--使用{{}}来获取Vue中data的数据 -->
	</div>
</body>
</html>

运行结果
在这里插入图片描述
生成了第一个vue的应用，现在数据的DOM已经绑定，所有的数据都可以被响应，上述代码中{{msg}}将会被vue的数据对象的msg属性值替换掉，而且msg的值改变的时候，文本中的值也会改变，我们可以通过v-once指令，执行一次性的插值，当数据改变时插值不再改变…

<!--Vue的入门程序:HelloWorld-->
	<div id="box">
		{{msg}}  <!--使用{{}}来获取Vue中data的数据 -->
		<p v-once>{{msg}}</p>
	</div>

2.2 表达式

{{}} 标签也接收表达式形式的值，表达式可以由JavaScript表达式或过滤器构成，过滤器可以没有，也可以多个

表达式是各种数值，变量，运算符的综合体，也可以是JavaScript的一些函数

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="js/vue.js"></script>
	<script type="text/javascript">
	window.onload = function(){
		var app = new Vue({
			el:'#box', //指明数据展示在哪个view里面
			data:{    //data: 表示需要展示的数据
				msg:"helloworld"
			}
		});
	};
	</script>
</head>
<body>
	<!--Vue的入门程序:HelloWorld-->
	<div id="box">
		1.{{msg}} </br> <!--使用{{}}来获取Vue中data的数据 -->
		2.{{msg.substring(0,2)}}</br>
		3.{{100/2}}</br>
		4.{{true?2:0}}</br>
	</div>
</body>
</html>

运行结果

在这里插入图片描述

2.3 Vue常见指令

Vue.js 指令带有前缀v-
以表示他们是Vue提供的特殊的属性，它推展了HTML标签的功能

1.v-model : 能轻松实现表单输入和应用状态之间的双向绑定，用在input，select，text，checkbox等表单元素

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="js/vue.js"></script>
	<script type="text/javascript">
	window.onload = function(){
		var app = new Vue({
			el:'#box', //指明数据展示在哪个view里面
			data:{    //data: 表示需要展示的数据
				msg:"helloworld"
			}
		});
	};
	</script>
</head>
<body>
	<!--v-model指令-->
	<div id="box">
		<input type="text" v-model='msg'>
		<hr/>
		{{msg}}
	</div>
</body>
</html>

运行结果
在这里插入图片描述
注意：使用v-model指令的标签也必须位于Vue控制的标签内部。

但是输入框的值改变时刻改变着Vue中的data值
于是Vue提供了一个修饰符

1.1.lazy - 取代 input 监听 change 事件

在默认情况下，v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：

即 :

<input type="text" v-model.lazy='msg'>
		<hr/>
		{{msg}}

运行结果

在这里插入图片描述
当输入框失去焦点时

如果不加.lazy时，你修改了文本框的值，对应的{{msg}}会同步变化，但是如果加了.lazy后，你在修改文本框的值时，{{msg}}的值不会同步变化，而是当该文本框失去焦点时，才会改变{{msg}}的值

1.2 .number 输入字符串转为数字

<input type="number" v-model.number='msg'>
		<hr/>
		{{msg}}

1.3 .trim 输入首尾空格过滤
在这里插入图片描述
2. v-if 指令条件渲染，可以根据表达式的值在DOM中生成或移除一个元素，如果v-if表达式是true，那么对应元素的一个克隆将被重新插入DOM中，否则从DOM移除

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="js/vue.js"></script>
	<script type="text/javascript">
	window.onload = function(){
		var app = new Vue({
			el:'#box', //指明数据展示在哪个view里面
			data:{    //data: 表示需要展示的数据
				msg:"     helloworld    ",
				num:3
			}
		});
	};
	</script>
</head>
<body>
	<!--v-model指令-->
	<div id="box">
		<input type="text" v-model.trim='msg'>
		<hr/>
		{{msg}}
		</hr>
		<p v-if="num==2">我等于2</p>
	</div>
</body>
</html>

运行结果 : 应该不能出现"我等于2"

在这里插入图片描述

将Vue中的num改为2后
运行结果 :
在这里插入图片描述
如果想切换多个元素，则可以使用<template>元素当作包装元素，在<template>元素中使用v-if，可以进行多个元素的切换

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="js/vue.js"></script>
	<script type="text/javascript">
	window.onload = function(){
		var app = new Vue({
			el:'#box', //指明数据展示在哪个view里面
			data:{    //data: 表示需要展示的数据
				msg:"     helloworld    ",
				num:2
			}
		});
	};
	</script>
</head>
<body>
	<!--v-model指令-->
	<div id="box">
		<input type="text" v-model.trim='msg'>
		<hr/>
		{{msg}}
		</hr>
		<p v-if="num==2">我等于2</p>
		
	<h2>----分割----</h2>
		
		<template v-if="num==2">
			<p>hello Vue</p>
			<hr>
			<p>我也来个我等于2</p>
		</template>
	</div>
</body>
</html>

运行结果 :
在这里插入图片描述
3. v-else指令 : 表示v-if的"else块"

4. v-else-if，充当v-if的"else-if块"

这里就不一一把运行结果演示了…

5.v-for : 指令可以绑定数组的数据来渲染的一个项目列表 : 也就是循环指令

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>v-for指令</title>
	<script type="text/javascript" src="js/vue.js"></script>
	<script type="text/javascript">
	window.onload = function(){
		var app = new Vue({
			el:'#box', //指明数据展示在哪个view里面
			data:{    //data: 表示需要展示的数据
				vforDemo:["vue1","vue2","vue3","vue4"]
			}
		});
	};
	</script>
</head>
<body>
	<!--v-model指令-->
	<div id="box">
		<ul>
			<li v-for="item in vforDemo">
				{{item}}
			</li>
		</ul>
	</div>
</body>
</html>

运行结果 :
在这里插入图片描述
如果想获取数组中的下标，()的顺序是 : 数组的元素，数组的下标

<div id="box">
		<ul>
			<li v-for="(value,index) in vforDemo">
				{{index}}==>{{value}}
			</li>
		</ul>
	</div>

运行结果 :
在这里插入图片描述
如果遍历的对象是json对象，()的顺序是 : json对象的属性值，对象的属性名，下标

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>v-for指令</title>
	<script type="text/javascript" src="js/vue.js"></script>
	<script type="text/javascript">
	window.onload = function(){
		var app = new Vue({
			el:'#box', //指明数据展示在哪个view里面
			data:{    //data: 表示需要展示的数据
				names:["lily","lucy","hanmeimei","lilei"],
				json:{a:"dog",b:"cat",c:"peg"}
			}
		});
	};
	</script>
</head>
<body>
	<!--v-model指令-->
	<div id="box">
		<ul>
            <!-- -注意:顺序: 第一个位置是value, 第二个是key,第三个是 index->
			<li v-for="(value,key,index) in json">
				{{value}} ==>{{key}} ==>{{index}} 
			</li>
		</ul>
	</div>
</body>
</html>

运行结果 :

在这里插入图片描述
6.v-show指令 : 根据表达式的值来显示或者隐藏HTML元素，当v-show表达式的值为false时，元素将被隐藏，查看DOM时，会发现元素上多了一个行内样式
style=“display : none”

7.v-text指令 : 更新元素的textContent，注意v-text对于内容是包含HTML标签的，不会进行HTML的解析，只作为普通字符串
在这里插入图片描述
运行结果 :

8.v-html : 数据解释为普通文本，而非HTML代码，为了输出真正的HTML，你需要v-html指令
在这里插入图片描述
运行结果 :

9. v-on : 用于绑定事件，事件类型由参数指定，表达式可以是一个方法的名字或者一个内联语句
可以用v-on指令监听DOM事件来出发一些JavaScript代码

注意 : v-on可以简写成@click
在这里插入图片描述
这里就是Vue的简单的数据绑定的标签了
接下来会解析Vue的数据交互…

在这里插入图片描述

瓦坎达forever

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端最火Vue从新手村到老师傅(一)

Vue是前端目前最火爆的框架，它提供了很重要的概念 : 组件，相比其他框架灵活性会高很多，博主前阵子跳槽跳到了一家公司，所做的项目就是前端用的Vue，就忐忑的心态赶紧学赶紧把vue捡起来，老工具人了
复制链接

扫一扫

专栏目录