Vue.js 指南：从安装到核心特性解析-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_62371223/article/details/125730743

vue的简介

vue作者尤雨溪
Vue ,react,angular+jQuery前端的框架
VUE构建用户渐进式javascript
特点 1，结合angular指令react的组件和虚拟dom
2，上手简单,api详细,生态插件丰富

vue安装

src引入

<script src ="xxx/vue.js">

npm 安装

npm i @vue/cli

vue实例化

new Vue({
el:“指定模板”,
data:{存放vue实例的数据}
})

Vue指令

v-开头特殊html属性
vue的指令连接了html模板与vue实例数据

指令的值是单个html

v-text=“5+8”
v-text=“msg.length”
v-text=“5>8?‘大于’:‘小于8’”
v-text=“msg.split(‘’).reverse().join(‘’)”

指令的参数:参数名 v-bind:title=“msg” v-bind:disabled=“!can”

文本渲染

{{}}
v-text=“指令的值”
v-html=“含html的文本”

	<div id="app">
			<h1>v-html</h1>
			<p>{{msg}}</p>
			<p v-text="msg"></p>
			<p v-html="msg"></p>
			 
		</div>
		<script>
		var vm = new Vue({
			el:"#app",
			data:{
				msg:"好好<strong>学习</strong>,天天向上",				 
			}
		})
		</script>

属性渲染指令

v-bind:title=“msg”
简写
:title=“msg”


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h1 v-bind:title="msg">前端-{{can}}</h1>
			
			<label>
				<!-- v-model表单指令 true表单选中,false表单不选中 -->
				<input type="checkbox" v-model="can">
			同意隐私条例
			</label> 
			<br>
			<!-- v-bind属性绑定  :disabled参数 -->
			<!-- 如果指令的值为真则按钮不可以用,值为假按钮可以单击 -->
			<button v-bind:disabled="!can">注册</button>
		 
		</div>
		<script>
		var vm = new Vue({
			el:"#app",
			data:{
				msg:"学好前端月薪过W",
				can:false,
			}
		})
		</script>
	</body>
</html>

条件渲染


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<p v-if="isLog">欢迎回来,我的主人</p>
			<p v-else>请登录后操作</p>
		</div>
		<script>
		new Vue({
			el:"#app",
			data:{isLog:true}
		})
		</script>
	</body>
</html>

v-if
表达式为真,节点显示
v-else-if
多重条件


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			 <h2>根据分数奖励令狐冲</h2>
			 <p v-if="score>=90">好徒儿,归元气动秘籍送给你</p>
			 <p v-else-if="score>=80">这不独孤九剑你试一试</p>
			 <p v-else-if="score>=70">我意将小师妹嫁给你</p>
			 <p v-else-if="score>=60">让你师母给你个烧饼</p>
			 <p v-else>孽障,去思过崖,面壁三个月！</p>
		</div>
		<script>
		new Vue({
			el:"#app",
			data:{score:50}
		})
		</script>
	</body>
</html>

v-else
其他
v-show
css方式显示与隐藏节点

v-show与v-if区别

它们的使用：频繁切换用v-show, 反之用v-if
它们的区别：v-show是css方式隐藏,v-if直接移除节点

v-for遍历

<div v-for="(item,index) in list" :key="index">
//item 和index 自定义的名称
//list 和data中list 对应
//in 固定写法
//:key 优化vue列表渲染,值是唯一,vue对列表更新,排序,筛选更加优化

对象遍历

//对象遍历
<div v-for="(v,k) in obj" :key="k">
//v属性值
//k属性名
//2.数字遍历
<div v-for="n in 10">
//3.字符串变量
<div v-for="s in str">