Vue.js(2) 入门指南：从基础知识到核心功能

news2024/11/28 20:52:48

我相信一万小时定律，不相信天上掉馅饼的灵感和坐等的成就。做一个自由而自律的人，势必靠决心认真地活着

文章目录

        • 前言
        • vue是什么?
        • vue做什么?
        • vue的核心功能
        • 安装vue
        • vue初体验
        • vue配置选项
        • 插值表达式
        • 指令
        • vue阻止默认行为
        • 总结

前言

Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架。它专注于视图层，并且非常易于学习，可以快速集成到现有项目中。

vue是什么?
  • 库：jQuery是一个js库，只提供一些API给开发者
  • UI框架：bootstrap、layui、layer 是UI框架，包含js、html、css 只是实现了一套支撑网站开发的常用控件(对话框，弹出框，tab页签…)
  • JS框架：vue、react、angluar是js框架，纯js编写，提供了开发网站功能的标准(规则)，约定开发规则，通过这些规则组织代码功能
vue做什么?

Vue 主要用于开发单页面应用（SPA）。SPA 的特点是在首次加载时下载整个应用的代码，之后的所有交互都在客户端完成，无需重新加载页面，从而提供更流畅的用户体验

vue的核心功能
  • 数据驱动试图
    • 通过修改数据自动更新视图，减少了手动操作 DOM 的需求
  • 双向数据绑定
    • 数据和视图之间的同步更新，使得数据模型和视图保持一致
      • vue是一个典型的MVVM思想的框架
      • M是数据模型 model
      • V是视图(界面) view
      • VM是控制数据模型和视图的管理者
  • 组件化开发
    • 将应用拆分为多个独立的组件，每个组件都有自己的模板、数据和方法，提高了代码的复用性和可维护性
      请添加图片描述
安装vue
  • 基础方式：使用script标签引入
  • 本地方式：下载vue文件并引入
  • CDN 方式：<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script
  • 项目阶段：使用 npm 安装
vue初体验
<!-- V 2.视图 -->
<div id="app">
  <h3>{{msg}}</h3>
    <input v-model="msg" type="text">
</div>
<!-- 引入vue核心js文件 -->
<script src="./vue.js"></script>
<script>
  // VM 3.控制数据模型和视图管理者
  const vm = new Vue({
    el: '#app',
    // M 1.数据模型
    data: {
      msg: 'Hi vue'
    }
  })
</script>

请添加图片描述

vue配置选项
  • el选项
    • 作用：指定vue实例管理的dom元素
    • 类型：字符串(选择器)或dom元素
    <div id="app">
  <!-- 被管理的容器才可以使用vue提供的功能 -->
  {{msg}}
</div>
<script src="./vue.js"></script>
<script>
  // 初始化vue实例,vue实例就是vm的意思
  const vm = new Vue({
    // 初始化的配置对象,里面有很多选项
    // el === element 元素,标签,容器
    // 值是:选择器 || DOM元素
    // el指定当前vue实例管理的容器是谁
    // el:document.querySelector('#app'), // dom元素
    // el不能指定 html 和 body 容器 Do not mount Vue to <html> or <body> - mount to normal elements instead.
      el:'#app',  // 选择器
        data:{
            msg:'Hi vue'
        }
    })
</script>
  • data选项
    • 作用：定义vue实例的数据对象，这些数据是响应式的，即数据变化时，视图会自动更新
    • 类型：对象或函数 (在组件中通常使用函数)
    <div id="app">
