文章目录

• 前言
• 一、Vue3 安装
• • 1.独立版本
• 二、实例化
• • 1.模版
  • 2.创建
  • 3.挂载
• 三、内置指令
• • 1.什么是内置指令
  • 2.文本渲染
  • • (1).v-text
    • （2）.{{}}
    • （3）.v-html
  • 3.属性渲染
  • 条件渲染
  • 列表渲染
  • 遍历对象
  • v-for与v-if
  • 案例分享
  • • 简单步进器
    • 选项卡

---

前言

Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。 Vue 只关注视图层， 采用自底向上增量开发的设计。 Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 Vue 学习起来非常简单，本教程基于 Vue 3.0.5 版本测试。

---

阅读本教程前，您需要了解的知识

• HTML
• CSS
• JavaScript
  本教程主要介绍了 Vue3.x 版本的使用
  提示：以下是本篇文章正文内容，下面案例可供参考

一、Vue3 安装

1.独立版本

我们可以在 Vue.js 的官网上直接下载最新版本, 并用sceipt标签引入

下载Vue.js.

引入Vue.js

代码如下（示例）：

<script src="./js/vue.js" type="text/javascript" charset="utf-8"></script>

二、实例化

刚开始学习 Vue，我们不推荐使用 vue-cli 命令行工具来创建项目，更简单的方式是直接在页面引入 vue.global.js
文件来测试学习。

Vue3 中的应用是通过使用 createApp 函数来创建的，语法格式如下

1.模版

把app里面的内容称为模版

代码如下（示例）：

<div id="app">
</div>

2.创建

创建app

代码如下（示例）：

	const app=Vue.createApp({
		data(){
			return{}
			}
	})

3.挂载

代码如下（示例）：

app.mount("#app")

完整的模版指令

HTML5代码如下（示例）：

<div id="app">
	<p v-text="msg"></p>
</div>

JS代码如下（示例）：

	
		<script type="text/javascript">
		const app=Vue.createApp({
				data(){
					return{
						msg:"刘索隆"
					}
				}
			})
			app.mount("#app")
			
			

三、内置指令

1.什么是内置指令

指令 是带有 v- 前缀的特殊 attribute。指令 的属性值预期是单个 JavaScript 表达式。
通俗点说就是联系html模版与javasceip数据类型。

Vue 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
Vue 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上

代码如下（示例）：

	<p v-html="rawHtml">使用 v-html 指令 </span></p>
    <p>使用双大括号的文本插值: {{ rawHtml }}</p>
    

2.文本渲染

v-text ，{{}}，v-html

(1).v-text

v-text 标签的内容将会被替代为对应组件实例中 msg 属性的值，如果 msg 属性的值发生了改变，标签内容也会更新。

	<div id="add">
		<p v-html="msg">使用 v-text 指令</p>
	</div>
		<script type="text/javascript">
			Vue.createApp({
				data(){
					return{
						msg:"刘索隆"
					}
				}
			}).mount("#app")
			</script>

（2）.{{}}

{{}}语法是v-text指令的另一种书写方式 ，直接写在标签内

<div id="add">
		<p v-html="msg">使用 v-html 指令 </span></p>
    	<p>使用双大括号的文本插值: {{ msg }}</p>
	</div>
		<script type="text/javascript">
			Vue.createApp({
				data(){
					return{
						msg:"刘索隆"
					}
				}
			}).mount("#app")
			</script>

（3）.v-html

使用 v-html 指令用于输出 html 代码

<div id="app">
	<p v-html="msg"></p>
</div>
		
		<script type="text/javascript">
			Vue.createApp({
				data(){
					return{
						msg:"<span style="color: red">这里会显示红色！</span>"
					}
				}
			}).mount("#app")
</script>

3.属性渲染

语法

v-bind：属性名=“值”
也可以省略v-bind直接写：属性名=“值”

		<div id="app">
			<p v-bind:title="msg">王冰冰喜欢我</p>
			<p :title="msg">王冰冰喜欢我</p>
			<button :disabled="!canUse">按钮</button>
			
		</div>
		<script type="text/javascript">
			Vue.createApp({
				data(){
					return{
						msg:"是的，是真的",
						canUse:false
					}
				}
			}).mount("#app")
		</script>

条件渲染

条件指令

v-if ,v-else,v-lese-if

