vue基本使用方法（详细版）

最新推荐文章于 2024-08-19 13:55:31 发布
最新推荐文章于 2024-08-19 13:55:31 发布
阅读量8.2k 收藏 36
点赞数 5
分类专栏： vue 文章标签： vue javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xsvklftj/article/details/110205683
版权
本文详述了Vue.js的基本框架和语法，包括el和data的使用，{{}}插值表达式，v-text和v-html指令，v-on事件绑定及常见事件，v-show和v-if指令，v-bind的class和style绑定，v-for和v-model指令，以及计算属性和watch监听器。此外，还介绍了axios的使用方法和sessionStorage的数据存储与读取。
摘要由CSDN通过智能技术生成

声明：本人的所有博客皆为个人笔记，作为个人知识索引使用，因此在叙述上存在逻辑不通顺、跨度大等问题，希望理解。分享出来仅供大家学习翻阅，若有错误希望指出，感谢！

基本框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--vue挂载点-->
    <div id="app">
        <!--{
   {}}为插值表达式，是声明式渲染的语法，将vue对象的data中的数据动态渲染到此处-->
        {
  {message}}
    </div>
</body>
</html>
<script src="vue.js"></script>
<script src="one.js"></script>

//one.js
var app = new Vue({
   	//创建vue对象
    el: '#app',		//指定一个标签作为vue的挂载点（作用范围），使用css选择器选择
    data: {
   			//vue中使用的数据
        message: 'Hello Vue!!!!'
    }
})

el：挂载点

作用：指定vue对象的作用范围为某一标签及其内部的后代标签

  • 可以将vue挂载到除html和body外的任意双标签，建议挂载到div上
  • 允许使用任意CSS选择器，但建议只是用id选择器

data：数据对象

作用：存储vue对象使用的数据，作为声明式渲染的数据源

其中的数据可以是任意JavaScript数据类型，例如对象、数组等

var app = new Vue({
   
    el:'#app',
    data:{
   
    	message:"hello world",
    	list:[1,2,3,4,5],
        school:{
   
            name:"齐鲁工业大学"
            address:"长清区"
        }
	}
})
  • 在vue挂载点内使用{ {list[2]}}、{ {school.name}}来使用数据
  • 可以在js代码中使用vue对象名.属性名的方式访问data中的数据，如app.message，也可在methods中使用this.message访问数据

基本语法

{ {}}插值表达式

{ {}}插值表达式不仅可以将data数据直接插入到html中，还有以下用法：

<div id="app">
    {
  {num + 3}}				<!--数字计算-->
    {
  {message + "abc"}}		 <!--字符串拼接-->
    {
  {sayhi()}}				<!--方法调用，输出方法返回值-->
    {
  {message.split(' ').reverse().join(' ')}}		<!--执行JavaScript代码-->
</div>

var app = new Vue({
   
    el: '#app',
    data:{
   
        num:1,
        message:"hello world"
    },
    methods:{
   
        sayhi:function(){
   
            return "hello";
        }
    }
})

v-text指令

作用：设置标签的文本值

<!--将message中的数据写入div-->
<div v-text="message"></div>	message为vue对象的data数据

如果只需要设置部分文本值，应当使用{ {}}插值表达式，例如<p>123{ {message}}</p>，123不会被覆盖掉

v-text 和 { {}} 都支持字符串拼接，例如：

<div v-text="message+'123'"></div>
<div>{
  {message+"123"}}</div>
  • 二者作用相同

v-html指令

设置标签的innerHTML，用法与v-text相同，但是会将插入的内容解析为html代码

v-on指令

为元素绑定事件

<div id="app">
    <div v-on:事件名="方法"></div>
    <div @事件名="方法"></div>	<!--简写形式-->
    
    <div @事件名