<!-- 模板中直接使用数据的名称即可 -->
<h3>{{msg}}</h3>
<h6>{{user.name}}</h6>
</div>
<script src="./vue.js"></script>
<script>
// 在全局环境下，在浏览器的控制台直接访问vm，通过vm可以修改数据，演示数据驱动视图更新
// 在配置选项中声明的data数据，在vue初始化的时候，挂载在vue实例上的数据名称：$data，所以访问数据是：vm.$data
// 通过vm.$data.msg=要改的内容(例如:123) 即可修改数据，也看到了驱动视图更新
// 访问data中的数据，需要通过vm.$data才能访问到，略微有些麻烦
// 所以:vue实例代理了$data中的数据，直接通过vm就可以操作和访问数据 vm.msg = 123
const vm = new Vue({
  el: '#app',
  // data作用 :
  data: {
    msg: 'Hi vue',
    user: {
      name: ''
    }
  }
})
</script>
    总结
    • 通过实例化可以直接访问data中的数据vm.msg，在模板中使用数据的字段名称即可
    • 在data中显性声明的数据，都是响应式数据，可以数据驱动视图
    • 在模板中使用的数据，建议在data中提前声明，即使没有值也需要声明
  • methods选项
    • 定义vue实例的方法，这些方法可以在模板中调用，也可以在其他地方通过vue实例调用
    • 类型：对象，键是方法名，值是方法的实现
    <div id="app">
<h2>{{msg}}</h2>
<p>{{say()}}</p>
<p>{{say2()}}</p>
<p>{{say3()}}</p>
</div>
<script src="./vue.js"></script>
<script>
const vm = new Vue({
  el: '#app',
  data: {
    msg: 'Hi vue'
  },
  methods: {
    // vue实例可以调用这个函数 vm.say()
    // 在模板中也可以使用这个函数,直接使用函数名称调用即可 say(), 函数的返回值会输出在视图中
    // 在函数中的 this 就是vue实例,也就是vm,所以就可以访问数据

    // 写法1 : 传统写法
    say: function () {
      console.log('Hello呀')
      return '你好 ' + this.msg
    },
    // 写法2 : 属性简写
    say2() {
      return '你好2 ' + this.msg
    },
    // 写法3 : 箭头函数
    say3: () => {
      // 箭头函数没有this，也就是访问不到vue实例，操作不了数据
      // 建议：在methods中尽量不使用箭头函数，因为经常会使用vue实例
      return '你好3 ' + this.msg
    }
  }
})
</script>
插值表达式
  • 概念：在vue中{{}}语法，叫做插值表达式，就是输出值的语法
  • 插值表达式中可以写
    • data数据字段名称
    • methods函数的名称，进行调用
    • 任意js表达式 (加减运算，三元运算)
<div id="app">
  <!-- 使用数据 -->
  <p>{{msg}}</p>
  <!--使用函数  -->
  <p>{{fn()}}</p>
  <!-- 使用js表达式 -->
  <p>{{1+count}}</p>
  <p>{{count>10?'大':'小'}}</p>
  <!-- 不能使用js语句 -->
  <p>{{if(true){}}}</p>
  <p>{{var a = 10}}</p>
</div>
<script src="./vue.js"></script>
<script>
  const vm = new Vue({
    el: '#app',
    data: {
      msg: 'Hi vue',
      count: 9
    },
    methods: {
      fn() {
        return '函数的数据'
      }
    }
  })
</script>
指令

就是一个以v-开头的标签属性，他们可以扩展标签原有的功能，这些指令的值可以是js表达式，当关联js表达式依赖的数据发生变化，对应的指令就会产生作用

  • v-model指令：双向数据绑定
  • v-text、v-html指令：更新标签的内容
    • v-text：格式是文本，和innerText相似
    • v-html：格式是html，和innerHTML相似
    <div id="app">
  <h3>{{msg}}</h3>
  <!-- 当局部更新标签内的文本,使用插值表达式 -->
  <div>你好 : {{strText}}</div>
  <!-- 当完整更新标签内的文本,使用v-text,同时存在的时候v-text生效 -->
  <!-- 动态渲染文本内容 -->
  <div v-text="strText"></div>
  <!-- 动态渲染html内容 -->
  <div v-html="strText"></div>
