Vue基础（二）

于 2024-08-12 16:45:34 发布
阅读量505 收藏 8
点赞数 7
分类专栏： VUE3 文章标签： vue 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hh_xi/article/details/140991474
版权

一、单页面应用程序

单页面应用程序（SPA）：web网站中只有唯一的一个HTML页面

 特点：

  • 仅在该web页面初始化时加载相应的资源
  • 页面一旦加载完成，不会因用户操作进行页面的重新加载或跳转，而是利用JS动态变换html内容，实现页面与用户的交互。

 优点：

   1、良好的交互体验

  • 内容改变不需重新加载整个页面
  • 获取数据通过ajax异步获取
  • 没有页面之间的跳转，不会出现白屏现象

   2、良好的前后端工作分离模式

  • 后端专注提供API接口，更易实现API接口复用
  • 前端专注页面渲染，更利于前端工程化的发展

   3、减轻服务器的渲染压力

缺点：

   1、首屏加载慢

         解决方式：路由懒加载、代码压缩、CDN加速、网络传输压缩

   2、不利于SEO

         解决方式：SSR方式渲染

创建SPA项目的方式：

   1、基于vite创建SPA项目

  • 仅支持vue3
  • 不基于webpack
  • 运行速度快

   2、基于vue-cli创建SPA项目

  • 支持vue2、vue3
  • 基于webpack
  • 运行速度较慢
  • 适合在企业级开发中使用

二、vue-cli的基本使用

步骤：

   1、全局安装(仅需安装一次)

yarn global add @vue/cli

   2、查看vue版本，确认是否安装成功

vue --version

   3、创建项目架子

vue create project-name(项目名 不能用中文)

   4、启动项目

npm run serve

三、vite的基本使用

步骤：

   1、创建项目

npm init vite-project(项目名称)

   2、下载依赖

npm install

  3、启动项目

npm run dev

vite项目的运行流程

通过mian.js把App.vue渲染到index.html的指定区域中

  • APP.vue用来编写待渲染的模版结构,所有要渲染的结构用template标签包裹
  • index.html中要预留一个el区域
  • mian.js把App.vue渲染到index.html的预留区域中

 示例：

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue</title>
  </head>
  <body>
    <!-- 预留id为app的el区域 -->
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

 app.vue

<template>
  <!-- 待渲染的模板结构 -->
  <h1>这是<i>APP.vue</i>文件</h1>
</template>

main.js

// 按需导入createAPP函数
import { createApp } from "vue";
// 导入带渲染的App.vue组件
import App from "./App.vue";

// 调用createAPP函数，创建SPA应用实例
// 将APP作为参数传给createApp函数，表示要把APP渲染到index.html页面上
const app = createApp(App);

// 调用mount方法把APP组件的模板结构渲染到指定的el中
app.mount("#app");

四、组件

组件化开发：根据封装的思想，把页面上可重用的部分封装成组件

vue规定组件的后缀名是.vue

 组件封装原则：

  • 组件的DOM结构、Style样式要尽量复用
  • 组件中要展示的数据，尽量由组件的使用者提供

1、vue组件的构成

每个.vue组件都由3部分构成

  • template(组件的模板结构)(必须包含)
  • script(JS)
  • style(样式)

template节点

每个组件对应的模板结构，都需要定义到<template>节点中

<template>
  <!-- 当前组件的DOM结构 -->
</template>

注：

  • <template>为容器标签，只有包裹性质的作用，不会被渲染为真正的DOM元素
  • template节点中允许使用指令
  • vue2版本template内仅支持一个根节点，vue3版本template允许多个根节点

script节点

 script节点中可封装组件的js业务逻辑

<script>
export default {
  // name属性可指定当前组件的名称
  name: "MyAPP",
  // data属性可指定vue组件渲染期间需要用到的数据
  data() {
    return {
      username: "zs",
    };
  },
  //methods属性声明事件处理函数
  methods: {
    addCount() {
      this.count++;
    },
  },
};
</script>

style节点

 script节点中可编写样式代码

<style lang="css">
h1 {
  color: red;
}
</style>