最低0.47元/天 解锁文章
hizyk
关注
专栏目录
Vue的使用及运行
李桥桉的博客
06-13 1万+
选中要运行的文件，右键-->【在集成终端中打开】，在终端输入npm run serve 后回车，开发运行，注意vue文件千万不要试图用open with live server打开，此法根本打不开
Vue的使用
LINDYING的博客
03-01 2481
Vue的使用
一文速通 Vue 基础
最新发布
codechatter的博客
08-19 883
Vue 速通篇
VUE的使用
weixin_45665377的博客
06-27 2976
VUE是一个前端框架。是一个典型的MVVM模式的框架。MVVM：模型、视图、视图模型。通过修改视图模型对象，就可以达到修改视图的目的，同样的，如果用户操作了视图，视图模型中也就自动的收集了操作结果。此框架中Ajax操作部分相对功能较复杂，一般会使用独立的第三方的Ajax框架，例如axios。
Vue的用法
weixin_34209851的博客
11-28 131
一、介绍 1、Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。 Vue.js这两年火得...
VUE的基本使用。
qq_61576523的博客
04-06 8685
要想使用vue，你要先安装一个名字叫：Vscode这个软件，这个软件的安装，在这就不说了。在这里直接进行演示。 1，首先你要先创建一个文件夹， 把vue的jar包和jquery的jar包都放进去，然后再在里面创建一个文件，名字可以自定义，一开始创建好是一个空白，你输入！号后点击回车后会呈现出这个界面。 2.写导入jar包的代码。 我在这里有新建了一个文件夹js放，把这两个jar包都放到了js里面所以他的导入jar包的代码是这样的： <script src="js/vue.js" ty
vue使用echarts图表的详细方法
10-17
在本文中，我们将深入探讨如何在Vue项目中集成并使用Echarts图表库。Echarts是一款基于JavaScript的数据可视化库，它提供了丰富的图表类型，适用于各种数据可视化需求。在Vue中使用Echarts，可以使图表与Vue组件更好...
vue中使用高德地图-加载高德地图几种方法
03-12
- **Vue.js基本使用**：熟悉Vue的基本用法是必须的，包括但不限于数据绑定、指令、计算属性、条件渲染等内容。 - **组件化编程**：理解Vue中的组件化编程模式是非常重要的，包括如何创建组件、如何使用组件、如何...
在vue中使用setInterval的方法示例
10-17
知识点一：setInterval的基本使用 setInterval函数是JavaScript提供的一个全局函数，它可以用来设置一个定时器，按照指定的时间（以毫秒为单位）周期性地执行某些代码。在Vue项目中，setInterval可以用来实现定时...
vue组件化中slot的基本使用方法
12-29
slot可以在子组件中开启插槽，在父组件引用该组建时，可以定义这个插槽内要展现的功能或模块，下面话不多说了，来一起看看详细的介绍吧 1.单个slot 子组件中在相应位置写slot标签，父组件在引用子组件时，在子组件...
Vue的使用方法
qq_50896786的博客
08-07 4879
整个项目中node_modules占用项目的空间99%。因为前端项目也需要依赖一些插件:比如:axios elementui 那么我们可以使用npm下载并安装到当前项目。在子组件中使用（在components下创建Hello.vue子组件，与上边的组件路径一致）根据意思来理解就是说，template模板编译错误，组件模板需要一个根元素而不仅仅是个文本。此处使用别名hello 在子组件中props中定义该名称。npm install -- 安装项目需要的模块。--子组件调用-->//子组件的prop方法。.
谈谈key的唯一性特殊处理
Front小思的博客
06-17 969
通常： key 管理可复用的元素，key给每个vnode的唯一id，可以依靠key，更准确、更快拿到oldVnode中对应的vnode节点 。 当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。 这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。 为了给 Vue 一个提示，以便它
Vue的基本使用
weixin_44529746的博客
10-31 3180
社区资料：Vue：Vue.js专业中文社区 vue官方手册：API — Vue.js 一、vue的介绍 vue是一套构建用户界面的渐进式框架，Vue 只关注视图层， 采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件 vue是基于MVVM（M:model V:view VM:viewmodel）设计模式，支持数据的双向绑定(v-model) 补充： MVC设计模式： M model 数据层 V view 视图层 C control控制层
vue的使用
weixin_46104231的博客
12-07 1095
目录 简介 安装 目录结构 起步 模板语法 条件语句 循环语句 计算属性 监听属性 样式绑定 事件监听 表单 组件 组件自定义事件 自定义指令 简介 Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。 Vue 只关注视图层， 采用自底向上增量开发的设计。 Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 安装 npm install vue 安装脚手架工具（命令行工具） ..
Vue简单的使用
会写Bug的攻城狮
10-09 2461
Vue简单的使用 1、概念 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 在创建的vue中，初始化一个npm管理的项目npm init -y 在安装其他的包npm install vue 2、简单使用（单向绑定） <div i
Vue组件的使用
weixin_64770583的博客
07-16 4240
一：什么是Vue组件？干什么用的？ 二：组件的使用 1.非单文件组件 （1）定义：一个文件中包含有n个组件 （2）非单文件组件的使用步骤 （非单文件组件扩展知识点） 1.关于组件名: 2.关于组件标签 3.一个简写方式: 2.单文件组件 ：实际开发中大部分使用的都是单文件组件............
vue3异步组件的详细使用方法
03-30
Vue3中使用异步组件的方法与Vue2基本相同，但有一些细微的差别。下面是Vue3中异步组件的详细使用方法： 1. 定义异步组件： ```javascript const AsyncComponent = defineAsyncComponent(() => { // 异步加载组件的代码 return import('./AsyncComponent.vue') }) ``` 2. 在组件中使用异步组件： ```javascript <template> <div> <AsyncComponent /> </div> </template> <script> import { defineAsyncComponent } from 'vue' const AsyncComponent = defineAsyncComponent(() => { return import('./AsyncComponent.vue') }) export default { components: { AsyncComponent } } </script> ``` 3. 预加载异步组件： ```javascript const AsyncComponent = defineAsyncComponent(() => { return import('./AsyncComponent.vue') }, { // 预加载 loader: 'async', // 加载延迟时间 delay: 2000, // 加载超时时间 timeout: 10000, // 加载时显示的组件 loadingComponent: Loading, // 加载失败时显示的组件 errorComponent: ErrorComponent }) ``` 4. 使用异步组件的选项： ```javascript const AsyncComponent = defineAsyncComponent(() => { return import('./AsyncComponent.vue') }, { // 是否缓存组件 cache: true, // 是否允许组件失败后重试 retry: true, // 重试次数 retryCount: 3 }) ``` 5. 使用异步组件的事件： ```javascript const AsyncComponent = defineAsyncComponent(() => { return import('./AsyncComponent.vue') }) // 加载成功事件 AsyncComponent.onLoaded(() => { console.log('AsyncComponent loaded') }) // 加载失败事件 AsyncComponent.onError((error) => { console.error(error) }) ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值