</div>
<script src="./vue.js"></script>
<script>
  const vm = new Vue({
      el: '#app',
      data: {
          msg: 'Hi vue',
          strText: '<b>我是文本</b>'
      }
  })
</script>
  • v-show、v-if指令：控制元素的显示和隐藏
    • v-show：使用的是display:none | block |…
    • v-if：元素的创建和移除
    • 使用场景
      • v-show：性能较好，对应需要频繁切换显示与隐藏的功能，可以使用v-show
      • v-if：能减少标签，状态切换次数少的时候，使用v-if
    <div id="app">
<h3>{{msg}}</h3>
<!-- 指令 v-sho：值是布尔类型,如果是js表达式,就看js表达式的执行结果,是真还是假 -->
<!-- 如果是真显示 反之隐藏 -->
<div v-show="isShow">指令 v-show</div>
<!-- 指令 v-if：值是布尔类型,如果是js表达式,就看js表达式的执行结果,是真还是假 -->
<!-- 如果是真创建 反之移除 -->
<div v-if="isShow">指令 v-if</div>
</div>
<script src="./vue.js"></script>
<script>
const vm = new Vue({
  el: '#app',
  data: {
    msg: 'Hi vue',
    isShow: true
  }
})
</script>
  • v-on指令：绑定事件
    • 语法：v-on:事件名称= '触发事件的时候的处理逻辑(js表达式 | 函数实现)'
    • 简写： @事件名称= '触发事件的时候的处理逻辑(js表达式 | 函数实现)'
    <div id="app">
<h3>{{msg}}</h3>
<div v-if="isShow">我是div标签</div> <br />
<!-- 点击隐藏上面的div标签 -->
<!-- 1.指令绑定事件后指定:js表达式 -->
<button v-on:click="isShow=false">隐藏容器1</button>
<!-- 2.使用@可以简化v-on的使用 一样可以绑定事件 -->
<button @click="isShow=false">隐藏容器2</button>
<!-- 3.指令绑定事件后指定:函数 -->
<!-- 3.1如果处理函数不需要传参,那么带不带括号效果都一样 -->
<button @click="fn">隐藏容器3</button>
<button @click="fn()">隐藏容器4</button>
<!-- 3.2如果处理函数中需要事件对象 -->
<!-- 如果绑定事件的时候，函数不带括号，触发函数的时候默认传入事件对象 -->
<button @click="fn2">按钮1</button>
<!-- 如果绑定事件的时候，函数带了括号，需要自己传入事件对象，vue提供了一个$event的参数 -->
<button @click="fn2($event)">按钮2</button>
<!-- 3.3如果处理函数中需要事件对象以及其它传参... -->
<button @click="fn3($event,10)">按钮3</button>
</div>
<script src="./vue.js"></script>
<script>
const vm = new Vue({
  el: '#app',
  data: {
    msg: 'Hi vue',
    isShow: true
  },
  methods: {
    fn() {
      // 当需要处理复杂逻辑的时候，建议使用函数
      this.isShow = false
    },
    fn2(e) {
      console.log(e)
    },
    fn3(e, num) {
      console.log(e, num)
    }
  }
})
</script>
    总结：绑定函数的时候带不带括号
    • 如果需要接收事件触发的默认传参，不带括号
    • 如果需要自己来进行传参，需要带括号，自己传实参
    • 如果什么参数都不要，那么带不带都无所谓
  • v-for指令：遍历标签(容器)，需要依赖数据遍历
    • 数据类型：数组 v-for='(遍历时每项数据变量名称,索引变量名称) in data中数据(数组)'
    • 数据类型：对象 v-for='(属性值,属性名,索引) in data中数据(对象)'
    • 提升性能书写习惯：v-for='' :key='指定的唯一标识'
    <div id="app">