注：

  • lang默认值为css 还有less和scss
  • 设置lang='less'需要运行 npm install less -D

 2、组件的基本使用

组件的引用原则：先注册后使用

注册组件的两种方式：全局注册和局部注册

 全局注册

被全局注册的组件，可以在全局任何一个组件内使用

开发期间使用频率很高，进行全局注册

步骤：

  1. 在main.js中  import 需要被全局注册的组件 from ' '
  2. 调用app.component('组件名称'(短横线或大驼峰),'需要被全局注册的组件')
  3. 直接已标签的形式进行使用

 示例：

 main.js

import { createApp } from "vue";
import App from "./App.vue";

//1.导入需要被全局注册的组件
import Swiper from "./components/Swiper.vue";

const app = createApp(App);

//2.调用app.component()方法全局注册组件
app.component("my-swiper", Swiper);

app.mount("#app");

 App.vue 或其他任何一个组件内

<template>
  <!-- 3.直接已标签的形式进行使用 -->
  <my-swiper></my-swiper>
</template>

局部注册

 被局部注册的组件，只能在当前注册的范围内使用

开发过程中，只有特定情况下会用到，进行局部注册

步骤：

  1. 导入需要被注册的组件
  2. 通过component节点 ，为当前组件注册私有子组件

示例：

App.vue 或其他需注册局部组件的组件内

<template>
  <!-- 3.在页面中使用局部组件 -->
  <my-search></my-search>
</template>
<script>
// 1.导入需要被注册的组件
import Search from "./components/Search.vue";

export default {
  name: "MyAPP",
  data() {
    return {
      username: "zs",
    };
  },
  methods: {
  
  },
// 2.通过component节点 ，为当前组件注册私有子组件
  components: {
    "my-search": Search,
  },
};
</script>

3、组件之间的样式冲突问题

样式冲突原因：

所有组件的DOM结构都是基于唯一的index.html呈现的

每个组件中的样式都会影响整个index.html页面中的DOM元素

解决方法：

  • 分配自定义属性
  • 利用style节点的scoped属性

注：

加上scoped后，如果想让某些样式对子组件生效，可使用deep样式穿透

1、分配自定义属性

为每个组件分配唯一的自定义属性，编写样式时通过属性选择器来控制样式作用域

<template>
  <div class="container" data-v-001>
    <h3 data-v-001>组件</h3>
  </div>
   
</template>


<style>
/* 通过括号"属性选择器"，来防止组价样式冲突的问题 */
.container[data-v-001] {
  background-color: red;
}
</style>

示例

App.vue

<template>
  <div data-v-001>
    <h1 data-v-001>这是App.vue组件</h1>

    <p data-v-001>App中的p标签</p>
    <p data-v-001>App中的p标签</p>

    <hr />
    <my-list data-v-001></my-list>
  </div>
</template>

<script>
import MyList from "./List.vue";
export default {
  name: "MyApp",
  components: {
    MyList,
  },
};
</script>

<style lang="less">
// 保证样式只作用于data-v-001节点的组件
p[data-v-001] {
  color: red;
}
</style>
>

List.vue

<template>
  <div data-v-002>
    <h1 data-v-002>这是List.vue组件</h1>

    <p data-v-002>List中的p标签</p>
    <p data-v-002>List中的p标签</p>

    <hr />
  </div>
</template>

<script>
export default {
  name: "MyList",
};
</script>

<style lang="less"></style>

2、利用style节点的scoped属性

加上scope属性后，vue会自动为当前组件的DOM结构样式分配唯一的自定义属性

示例

App.vue

<template>
  <div>
    <h1>这是App.vue组件</h1>

    <p>App中的p标签</p>
    <p>App中的p标签</p>

    <hr />
    <my-list></my-list>
  </div>
</template>

<script>
import MyList from "./List.vue";
export default {
  name: "MyApp",
  components: {
    MyList,
  },
};
</script>
<!-- 加上scoped -->
<style lang="less" scoped>
p {
  color: red;
}
</style>

List.vue

