标签：Vue createApp app 全网 Vue3 return data mount 极速

文章目录

• 前言
• 一、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 ,关注老石不迷路

标签：Vue,createApp,app,全网,Vue3,return,data,mount,极速
来源： https://blog.csdn.net/sobject/article/details/123120375

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。