<h3>{{msg}}</h3>
<ul>
  <!-- 使用v-for让li根据data中的arr数据进行遍历 -->
  <!-- 1.v-for='遍历时每项数据变量名称 in  data中数据' -->
  <li v-for="item in arr" :key="item">{{item}}</li>
  <!-- 2.v-for='(遍历时每项数据变量名称,索引变量名称) in  data中数据(数组)' -->
  <li v-for="(item,i) in arr" :key="i">{{item}}---{{i}}</li>
  <!-- 3.v-for='(属性值,属性名,索引) in  data中数据(对象)' -->
  <li v-for="(v,k,i) in obj" :key="k">{{v}}---{{k}}---{{i}}</li>
</ul>
</div>
<script src="./vue.js"></script>
<script>
const vm = new Vue({
  el: '#app',
  data: {
    msg: 'Hi vue',
    arr: ['华晨宇', '钟南山', '邓紫棋'],
    obj: {
      name: '朴树',
      age: 40,
      sex: '男'
    }
  }
})
</script>
    • v--bind指令：动态绑定标签上的属性的值
      • 语法：v-bind:属性名= '属性值'
      • 简写：:属性名= '属性值'
      <div id="app">
  <h3>{{msg}}</h3>
  <button @click='fn()'>修改title属性值</button>
  <!-- 1.使用v-bind指令，完成修改属性的值 -->
  <div v-bind:title='title'>你还在么?</div>
  <!-- 2.简写方法 -->
  <div :title='title'>在啊</div>
</div>
<script src='./vue.js'></script>
<script>
  const vm = new Vue({
    el: '#app',
  data: {
    msg: 'Hi vue',
    title: '我是提示'
  },
  methods: {
     fn() {
        this.title = '修改提示'
      }
    }
  })
</script>
    注意：使用v-bind后属性值会解析成js表达式 | 数据，如果没有绑定只会解析普通字符串
vue阻止默认行为
  • @click.prevent 此时prevent叫做事件修饰符
总结

经过本次的学习，我们已经掌握了 Vue.js 的基本概念和核心功能。首先，我们了解到 Vue 是一种用于构建用户界面的 JavaScript 框架，它可以帮助我们更加高效地开发出响应式网页应用程序。其次，我们熟悉了 Vue 的安装过程以及初次体验 Vue 开发环境的方法。在此基础上，我们进一步探索了 Vue 的配置选项、指令、插值表达式等关键知识点，并学会了如何阻止默认行为。最后，通过对这些内容的综合运用，我们可以开始着手搭建自己的第一个 Vue 应用程序了！

希望这篇文章能够为你开启通往 Vue.js 大门的第一步，同时也期待你在未来的学习过程中不断进步，成为一名优秀的前端工程师！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2227446.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Spring 启动流程分析

Spring 启动流程分析

Spring 的设计 Bean: Spring作为一个IoC容器&#xff0c;最重要的当然是Bean咯 BeanFactory: 生产与管理Bean的工厂 BeanDefinition: Bean的定义&#xff0c;也就是我们方案中的Class&#xff0c;Spring对它进行了封装 BeanDefinitionRegistry: 类似于Bean与BeanFactory的关…
阅读更多...
智能名片小程序源码

智能名片小程序源码

智能名片小程序&#xff0c;是一款集在线介绍公司和个人名片、高效获取客户信息以及全面展示公司产品于一体的数字化工具。它通过数字化的方式&#xff0c;让名片信息的传递更加高效、便捷&#xff0c;极大地提升了商务交流的效率和效果。 在功能性方面&#xff0c;智能名片小…
阅读更多...
LabVIEW汽车状态监测系统

LabVIEW汽车状态监测系统

LabVIEW汽车状态监测系统通过模拟车辆运行状态&#xff0c;有效地辅助工程师进行故障预测和维护计划优化&#xff0c;从而提高汽车的可靠性和安全性。 项目背景&#xff1a; 现代汽车工业面临着日益增长的安全要求和客户对于车辆性能的高期望。汽车状态监测系统旨在实时监控汽…
阅读更多...
Golang的Web应用架构设计

Golang的Web应用架构设计