<template>
  <div>
    <h1>这是List.vue组件</h1>

    <p>List中的p标签</p>
    <p>List中的p标签</p>

    <hr />
  </div>
</template>

<script>
export default {
  name: "MyList",
};
</script>

<!-- 加上scoped -->
<style lang="less" scoped></style>

3、deep样式穿透

示例

App.vue

<template>
  <div>
    <h1>这是App.vue组件</h1>
    <p>App中的p标签</p>
 

    <hr />
    <my-list></my-list>
  </div>
</template>

<script>
import MyList from "./List.vue";
export default {
  name: "MyApp",
  components: {
    MyList,
  },
};
</script>

<style lang="less" scoped>
// 使用deep深度选择器
:deep(.title) {
  color: blue;
}
</style>

List.vue

<template>
  <div>
    <!-- 父组件中加了deep属性的.title影响子组件中class为title的样式 -->
    <h1 class="title">这是List.vue组件</h1>
    <hr />
  </div>
</template>

<script>
export default {
  name: "MyList",
};
</script>

<style lang="less" scoped></style>

4、组件的props

定义：组件的自定义属性，使用者可通过props把数据传递到子组件的内部，供子组件内部进行使用。

props作用：父组件通过props向子组件传递数据。

 注：

  • 父组件如果传递了子组件中未声明的props属性，无法被子组件使用

 在组件中声明props

示例

Artice.vue组件

<template>
  <div>
    <h3>标题：{{title}}</h3>
    <h5>作者：{{author}}</h5>
  </div>
</template>

<script>
export default {
  name: 'MyArticle',
  // 外界可以传递指定的数据，到当前的组件中
  props: ['title', 'author']
}
</script>

App.vue

<template>
  <div>
    <h1>这是 App.vue 根组件</h1>
    <hr />
    <!-- 使用组件，并传递数据 -->
    <my-article title="标题" author="作者"></my-article>
  </div>
</template>

<script>
import MyArticle from './Article.vue'

export default {
  name: 'MyApp',
  components: {
    MyArticle,
  },
}
</script>

动态绑定props的值

使用v-bind为组件动态绑定props的值

示例

 Artice.vue组件

<template>
  <div>
    <h3>标题：{{title}}</h3>
    <h5>作者：{{author}}</h5>
  </div>
</template>

<script>
export default {
  name: 'MyArticle',
  props: ['title', 'author']
}
</script>

App.vue

<template>
  <div>
    <h1>这是 App.vue 根组件</h1>
    <hr />
    <my-article :title="info.title" :author="info.author"></my-article>
  </div>
</template>

<script>
import MyArticle from './Article.vue'

export default {
  name: 'MyApp',
  data() {
    return {
      info: {
        title: 'abc',
        author: '123',
      },
    }
  },
  components: {
    MyArticle,
  },
}
</script>

5、Class与Style绑定

动态绑定HTML的Class

 1.可通过三元表达式，为元素动态的绑定类名

 示例

<template>
  <div>
   <!-- 通过三元运算符动态绑定class -->
   <h3 class="thin" :class="isItalic ? 'italic' : ''">MyStyle 组件</h3> 
  </div>
</template>

<script>
export default {
  name: 'MyStyle',
 data() {
    return {
      // 字体是否倾斜
      isItalic: false,
    }
  },
}
</script>

<style lang="less">
// 字体变细
.thin {
  font-weight: 200;
}

// 倾斜字体
.italic {
  font-style: italic;
}

</style>

2.可通过数组的语法格式，为元素动态绑定多个class类名

 示例

<template>
  <div>
    <!--通过数组语法绑定  -->
    <h3 class="thin" :class="[isItalic ? 'italic' : '', isDelete ? 'delete' : '']">MyStyle 组件</h3>
  </div>
</template>

<script>
export default {
  name: 'MyStyle',
  data() {
    return {
      // 字体是否倾斜
      isItalic: false,
      // 是否应用删除效果
      isDelete: false,
    }
  },
}
</script>

<style lang="less">
// 字体变细
.thin {
  font-weight: 200;
}