v-if指令

		<div id="app">
			<p v-if="isLog">我是p标签</p>
		
		</div>
		<script type="text/javascript">
			
			Vue.createApp({
				data(){
				//设置if判断为false 此时p标签内容不会显示
					return {isLog:false}
				}
			}).mount("#app")
		</script>

v-else

v-else一般紧挨v-if指令下方 两个标签中间尽量不要写别的内容

		<div id="app">
			<p v-if="isLog">请操作</p>
			<p v-else>请登陆后操作</p>
			
		</div>
		<script type="text/javascript">
			
			Vue.createApp({
				data(){
					//设置if判断为false 此时v-if指令的标签内容不会显示
					return {isLog:false}
				}
			}).mount("#app")
		</script>

v-eles-if

多重条件渲染

<div id="app">
			<p v-if="score>=90">优秀</p>
			<p v-else-if="score>=80">良好</p>
			<p v-else-if="score>=70">及格</p>
			<p v-else>不及格</p>
		</div>
		<script type="text/javascript">
			Vue.createApp({
				data(){
				//只显示符合要求的内容
					return{score:99}
				}
			}).mount("#app")
		</script>

v-show

v-show隐藏当前内容

	<div id="app">
			<p v-show="can">我会显示show</p>
		</div>
		<script type="text/javascript">
			Vue.createApp({
				data(){
					return {can:false}
				}
			}).mount("#app")
		</script>

v-if与v-show的区别

• v-show是通过css方法隐藏节点的d
• v-if是直接移除节点方式隐藏
• 如果频繁的显示与隐藏 v-show
• 如果偶尔切换显现隐藏 用v-if

列表渲染

v-for指令

循环使用 v-for 指令。
v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。
v-for 可以绑定数据到数组来渲染一个列表：

• item 变量的当前数据
• index 当前的下标

<div id="app">
			<ul>
				<!-- key属性为了让vue内部给遍历的节点给一个唯一的标识 以便更好的请排序过滤等操作 为了优化性能 key的要唯一 -->
				<li v-for="(item,index) in list" :key="item">{{item}}-{{index+1}}</li>
			</ul>
		</div>
		<script type="text/javascript">
			Vue.createApp({
				data(){
					return {list:["Vue","css","html"]}
				}
			}).mount("#app")
		</script>

遍历对象

语法

v-for="(value,key) in obj"

	 	<div id="app">
			<div v-for="(value,key) in obj" :key="key">{{key}},{{value}}</div>
		</div>
		<script type="text/javascript">
			Vue.createApp({
				data(){
					return{obj:{title:"vue3入门",author:"索隆",pdate:"2022-2-24"}}
				}
			}).mount("#app")
		</script>

v-for与v-if

v-for与v-if用template

		<div id="app">
			<template v-for="item in 10">
				<p v-if="item%2===0">{{item}}</p>
			</template>
		</div>
		<script type="text/javascript">
			
			Vue.createApp({
				data(){
					return{}
				}
			}).mount("#app")
		</script>

案例分享

简单步进器

	<div id="app">
			<p>
				<button @click="add(-1)">-</button>
				<span>{{num}}</span>
				<button @click="add(1)">+</button>
			</p>
		</div>
		<script type="text/javascript">
			Vue.createApp({
				data(){
					return{num:1}
				},
				methods:{
					add(n){
						this.num+=n
					}
				}
			}).mount("#app")
		</script>

选项卡

	<style type="text/css">
		.bg{
			color: aqua;
			background-color: black;
		}
		
	</style>
	
	</head>
	<body>
		<div id="app">
			<p>
				<button  @click="num=1"   :class="num===1?'bg':''">html</button>
				<button  @click="num=2" :class="num===2?'bg':''">css</button>
				<button  @click="num=3" :class="num===3?'bg':''">js</button>	
			</p>	
			<div v-if="num===1">html内容</div>
			<div v-if="num===2">css内容</div>
			<div v-if="num===3">js内容</div>	
		</div>
		<script type="text/javascript">
			Vue.createApp({
				data(){
					return{num:1}
				}
			}).mount("#app")
		</script>
	</body>

---

• 创作不易，深夜肝文，如果对大家有帮助，还请大家支持一波~
• 点赞，关注，收藏走一波，感激不尽！
• 要想学好Vue ,关注老石不迷路