# Golang的Web应用架构设计 介绍 是一种快速、高效、可靠的编程语言&#xff0c;它在Web应用开发中越来越受欢迎。Golang的Web应用架构设计通常包括前端、后端和数据库三个部分。在本篇文章中&#xff0c;我们将详细介绍Golang的Web应用架构设计及其组成部分。 前端 在Golang的…
阅读更多...
SIP 业务举例之 三方通话：邀请第三方加入的信令流程

SIP 业务举例之 三方通话：邀请第三方加入的信令流程

目录 1. 3-Way Conference - Third Party Is Added 简介 2. RFC5359 的 3-Way Conference - Third Party Is Added 信令流程 3. 3-Way Conference - Third Party Is Added 总结 博主wx：yuanlai45_csdn 博主qq：2777137742 想要 深入学习 5GC IMS 等通信知识(加入 51学通信)…
阅读更多...
GNN+强化学习：双霸主强强联合，10种创新思路刷爆顶会！

GNN+强化学习：双霸主强强联合，10种创新思路刷爆顶会！

图神经网络&#xff08;GNN&#xff09;强化学习&#xff08;RL&#xff09;&#xff0c;融合了GNN在图数据表示上的深度学习能力和RL在决策过程中的策略优化能力。这种结合为处理具有复杂图结构的数据问题提供了强大的工具。 GNN与强化学习的结合不仅推动了图机器学习的研究进…
阅读更多...
R语言机器学习算法实战系列（十三）随机森林生存分析构建预后模型 (Random Survival Forest)

R语言机器学习算法实战系列（十三）随机森林生存分析构建预后模型 (Random Survival Forest)

禁止商业或二改转载，仅供自学使用，侵权必究，如需截取部分内容请后台联系作者! 文章目录 介绍教程加载R包案例数据数据预处理数据描述构建randomForestSRC模型评估模型C-indexBrier score特征重要性构建新的随机森林生存模型风险打分高低风险分组的生存分析时间依赖的ROC（Ti…
阅读更多...
Http 状态码 301 Permanent Rediret 302 Temporary Redirect、 重定向 重写

Http 状态码 301 Permanent Rediret 302 Temporary Redirect、 重定向 重写

HTTP状态码301和302是什么&#xff1f; 1、HTTP状态码301 HTTP状态码301表示永久性转移&#xff08;Permanent Redirect&#xff09;&#xff0c;这意味着请求的资源已经被分配了一个新的URI&#xff0c;以后的引用应该使用资源现在所指的URI。 HTTP 301状态码表示请求的资源…
阅读更多...
Segugio：一款针对恶意软件的进程执行跟踪与安全分析工具

Segugio：一款针对恶意软件的进程执行跟踪与安全分析工具

关于Segugio Segugio是一款功能强大的恶意软件安全分析工具&#xff0c;该工具允许我们轻松分析恶意软件执行的关键步骤&#xff0c;并对其进行跟踪分析和安全审计。 Segugio允许执行和跟踪恶意软件感染过程中的关键步骤&#xff0c;其中包括从点击第一阶段到提取恶意软件的最…
阅读更多...
CSS.导入方式

CSS.导入方式

1.内部样式 在head的style里面定义如 <style>p1{color: brown;}</style> 2.内联样式 直接在标签的里面定义如 <p2 style"color: blue;">这是用了内联样式&#xff0c;蓝色</p2><br> 3.外部样式表 在css文件夹里面构建一个css文件…
阅读更多...
Java Lock CyclicBarrier 总结

Java Lock CyclicBarrier 总结

前言 相关系列 《Java & Lock & 目录》&#xff08;持续更新&#xff09;《Java & Lock & CyclicBarrier & 源码》&#xff08;学习过程/多有漏误/仅作参考/不再更新&#xff09;《Java & Lock & CyclicBarrier & 总结》&#xff08;学习总结…
阅读更多...
【现代C++】常量求值

【现代C++】常量求值

