vue的基础知识 ( 入门篇 )

最新推荐文章于 2024-06-12 08:41:10 发布
最新推荐文章于 2024-06-12 08:41:10 发布
阅读量404 收藏 1
点赞数 1
分类专栏： vue js 文章标签： vue js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52139094/article/details/116948434
版权
js 同时被 2 个专栏收录
5 篇文章 0 订阅
订阅专栏
vue
3 篇文章 0 订阅
订阅专栏

一.概述

什么是Vue?

VueJs是【数据驱动】的【渐进式】前端框架。

​ 渐进式：1、可以只是用部分功能，而不用全部实现

2、与第三方很好的兼容

VueJs的模型:MVVM模型具体指的是什么?

其实就是所谓的数据的双向绑定
数据驱动和组件化的前端开发
通过简单的API就能实现响应式的数据绑定和组合的视图组件

​ V view 视图 (页面)

​ VM controller 控制 (控制数据到页面的流程)
安装：
第一种.script直接引入
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
第二种.下载vue.js引入

二.入门

创建Vue对象
每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：

var vm = new Vue({
  // 选项
})

实例化vue对象

//全局
let vm =new Vue({
			el:""  //渲染开始的地方，挂载
			data:{
				myname:'lisi'  //变量，状态
			},
			methods{
				aa:function(){

				}
			}
		})
    <div id="box">
        {{name}}
    </div>
    <script src="./vue.min.js"></script>
    <script>
    //局部
        var Vue = new Vue({
            el:"#box",
            data:{
                name:"张三"
            }
        })
    </script>

三.vuejs的指令集

v-html: 可以解析html标签 innerHTML

v-text : 不能解析标签,如果里面有标签会按照文本格式直接输出 textContent

v-if : 如果为true，当前标签才会输出到页面

v-else : 如果为false，当前标签才会输出到页面

v-show : 通过控制display样式来控制显示/隐藏

v-on : 绑定事件监听 缩写 @click v-on:click 一样

v-bind : 强制绑定解析表达式， 修改属性 简写 : v-bind:title="‘哈哈’" :title="‘哈哈’"

v-for : 遍历数组/对象

v-model : 双向数据绑定

v-once : 只会渲染一次

ref : 指定唯一标识，vue对象通过$refs属性来访问这个元素对象

v-cloak : 解决闪现{{}}问题 与css配合 [v-cloak]{ display:none }
事件的修饰符:

Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或
event.stopPropagation()。
Vue.js通过由点(.)表示的指令后缀来调用修饰符。
.stop
.prevent
.capture
.self
.once

使用.prevent 来代替 event.preventDefault()

​ 使用 .stop 来代替event.stopPropagation();

​ 还可以使用@来代替 v-on:

按键修饰符:
Vue 允许为 v-on 在监听键盘事件时添加按键修饰符
全部的按键别名：
.enter
.tab
.delete (捕获 “删除” 和 “退格” 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta

在这里插入图片描述
v-if 和 v-show的区别
v-if 当值等true的时候创建节点,等false的时候销毁节点,切换销毁性能更多

v-show 创建的时候消耗更大,切换的时候反而小一些,直接修改css, 当值等false 修改css的style display:none让标签隐藏起来

	<body>
		<div id="app" >
			<span v-if="flag">淘宝</span><br />
			<span v-show="flag">天猫</span><br />
			<input type="button" @click="fun()" value="切换" />
		</div>
	</body>
	<!--Vue的初始化-->
	<script>
		new Vue({
			//挂载  相当于jquery的选择器$("#app")
			el:"#app",
			//数据
			data:{
				
				flag:false
			},
			//定义方法
			methods:{
				fun:function(){
					this.flag=!this.flag;
				}
			}
		});
	</script>

</html>

四.Vue的生命周期

在这里插入图片描述

韩子昕
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue-基础篇
weixin_45080950的博客
04-06 1021
Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
vue基础篇.pdf
05-09
vue基础知识，文章内部存在案例、分析以及js底层原理。深入解剖前端模块之间的原理，是读者更容易上手和编写，为后续自我提升帮助很大。让读者在轻松阅读中得到良好的提升
Vue基础知识总结 1：Vue入门
热门推荐
学Java，找哪吒
06-23 8万+
Vue基础教程系列，打造精品专栏。
Vue入门基础知识篇
你若安好的博客
12-11 919
1 、MVVM 思想 M：即 Model，模型，包括数据和一些基本操作 V：即 View，视图，页面渲染结果 VM：即 View-Model，模型与视图间的双向操作（无需开发人员干涉） 在 MVVM 之前，开发人员从后端获取需要的数据模型，然后要通过 DOM 操作 Model 渲染到 View 中。而后当用户操作视图，我们还需要通过 DOM 获取 View 中的数据，然后同步到Model 中。 而 MVVM 中的 VM 要做的事情就是把 DOM 操作完全封装起来，开发人员不用再关心 Model和 Vie
浅析Vue3基础知识(vue3笔记之入门篇)
qq_32453495的博客
06-04 1350
本文是结合实践中和学习技术文章总结出来的笔记(个人使用),如有雷同纯属正常((✿◠‿◠))时下Vue框架都是使用Vue3版本来开发项目了,为了加深对Vue3基本知识的了解,特写了这个笔记。
Vue基础知识总结 11：前端路由vue-router
学Java，找哪吒
10-13 4万+
当打包构建应用时，JavaScript包会变得非常大，影响页面加载。如果我们能吧不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
Vue学习-基础入门篇(三万字收藏篇)
林钟一的博客
07-27 6227
Vue是一套用于构建用户界面的 渐进式框架 。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。(1) Vue 的核心库只关注视图层。 (2) 不仅易于上手，还便于与第三方库或既有项目整合。 (3) 遵循 MVVM模式 ，能够实现视图与模型的 双向绑定。(4) 编码简洁，体积小，运行效率高，适合移动/PC端开发。Vite 是一个 web 开发构建工具，由于其原生 ES 模块导入方式，可以实现闪电般的 冷服务器启动。它做到了 本地快速开发启动, 在生产环境下基于 Rollup 打包。通过在终端中
Vue.js 快速入门实战
努力是为了站在万人之中，成为别人的光
06-12 2万+
通过这个简单的待办事项列表应用，我们学习了 Vue.js 的基本用法，包括数据绑定、事件处理和列表渲染。Vue.js 的设计使得它非常易于上手，并且能够与其他库或已有项目无缝整合。希望这篇文章能帮助你快速入门 Vue.js，并为你的前端开发之旅打下坚实的基础。接下来，你可以继续学习 Vue 的其他特性，例如组件、路由和状态管理等，以便在更复杂的项目中更好地使用 Vue.js。祝你学习愉快！
Vue 基础入门 - 看这一篇就够了！！！
niubiwhat的博客
09-05 5400
Vue 入门基础篇
vue的基础知识大全，一篇文章就够了！
qq_65010070的博客
09-22 5678
Vue的基础知识，持续整理中。。。
vue2.0实战之基础入门（1）
08-31
在本篇文章中，我们将详细介绍Vue 2.0的基础入门知识，包括Vue的定义、特点、数据双向绑定、ViewModel的概念模型、基本使用方法、构造器、指令、属性与方法等。 首先，让我们来了解什么是Vue？Vue是一个前端框架，...
前端开发Vue基础篇：Day02 Vue基础知识.pdf
11-11
Vue基础知识 本文主要介绍了 Vue 基础知识，包括模板语法的插值操作、v-for 指令的 key 属性、reduce 方法的使用和计算属性的使用。 一、模板语法的插值操作 在 Vue 中，我们可以使用模板语法来插值操作。常用的...
vue实战入门基础篇：从零开始仿门户网站实例
03-13
本教程“Vue实战入门基础篇：从零开始仿门户网站实例”旨在帮助初学者快速掌握Vue的核心概念，并通过实际项目演练提升技能。 在学习Vue时，首要的是理解其核心组件系统。Vue采用组件化开发模式，允许开发者将复杂...
vue2.0开发实践总结之入门篇
11-27
Vue 2.0 开发实践总结之入门篇 Vue.js 是一款轻量级的前端框架，因其简单易学、灵活性高而备受开发者喜爱。本文主要介绍基于 Vue 2.0 的开发实践，包括使用 Vue CLI 构建工具、Webpack 基础知识以及 Vue 项目的基本...
pi_heif-0.17.0-pp310-pypy310_pp73-macosx_12_0_x86_64.whl
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
mmexport1722080103662.jpg
07-27
mmexport1722080103662.jpg
matlab 20244a 6
07-27
matlab 20244a 6
pi_heif-0.17.0-cp310-cp310-macosx_12_0_x86_64.whl
最新发布
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
Vue.js快速入门：PDF版
在学习Vue.js之前，了解一些类似框架如AngularJS、KnockoutJS、Ractive.js和Rivets.js的基础知识会有所帮助，因为Vue.js的API设计受到了这些框架的影响。文档从安装开始，介绍了Vue.js的多种安装方式，包括独立版本...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值