一篇文章带你了解网页框架——Vue简单入门

于 2022-10-18 08:34:47 发布
阅读量2.7k 收藏 15
点赞数 3
文章标签： 前端 javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47367099/article/details/127380774
版权
本文详细介绍了前端框架Vue的基础知识，包括Vue的核心特性、VsCode插件Live Server的推荐、EL挂载点和Data数据对象的使用。进一步讲解了Vue本地应用中的指令如v-text、v-if、v-model等，并通过计算器、图片切换和记事本案例加深理解。最后，探讨了Vue与网络应用的结合，使用Axios进行前后端交互，并以天气预报案例为实践。
摘要由CSDN通过智能技术生成

这篇文章将会介绍我们前端入门级别的框架——Vue的简单使用

如果你以后想从事后端程序员，又想要稍微了解前端框架知识，那么这篇文章或许可以给你带来帮助

温馨提醒：在学习该文章前，请先学习HTML，CSS，JavaScript，Ajax等前端知识

Vue基础

首先，我们从官方文档中可以得到下述描述：

  • Vue是一套用于构建用户界面的渐进式框架。
  • Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
  • 另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

其中我们需要格外注意的是：

  • Vue只负责前端页面的设计，并不能完全实现前端的所有功能

Vue主要特点：

  • 采用JavaScript框架

  • 简化Dom操作

  • 响应式数据驱动

VsCode插件推荐

在正式开始介绍Vue之前，我想向大家安利一个VsCode插件——Live Server

Live Server 插件可以同步代码和网页的更新：

  • 当你保存代码时，你的页面将会同步进行刷新，省略了手动点击页面的步骤，在开发中提供便利

Vue代码框架

首先我们需要学会Vue的基本使用

  1. 导入相关包
<!--Vue为我们提供了两个版本，我们通常采用开发环境版本，具有检错功能便于学习-->

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
  1. 基本框架使用
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Vue基础</title>
</head>

<body>
    
   <!--首先我们创建一个div，并绑定id为app--> 
  <div id="app">
      <!--我们采用{
  {}}来调用相关Vue中的data中存放的数据-->
    {
  { message }}
  </div>
    
  <!-- 导入vue：开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    
    <!--书写js代码-->
  <script>
      <!-- 以下为vue基本框架 new Vue({el,data,method})-->
    var app = new Vue({
        <!--el实现挂载点-->
      el:"#app",
        <!--data存放相关数据-->
      data:{
          <!--数据属性-->
        message:" 你好 小黑! "
      }
    })
  </script>
</body>

</html>

EL挂载点介绍

学习过Vue的基本使用后，我们先对EL挂载点做出最基本的介绍：

  • EL挂载点负责设置页面中属性与Vue属性的连接
  • EL挂载点设置后，页面属性可以调用Vue中的数据（data）和方法（method）

EL挂载点注意点：

  • Vue的作用范围在EL挂载点的本体元素以及后代元素中
  • Vue的EL挂载点可以依赖于各种选择器，例如类选择器等，但推荐使用ID选择器
  • Vue的EL挂载点不可以作用在HTML和BODY两个页面最大元素上

我们给出简单示例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>el:挂载点</title>
</head>

<body id="body">
    <!--这里的{
  { message }}不会有所显示，因为未与Vue连接--> 
  {
  { message }}
  <h2 id="app" class="app">
      <!-- 这里的{
  { message }}会显示，因为属于Vue连接本体--> 
    {
  { message }}
      <!-- 这里的{
  { message }}会显示，因为属于Vue连接后代元素-->
    <span> {
  { message }} </span>
  </h2>
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var app = new Vue({
      // 以下均可使用，
      // el:"#app",
      // el:".app",
      // el:"div",
        
      // body无法连接
      el:"#body",
      data:{
        message:"秋落"
      }
    })
  </script>
</body>

</html>

Data数据对象介绍

学习过Vue的基本使用后，我们对Data做出最基本的介绍：

  • Data用于存储页面元素中使用的各类属性
  • 属性可以包括各种类型，例如文本，数组等复杂类型
  • 渲染复杂类型数据时，遵循JavaScript的语法基本都可以使用

我们给出简单示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>data:数据对象</title>
</head>

<body>
    <div id="app">
        <!--使用{
  {}}调用data数据-->
        {
  { message }}
        <!--对象采用.来调用内部元素-->
        <h2> {
  { school.name }} {
  { school.mobile }}</h2>
        <ul>
            <!--数组采用[index]来选择内部元素-->
            <li>{
  { campus[0] }}</li>
            <li>{
  { campus[3] }}</li>
        </ul>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"你好!",
                school:{
                    name:"河南师范大学",
                    mobile:"0373-3325000"
                },
                campus:["东校区","西校区","新乡校区","平原湖校区"]
            }
        })
    </script>
</body>

</html>

Vue本地应用

在介绍了Vue的基本使用后，我们针对Vue内部的各种属性方法来做出一一介绍

每条属性或方法我们都会给出解释和相关案例

v-text

文本解释：

v-text：设置标签的文本值

代码解释：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-text指令</title>
</head>

<body>
    <div id="app">
        <!--我们采用v-text来设置标签内文本，注意会覆盖掉内部文本，“深圳”将不再显示-->
        <h2 v-text="message+'!'">深圳</h2>
        <h2 v-text="info+'!'">深圳</h2>
        <!--另一种文本书写方式{
  {}}-->
        <h2>{
  { message +'!'}}深圳</h2>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"河南师范大学",
                info:"软件学院"
            }
        })
    </script>
</body>

</html>

v-html

文本解释：

v-html：以html的格式来设置标签的文本值

代码解释：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-html指令</title>
</head>

<body>
    <!--v-html:设置元素的innerHTML-->
    
    <!--采用v-html后显示的是河南师范大学的加粗版，但采用v-text后显示的是<strong>河南师范大学</strong>-->
    <div id="app" v-html="context">
    	
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                content:"<strong>河南师范大学</strong>"
            }
        })
    </script>
</body>

</html>

v-on

文本解释：

v-on：为元素绑定事件，可以采用@代替

代码解释：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-on</title>
</head>
<body>
    <div id="app">
        <!--v-on：后面跟事件名 用于绑定事件 可以用@代替 后面用methods中的方法即可-->
        <input type="button" value="点击" v-on:click="doIt">
        <input type="button" value="点击" @click="doIt">
    </div>
    

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            methods:{
                doIt:function(){
                    alert("河南师范大学");
                }
            }
        })
    </script>
</body>
</html>

v-show

文本解释：

v-show：根据表达值的真假，切换元素的显示和隐藏（隐藏后源代码仍存在）

代码解释：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=
最低0.47元/天 解锁文章
「已注销」
关注
  • 3
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值