Vue 快速入门

西利亚•海因里希

已于 2023-03-24 22:33:31 修改

阅读量108

点赞数

文章标签： vue.js javascript 前端

于 2023-03-24 20:33:26 首次发布

原文链接：https://www.bilibili.com/video/BV12J411m7MG/?p=14&spm_id_from=333.1007.top_right_bar_window_history.content.click&vd_source=398d47ef1a6b3deeb053667ddec0989e

版权

文章目录

1. 第一个 vue 程序
2. Vue 指令

1. 第一个 vue 程序

导入开发版本的vue.js
创建vue实例对象,设置el属性和data属性
使用简洁的模板语法把数据渲染到页面上

el:挂载点

Vue实例的作用范围？
Vue会管理el选项命中的元素及其子元素
可以使用其他选择器，但建议使用ID选择器
不能使用HTML和body标签

data数据对象

Vue中用到的数据定义在data中
data中可以写复杂的数据类型
渲染复杂的数据类型时，遵守js的语法即可

<body>
	<div id="app">
		{{message}}  //渲染的模板语法
	</div>
	<script>
		var app = new Vue({
			el:"#app",//挂载点
			data:{  //数据
				message:"Vue如何快速入门"
			}
		})
	</script>
</body>

2. Vue 指令

vue 指令：以v-开头的一组特殊语法

2.1 v-text

指令作用：设置标签的文本值。
默认写法会替换全部内容,使用差值表达式{{}}可以替换指令。
内容支持写表达式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
		<!--设置标签的文本值：可引入data中的数据-->
			<span v-text="message"></span>  		
		</div>
		<!-- 开发环境引入 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					message:"快速学习Vue"
				}
			})
		</script>
	</body>
</html>

2.2 v-html

指令作用：设置元素的 innerHTML
内容中含有HTML结构会被解析为文本

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<p v-text="message"></p>
			<p v-html="message"></p>
		</div>
		<!-- 开发环境引入 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					message:"<a href="https://cn.vuejs.org/">百度</a>"
				}
			})
		</script>
	</body>
</html>

v-text 与 v-html 的区别

v-text 指令无论什么内容是什么，都只会解析为文本
v-html 指令可解析HTML结构

2.3 v-on

v-on 作用：为元素绑定事件。
事件名不需要写 on。
指令可以简写为@。
绑定的方法定义在methods属性中。
方法内部通过this关键字可以访问定义在data中的数据。
传递自定义参数,事件修饰符。

<div id="app">
  <input type="button" @click="sub(p1,p2)">
<div/>
<script>
var app = new Vue({
  el:"#app",
  methods:{
    sub:function(p1,p2){},
  }
})
</script>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<button value="compute" v-on:click="sub">-</button>
			<span >{{num}}</span>
			<button value="compute" @click="add">+</button>
		</div>
		<!-- 开发环境引入 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					num:1
				},
				methods:{
					sub:function(){
						if(this.num>0){
							this.num--;
						}else{
							alert("不可以再减了");
						}
					},
					add:function(){
						this.num--;
					}
				}
			})
		</script>
	</body>
</html>

2.4 v-show

根据元素表达式的真假，切换元素的显示和隐藏。
原理：修改元素的display，实现显示隐藏。
指令后面的内容，最终都会解析为布尔值。
值为true显示元素,值为false元素隐藏。
数据改变之后，对于元素的显示状态会同步更新。

<body>
		<div id="app">
			<!-- 直接使用布尔值 -->
			<img src="地址" v-show="true">
			<!-- 在data中定义布尔值 -->
			<img src="地址" v-show="isShow"> 
			<!-- 使用表达式 -->
			<img src="地址" v-show="age>=18">
		</div>
		<!-- 开发环境引入 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					isShow:false,
					age:18
				},
			})
		</script>
	</body>

2.5 v-if

根据表达式的真假，切换元素的显示和隐藏（操纵DOM元素）。
表达式值为true,元素存在于DOM树中;为false时,从DOM树中移除。
频繁切换使用v-show，反之使用v-if

<body>
		<div id="app">
			<!-- 直接使用布尔值 -->
			<img src="地址" v-if="true">
			<!-- 在data中定义布尔值 -->
			<img src="地址" v-if="isShow"> 
			<!-- 使用表达式 -->
			<img src="地址" v-if="age>=18">
		</div>
		<!-- 开发环境引入 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					isShow:false,
					age:18
				},
			})
		</script>

2.6 v-bind

设置元素的属性(src、title、class)
格式：v-bind:属性名=表达式
可简写为:属性名
需要动态的增删class建议使用对象的方式

学习链接:https://www.bilibili.com/video/BV12J411m7MG/?p=14&spm_id_from=333.1007.top_right_bar_window_history.content.click&vd_source=398d47ef1a6b3deeb053667ddec0989e

2.7 v-for

v-for:根据数据生成列表结构
数组经常和v-for结合使用
语法是(item,index) in 数据
item 和 index 可以结合其他指令一起使用
数组长度的更新会同步到页面上，是响应式的

1.对数组使用 v-for

<!--不使用索引-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<ul>
				<li v-for="item in arr">一线城市之一:
					{{item}}
				</li>
			</ul>
		</div>
		<!-- 开发环境引入 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					arr:["北京","上海","广州","深圳"]
				},
			})
		</script>
	</body>
</html>

<!--使用索引-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<ul>
				<li v-for="(item,index) in arr">
					{{index+1}}线城市之一:{{item}}
				</li>
			</ul>
		</div>
		<!-- 开发环境引入 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					arr:["北京","上海","广州","深圳"]
				},
			})
		</script>
	</body>
</html>

2.对对象使用v-for

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<ul>
				<li v-for="(item,index) in arr">
					{{index+1}}线城市之一:{{item}}
				</li>
			</ul>
			<h1 v-for="temp in arr1">
				{{temp.name}}
			</h1>
		</div>
		<!-- 开发环境引入 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					arr:["北京","上海","广州","深圳"],
					arr1:[
						{name:"远景"},
					    {name:"火凤"}
					]
				}
			})
		</script>
	</body>
</html>

2.8 v-model

v-model:便捷的设置和获取表单元素的值
绑定的数据会和表单元素值相关联
绑定的数据<—>表单元素的值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!-- 表单和数据双向绑定 -->
			<input type="text" v-model="message" @keyup.enter="sayHi">
			<!-- 按下鼠标enter键后，弹出弹窗 -->
			<br>
			<hr>
			<!-- 检测是否完成双向绑定 -->
			{{message}}
		</div>
		<!-- 开发环境引入 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					message:"努力学习的一天"
				},
				methods:{
					sayHi:function(){
						alert("Bingo");
					}
				}
			})
		</script>
	</body>
</html>