现代C&#xff08;特别是C11及以后的版本&#xff09;增强了对编译时常量求值的支持&#xff0c;包括constexpr函数、constinit和consteval关键字。这些特性允许在编译时进行更多的计算&#xff0c;有助于优化运行时性能并确保编译时的数据不变性。 1. constexpr - 编译时常量…
阅读更多...
[含文档+PPT+源码等]精品基于PHP实现的培训机构信息管理系统的设计与实现

[含文档+PPT+源码等]精品基于PHP实现的培训机构信息管理系统的设计与实现

基于PHP实现的培训机构信息管理系统的设计与实现背景&#xff0c;可以从以下几个方面进行阐述&#xff1a; 一、社会发展与教育需求 随着经济的不断发展和人口数量的增加&#xff0c;教育培训行业迎来了前所未有的发展机遇。家长对子女教育的重视程度日益提高&#xff0c;课外…
阅读更多...
雷池社区版compose配置文件解析-mgt

雷池社区版compose配置文件解析-mgt

在现代网络安全中&#xff0c;选择合适的 Web 应用防火墙至关重要。雷池&#xff08;SafeLine&#xff09;社区版免费切好用。为网站提供全面的保护&#xff0c;帮助网站抵御各种网络攻击。 compose.yml 文件是 Docker Compose 的核心文件&#xff0c;用于定义和管理多个 Dock…
阅读更多...
LeetCode题（二分查找，C++实现）

LeetCode题（二分查找，C++实现）

LeetCode题&#xff08;二分查找&#xff0c;C实现&#xff09; 记录一下做题过程&#xff0c;肯定会有比我的更好的实现办法&#xff0c;这里只是一个参考&#xff0c;能帮到大家就再好不过了。 目录 LeetCode题&#xff08;二分查找&#xff0c;C实现&#xff09; 一、搜…
阅读更多...
Rust编程与项目实战-元组

Rust编程与项目实战-元组

【图书介绍】《Rust编程与项目实战》-CSDN博客 《Rust编程与项目实战》(朱文伟&#xff0c;李建英)【摘要 书评 试读】- 京东图书 (jd.com) Rust编程与项目实战_夏天又到了的博客-CSDN博客 8.2.1 元组的定义 元组是Rust的内置复合数据类型。Rust支持元组&#xff0c;而且元…
阅读更多...
腾讯云跨AZ部署FortigateHA备忘录

腾讯云跨AZ部署FortigateHA备忘录

随时保存配置 config system globalset admintimeout 480set alias "FortiGate-VM64-KVM"set gui-auto-upgrade-setup-warning disableset hostname "FG-Slave"set revision-backup-on-logout enableset revision-image-auto-backup enableset timezone &…
阅读更多...
Linux高手进阶

Linux高手进阶

查看系统资源占用&#xff1a; top&#xff1a;查看CPU、内存使用情况&#xff0c;类似 windows 的任务管理器 默认 5秒刷新一次语法&#xff1a; 直接输入 top按 q 或 ctrl c 退出内容详解&#xff1a; 第一行&#xff1a; top&#xff1a;命令名称 -系统时间up 23:57 min &…
阅读更多...
算法面试小抄

算法面试小抄

第一章:算法与数据结构要点速学 1.时间复杂度 (大 O) 首先&#xff0c;我们来谈谈常用操作的时间复杂度&#xff0c;按数据结构/算法划分。然后&#xff0c;我们将讨论给定输入大小的合理复杂性。 数组&#xff08;动态数组/列表&#xff09; 规定 n arr.length, 注意: &am…
阅读更多...
批处理操作的优化

批处理操作的优化

原来的代码 Override Transactional(rollbackFor Exception.class) public void batchAddQuestionsToBank(List<Long> questionIdList, Long questionBankId, User loginUser) {// 参数校验ThrowUtils.throwIf(CollUtil.isEmpty(questionIdList), ErrorCode.PARAMS_ERR…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023