从零开始学Vue3——(一)入门

Me-Wow！

已于 2022-02-25 09:46:55 修改

阅读量8.5k

点赞数 17

分类专栏：前端学习文章标签： vue.js 前端 javascript 学习

于 2022-02-24 21:30:06 首次发布

本文链接：https://blog.csdn.net/TeAmo__/article/details/123119271

版权

前端学习专栏收录该内容

20 篇文章 15 订阅

订阅专栏

文章目录

前言

Vue作为国内使用率最高的框架，学习这门技术也越来越重要，这篇博客记录了本人学习Vue的过程以及学习笔记。本文学习版本为Vue3

一、Vue是什么？

vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。
特点：简单，高效，生态丰富（插件多）

二、Vue的安装与使用

方法1.直接引用script

<script src="https://unpkg.com/vue@next"></script>

方法2.安装脚手架

npm install -g @vue/cli

目前处于学习初步阶段，目前文中安利使用的都是直接引入的方式

三、创建应用实例

写第一个vue实例吧！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id="app">
			{{msg}}
		</div>

	</body>
	<script>
		const app = Vue.createApp({
			data() {
				return {
					msg: "Vue!Me-Wow!"
				}
			}
		});
		const vm = app.mount('#app')
		console.log(vm.msg); // Vue!Me-Wow!
	</script>
</html>

createApp 函数创建一个新的应用实例

mount 根据id将创建的应用实例与html模板相关联

其中 {{}} 为文本渲染语法，总结在下方

四、Vue模板语法

指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute。
联系html模板与JavaScript数据模型

文本渲染

v-text

与innertext相似，不会对内部标签进行编译，直接输出

v-html

与innerHtml相似，会按照html的规则渲染，不会作为Vue版本进行编译

如下方例子：

<!-- html部分 -->
<div id="app">
    <p v-text="msg"></p>
    <p v-html="msg"></p>
</div>

//js部分
const app = Vue.createApp({
    data() {
        return {
            msg: "Vue!<b>Me-Wow!</b>"
        }
    }
});
const vm = app.mount('#app')
console.log(vm.msg); //Vue!<b>Me-Wow!</b>

运行结果如下：

{{}}

{{}}在进行纯文本渲染时与v-text相似，特别的是{{}}可以运行单行js表达式。

<!-- html部分 -->
<div id="app">
    <p>1+2={{1+2}}</p>
    <p>{{msg}}</p>
    <p>{{msg.length}}</p>
    <p>{{msg.split("").reverse().join("")}}</p>
    <p>{{2>18?'大于':'小于'}}</p>
</div>

运行结果：

属性渲染

v-bind：attribute="值"

简写为 :属性名="值"

<!-- html部分 -->
<div id="app">
    <p v-bind:title="msg">hello world</p>
    <p :title="msg">hello Vue</p>
</div>

运行结果：

条件渲染

v-if

用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。

v-if-else

顾名思义，充当 v-if 的“else-if 块”，并且可以连续使用：

必须紧跟在带 v-if 或者 v-else-if 的元素之后，否则它将不会被识别

v-else

添加一个“else 块”：

必须紧跟在带 v-if 或者 v-else-if 的元素的后面，同v-if-else

<!-- html部分 -->
<div id="app">
    <p v-if="islog">欢迎回来！</p>
    <p v-else>请登录</p>
    <hr >
    <p v-if="score>=90">{{score}}优秀</p>
    <p v-else-if="score>=80">{{score}}良好</p>
    <p v-else-if="score>=70">{{score}}中等</p>
    <p v-else-if="score>=60">{{score}}及格</p>
    <p v-else>{{score}}不及格</p>
    <hr >
    <p v-show="show">Mewow</p>
</div>

//js部分
const app = Vue.createApp({
    data() {
        return {
            islog:false,
            score:100,
            show:true
        }
    }
});
const vm = app.mount('#app')

运行结果：

v-show

与v-if相似，可以控制元素的显示与隐藏；

不同点：v-if通过移除节点的方式隐藏，而v-show通过css属性进行隐藏与显示；

所以，当需要进行频繁切换隐藏或显示时，推荐用v-show，反之推荐使用v-if。

示例代码见v-if部分

列表渲染

遍历数组

v-for="(item,index) in list" :key="item.id"

item变量当前数据；index 当前下标

遍历对象

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

范围

v-for="item in 5"

key是给vue遍历的节点的一个唯一标识符，更好的让vue去做排序过滤等操作，为了性能的优化，要求在一个for指令里面key的值要唯一

v-for优先级高于v-if，同时使用时要借助<template>标签

    <!-- html部分 -->	
    <div id="app">
		<ul>
			<li v-for="item in list">{{item}}</li>
		</ul>
		<hr>
		<p v-for="(value,key) in obj">{{key}} ： {{value}}</p>
		<hr>
		<template v-for="i in 10">
			<p v-if="i%2===0">{{i}}</p>
		</template>
	</div>

		//js部分
		const app = Vue.createApp({
			data() {
				return {
					list: [1, 2, 3, 4],
					obj: {
						name: "Mewow",
						age: 18
					},
				}
			}
		});
		const vm = app.mount('#app')

运行结果：

v-on:事件="表达式"

缩写为：@事件="表达式"

添加一个事件监听器，通过它调用在实例methods中定义的方法。

绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。

eg：点击按钮按钮上的数字增加

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数字加1</title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id="app">
			<button type="button" @click="num++">{{num}}</button>
		</div>
	</body>
	<script type="text/javascript">
		Vue.createApp({
			data(){
				return{
					num:1
				}
			}
		}).mount("#app");
	</script>
</html>

运行结果：

总结

以上就是今天学习Vue的收获，对Vue语法有了初步的理解。明天继续！

点个赞吧👍

Me-Wow！

关注

17
点赞
踩
88

收藏

觉得还不错? 一键收藏
1
评论
从零开始学Vue3——(一)入门

文章目录前言一、Vue是什么？二、Vue的安装与使用方法1.直接引用script方法2.安装脚手架三、创建应用实例四、Vue模板语法文本渲染v-textv-html{{}}属性渲染v-bind：attribute="值"条件渲染v-ifv-if-elsev-elsev-show列表渲染遍历数组遍历对象范围v-on:事件="表达式"总结前言Vue作为国内使用率最高的框架，学习这门技术也越来越重要，这...
复制链接

扫一扫