Vue
关注
分享
扫一扫
文章平均质量分 58
Vue前端框架知识
Listener-1379
全栈工程师
展开
-
【Vue】六：路由（上）使用路由 多级路由
new Vue 时添加新的配置项：一旦使用了 vue-router 插件，在 new Vue 的时候可以添加一个全新的配置项：router。（4）router 路由器的创建一般放在一个独立的 js 文件中，例如：router/index.js。（6）使用 router-link 标签代替 a 标签（App.vue 中）注意：一般普通组件存放在components中，路由组件存放在pages中。（2）main.js 中引入并使用 vue-router。（1）安装vue-router插件。原创 2023-06-10 15:38:45 · 1482 阅读 · 0 评论 -
【Vue】三：Vue组件：props配置 父组件获取子组件
如果要对props传过来的值稍作修改后展示，则可以定义一个新的变量，然后将props传过来的值赋给变量，修改变量的值，再将变量展示出去。ref 也可以使用在普通的 HTML 标签上，这样获取的就是这个 DOM 元素。原创 2023-06-08 16:15:26 · 3079 阅读 · 0 评论 -
【Vue】三：Vue组件：Vue脚手架
（4）编译 Vue 程序，自动将生成 html css js 放入内置服务器，自动启动服务。（5）打开浏览器，访问：http://localhost:8080。脚手架默认配置在 vue.config.js 文件中进行。（1）安装node.js。组件XDemo.vue。组件YDemo.vue。原创 2023-06-07 23:10:52 · 195 阅读 · 0 评论 -
【Vue】三：Vue组件：单文件组件
注册组件到App，并在此使用组件。原创 2023-06-07 22:40:25 · 174 阅读 · 0 评论 -
【Vue】三：Vue组件：VueComponent 和 Vue
Vue.extend({})配置项中的 this 就是：VueComponent 实例（vc）。new Vue({})配置项中的 this 就是：Vue 实例（vm）。原创 2023-06-07 12:41:05 · 116 阅读 · 0 评论 -
【Vue】三：Vue组件: 组件使用和组件嵌套
（1）创建Vue组件的时候，不能使用el配置项。但是需要使用template配置项来配置模板语句。（2）配置项中的data，不能直接使用对象形式，要使用function。直接使用类似使用html标签。原创 2023-06-06 23:14:45 · 1623 阅读 · 0 评论 -
【vue】二：核心处理---vue的生命周期
（1）beforeCreate阶段，还不能访问data和methods。（2）created阶段，可以访问data和methods。el有，template有，则编译template。el有，template没有，则编译el。手动挂载，才能继续执行流程。el没有，则需要使用。原创 2023-06-04 10:26:55 · 544 阅读 · 0 评论 -
【Vue】二：Vue核心处理---vue的其它指令和自定义指令
指令的名字（1）v-不需要写（2）Vue官方建议指令的名字要全部小写，如果多个单词，使用-衔接回调函数的执行时机包括：（1）标签和指令第一次绑定的时候（2）模板被重新解析的时候回调函数有两个参数（1）第一个参数是真实的dom元素（2) 第二个参数是标签和指令之间绑定关系的对象。原创 2023-06-02 21:22:17 · 597 阅读 · 0 评论 -
【Vue】二：Vue核心处理---列表渲染 列表过滤 列表排序
这里的key建议使用对象的id，不要使用index。使用computed同样可以实现上面的功能。注意：v-for要写在循环项上。原创 2023-05-30 15:59:15 · 280 阅读 · 0 评论 -
【Vue】二：Vue核心处理---条件渲染
因为 v-if 是一个指令，他必须依附于某个元素。如果使用div不太合适，使用template比较合适。指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true 时才被渲染。按条件展示，为true,则展示，为false,则不展示。如果一个元素频繁隐藏和显示，则使用v-show。原创 2023-05-29 20:30:36 · 141 阅读 · 0 评论 -
【Vue】二：Vue核心处理---class与style绑定
文章目录1.class绑定1.1 字符串形式1.2 数组形式1.3 对象形式2.style绑定1.class绑定1.1 字符串形式1.2 数组形式1.3 对象形式形式适用字符串确定动态绑定的样式只有一个，但是名字不确定数组样式的个数不确定，样式的名字也不确定对象样式的个数确定，样式的名字也确定，但是需要决定是否使用2.style绑定原创 2023-05-28 22:40:34 · 67 阅读 · 0 评论 -
【Vue】二：Vue核心处理---计算属性 监视属性
实际上计算属性与methods中定义方法基本上没有什么区别，只是计算属性基于响应式依赖缓存，只要数据没有发生改变，计算属性从缓存中取值，只有当数据发送改变，才会重新执行函数。（4）所有不属于 Vue 管理的函数，例如 setTimeout 的回调函数、Promise 的回调函数、AJAX 的回调函数，建议使用箭头函数。（3）开启深度监视，需要监视一个具有多级结构的属性，并且监视所有的属性，需要深度监视。（2）监视多级结构中某个属性的变化，写法是：‘a.b.c’ : {}。1 第一个时机：初次访问该属性。原创 2023-05-28 20:47:51 · 639 阅读 · 0 评论 -
【Vue】二：Vue核心处理---模板语法
其中表达式，之前在插值语法中{{这里可以写什么}}，那么指令当中的表达式就可以写什么。凡是标签体当中的内容想要改变，则使用插值语法，凡是标签中的属性想要改变，则使用指令语法。但是上例中的函数不能写成箭头函数，如果写成箭头函数，则this指向的是window。编译后有的指令，即需要参数，又需要表达式：v-bind:参数=“表达式”有的指令，不需要参数，但是需要表达式：v-if=“表达式”有的指令，不需要参数，也不需要表达式：v-once。原创 2023-05-27 12:49:19 · 1442 阅读 · 0 评论 -
【Vue】一：Vue的基础
{{message}}是 Vue 框架自己搞的一个语法，叫做插值语法（或者叫做胡子语法），可以从 data 中根据 key 来获取 value，并且将 value 插入到对应的位置。（2）Vue的构造函数的参数是options, 要求这个options参数必须是一个纯粹的js对象 {}。（4）可以不使用template配置项，这些模板语句可以直接写到html标签当中，Vue能够找到并且编译。模板语句是Vue框架自己制定的一套模板语法规则，模板语句可以是HTML代码，也可以是Vue中的特殊规则。原创 2023-05-25 20:25:23 · 1730 阅读 · 0 评论 -
vue---父组件和子组件的通信
文章目录一.父组件与子组件的定义二.子组件接受父组件消息三.子组件向父组件发送消息一.父组件与子组件的定义我们在前面的《vue—组件详解》简单介绍了一下父组件与子组件，下面我们在来详细介绍一下。我们通过在父组件中使用components来说明我们的子组件，特别的，我们的Vue可以看作根组件。源码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <ti原创 2021-04-24 20:04:36 · 359 阅读 · 1 评论 -
Vue---组件模板抽离
文章目录一.为什么要组件模板抽离二.使用<script>标签三.使用<template>标签一.为什么要组件模板抽离我们作为计算机专业的IT人员，十分注意代码的质量，比如笔者非常赞同雷军写代码要写“诗一样的代码”，我们在上一篇《Vue—主件详解》就通过语法糖简化了我们的注册过程，但是我们通过观察，发现在Vue中写Html代码显然有些臃肿，所以我们想到可以通过模板抽离的方法将我们在Vue中的Html代码或是其他模板分离出来，使得我们的代码更加整洁。没有使用组件模板分离前的实例：原创 2021-04-20 23:31:41 · 988 阅读 · 0 评论 -
Vue---组件详解
文章目录一.组件的作用二.使用组件三.全局注册和局部组注册四.父组件和子组件五.注册组件的语法糖写法一.组件的作用我们在开发过程中，会复用许多的代码，我们不会写许多重复的代码，这样也会使我们的代码变得很臃肿，我们在c语言的学习过程中，使用到了函数来封装我们的函数来实现代码的复用，我们在vue中，可以使用组件来封装我们的代码。组件可以使我们很轻易地对我们的代码进行修改，任何我们所看到的页面都可以分解成组件。如下：官方文档的例子，我们将一个页面分解为一颗树。二.使用组件创建组件构造器我们通过原创 2021-04-17 20:02:18 · 3285 阅读 · 7 评论 -
Vue---Class与Style绑定
文章目录绑定HTML Class一.对象语法（一）二.对象语法(二）三.对象语法(三）四.数组语法绑定内联样式一.对象语法二.数组语法绑定HTML Class一.对象语法（一）在模板中给v-bind:class传递一个对象，通过对象的操作从而改变css样式。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title原创 2021-04-03 17:38:01 · 260 阅读 · 0 评论 -
Vue---计算属性和监听器
文章目录一.计算属性二.计算属性与方法三.监听事件一.计算属性我们从之前的学习中可以看出，我们可以在模板语法中添加功能，从而改变我们的页面，但是，如果我们在模板语法中添加太多的功能，会使得我们的模板语法显得臃肿，在java，c, python的学习当中，我们会定义一个函数来解决我们主函数臃肿的问题，在这里，我们使用计算属性也非常的类似，但计算属性与方法又有不同之处，我们后面会介绍。看一个实例代码：<!DOCTYPE html><html lang="en"><hea原创 2021-04-03 10:59:43 · 168 阅读 · 0 评论 -
Vue---模板语法
文章目录一.文本二.插入HTML三.绑定动态属性四.监听事件初步一.文本使用双大括号 {{ }}，非常简单，双大括号的内容将替换为它的值。当然，你也可以使用v-once一次性的插值。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><原创 2021-04-01 21:44:27 · 200 阅读 · 0 评论 -
Vue---列表渲染
文章目录一.数组示例二.对象示例一.数组示例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><ul id = "app"> <li v-for = "item in items">No.1 + {{item}}&l原创 2021-04-01 19:49:42 · 130 阅读 · 0 评论 -
Vue ---条件渲染
文章目录一.v-if一.v-if官方的解释为：v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。<h1 v-if="awesome">Vue is awesome!</h1>大家也许会一头雾水，下面由我来给大家解释以下我的理解：其实，大家可以将awesome看作一个布尔值，它要么为true,要么为false，当为true时，它就执行，为false时，就不执行（当然如果有else,就会执行else中的内容）。先原创 2021-03-27 23:05:51 · 304 阅读 · 0 评论