// 倾斜字体
.italic {
  font-style: italic;
}

.delete {
  text-decoration: line-through;
}
</style>

3.可通过对象语法对数组语法绑定class进行简化

 示例

<template>
  <div>
    <!-- 通过对象 -->
    <h3 class="thin" :class="classObj">MyStyle 组件</h3>
  </div>
</template>

<script>
export default {
  name: 'MyStyle',
  data() {
    return {
      //对象中，属性名是class类名,值是布尔值
      classObj: {
        italic: false,
        delete: false,
      },
    }
  },
}
</script>

<style lang="less">
// 字体变细
.thin {
  font-weight: 200;
}

// 倾斜字体
.italic {
  font-style: italic;
}

.delete {
  text-decoration: line-through;
}
</style>

以对象语法绑定内联style

:style，实际上是JS对象

 示例

<template>
  <div>
    <div :style="{ color: active, fontSize: fsize + 'px', 'background-color': bgcolor }">绑定内联样式
    </div>
  </div>
</template>

<script>
export default {
  name: 'MyStyle',
  data() {
    return {
      // 高亮时的文本颜色
      active: 'red',
      // 文字的大小
      fsize: 30,
      // 背景颜色
      bgcolor: 'pink',
    }
  },
}
</script>

hh_xi
关注
  • 7
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue基础用法&基础原理整理
hangao233的博客
04-06 6万+
vue基础用法&基础原理整理 1. vue基础知识和原理 1.1 初识Vue 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象 demo容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法 demo容器里的代码被称为【Vue模板】 Vue实例和容器是一一对应的 真实开发中只有一个Vue实例，并且会配合着组件一起使用 {{xxx}}是Vue的语法：插值表达式，{{xxx}}可以读取到data中的所有属性 一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新
Vue 基础入门
我的的博客哦
05-17 1万+
🔰Vue 是 一 套用于动态构建用户界面的渐进式JavaScript框架。🔰特点：采用组件化模式，提高代码复用率，且让代码更好维护。声明式编码，让编码人员无需直接操作DOM，提高开发效率。使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。
Vue基础知识总结 1：Vue入门
热门推荐
学Java，找哪吒
06-23 8万+
Vue基础教程系列，打造精品专栏。
vue基础入门
weixin_58470558的博客
05-13 6564
vue基础、指令、过滤器、监听器、计算属性、vue-cli、vue组件
vue 基础知识总结
qq_40046544的博客
09-14 3272
官方给出的概念：Vue (读音/vjuː/，类似于 view) 是一套用户构建用户界面的前端框架在创建 vue 实例期间，可以在 filters 节点中定义过滤器}}});ref 用来辅助开发者在不依赖于 jQuery 的情况下，获取 DOM 元素或组件的引用每个 vue 的组件实例上，都包含一个 $refs 对象，里面存储着对应的 DOM 元素或组件的引用。默认情况下，组件的 $refs 指向的一个空对象动态组件指的是动态切换组件的显示与隐藏。
vue基础知识汇总
yuandawang的博客
01-06 5865
vue基础知识汇总
vue基础（二）
m0_61472704的博客
04-13 4002
一、侦听器 1、什么是watch侦听器 watch允许开发者监视数据的变化，从而做出特定的操作。 语法如下： <input type="text" v-model="username"/> const vm = new vue({ el:"#app", data:{ username:"" }, watch:{ //要监视哪个数据，就把数据名当作方法名即可 username(newVal, oldVal){ con
vue基础
qq_41103051的博客
04-12 5285
官网 英文官网: https://vuejs.org/ 中文官网: https://cn.vuejs.org/ Vue介绍 Vue是一套用于构建用户界面的渐进式框架。（动态构建用户界面的渐进式 JavaScript 框架） Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。 Vue的特点 遵循 MVVM 模式 编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发 它本身只关注 UI, 也可以引入其它第三方库开发项目 引入vue 在
vue基础笔试题
qq_51066068的博客
07-01 1万+
ctions 选项用来定义事件处理方法，用于处理 state 数据。actions 类似于 mutations，不同之处在于 actions 是异步执行的，事件处理函数可以接收 {commit} 对象，完成 mutation 提交，从而方便 devtools 调试工具跟踪状态的 state 变化。...............
vue基础-axios详解
weixin_40017062的博客
07-19 1万+
Axios是一个基于的 HTTP 库，可以用在浏览器和 node.js 中, 也是 vue 官方推荐使用的 http 库；封装axios，一方面为了以后维护方便，另一方面也可以对请求进行自定义处理。
Vue基础笔记111111111
08-11
Vue.js 是一款流行的前端JavaScript框架，用于构建...以上是Vue.js的基础知识点，包括其核心的MVVM模式、数据绑定、事件处理、条件渲染、循环遍历以及优化技术。掌握这些知识能帮助开发者有效地构建和维护Vue.js应用。
一、vue基础语法（轻松入门vue）
01-08
Vue基础语法一、HelloWord二、MVVM设计思想三、指令1. v-cloak2. v-text3. v-html4. v-show4. v-pre5. v-once6. v-model7. v-on事件修饰符按键修饰符自定义按键修饰符8. v-bindclass样式绑定style样式绑定9. v-if、v...
二Vue基础知识.pdf
07-13
二Vue基础知识.pdf
vue基础培训
01-11
### Vue.js基础知识培训 #### 一、Vue.js简介与历史 Vue.js是由尤雨溪创建的一个用于构建用户界面的渐进式JavaScript库。尤雨溪是Vue.js框架的作者，也是HTML5版Clear的打造人。2014年2月，尤雨溪开源了Vue.js，...
Vue后台管理系统基础模板，可快速二次开发
09-14
Vue后台管理系统基础模板是专为快速构建企业级后台应用而设计的框架，它极大地简化了开发流程，使得二次开发变得更加高效。这个模板包含了各种实用功能，如动态导航、多样的加载样式、富文本编辑器以及图片密码...
ASP.NET Core Web API 使用Autofac框架
鲤籽鲲的博客
08-08 395
ASP.NET Core Web API 使用Autofac框架
Element学习（布局组件、案例操作）（4）
m0_74363339的博客
08-08 354
value：表示输入的值，提交表单后传给服务器的值——>"男"表示1，"女"表示2。定义数据模型时，对象要使用大括号。像这里searchForm: {....}3、这一步之后的效果展示（只是空有一个布局——>目前还没有任何的内容）2、找到这种布局对应的代码（复制——>粘贴到标签<div>中）5、 在主展示区域的上方添加"员工查询"的（且独占一行）表单。还有一个当点击"查询"按钮时，会触发一个方法，也要去声明。7、给表格增加一个边框——>加入border属性即可。6、日期选择器——>(官网中组件中找)
略记一次抓取内容后解密及登录的经历
最新发布
深蓝浅蓝的天
08-09 881
从我这个不专业的爬虫工程师来看，爬虫工作是比较看耐心的，尤其是登录和其他的破解环节，一定要相信，从理论上来破的东西，它确实就能破，但确实太考验耐心了。最后再拿下登录返回的token，准备一台手机，自动接收验证码，然后启一个接受短信的服务存到redis，至此登录、请求接口、解密数据全部完成。，key是接口有返回的，但iv对方网站就隐藏的很好，除了这个iv，其他的问题都解决了，加密字符串也成功解密。尤其是解密的代码，调用栈太长了，我水平不够，整整看了2天，才从这种代码中找出了它主要的解密方式，
前端面试宝典【CSS篇】【4】
BDawn的专栏
08-06 612
盒子模型是 CSS 中用于描述 HTML 元素布局方式的一个概念。在 CSS 中，每个元素都被视为一个矩形盒子，这个盒子由几个不同的部分组成：内容区（content）、内边距（padding）、边框（border）和外边距（margin）。 box-sizing 属性是 CSS 中的一个重要属性，它用于定义元素的盒模型是如何工作的。 CSS Sprites（也称为 CSS 精灵或 CSS 雪碧图）是一种优化网页性能的技术，它将多个小图像合并成一个单一的大图像文件
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值