
vue.js
文章平均质量分 83
-4444x-
再努力一年,见我想见的人,做我想做的事(已经见到了我想见的人)
展开
-
【vue】Vue Router
Vue Router官网它是一个Vue.js官方提供的路由管理器。是一个功能更加强大的前端路由器,推荐使用。Vue Router和Vue.js非常契合,可以一起方便的实现SPA(single page web application,单页应用程序)应用程序的开发。Vue Router依赖于Vue,所以需要先引入Vue,再引入Vue RouterVue Router的特性:支持H5历史模式或者hash模式支持嵌套路由支持路由参数支持编程式路由支持命名路由支持路由导航守卫*支持路由过原创 2021-03-15 15:53:38 · 152 阅读 · 0 评论 -
【vue | 路由】路由的基本概念与原理
路由的基本概念与原理路由路由的本质就是一种对应关系,比如说我们在url地址中输入我们要访问的url地址之后,浏览器要去请求这个url地址对应的资源。那么url地址和真实的资源之间就有一种对应的关系,就是路由。一:后端路由:由服务器端进行实现,并完成资源的分发概念:根据不同的用户URL请求,返回不同的内容本质:URL请求地址与服务器资源之间的对应关系后端渲染(存在性能问题) 如果不停的提交表单,就会导致页面不停的刷新Ajax前端渲染(前端渲染提高性能,但是不支持浏览器的前进后退原创 2021-03-02 16:50:25 · 1031 阅读 · 0 评论 -
【vue】vue脚手架
3:Vue单文件组件传统Vue组件的缺陷:全局定义的组件不能重名,字符串模板缺乏语法高亮,不支持css(当html和js组件化时,css没有参与其中)没有构建步骤限制,只能使用H5和ES5,不能使用预处理器(babel)解决方案:使用Vue单文件组件,每个单文件组件的后缀名都是.vue每一个Vue单文件组件都由三部分组成1).template组件组成的模板区域2).script组成的业务逻辑区域3).style样式区域<template> 组件代码区域<原创 2021-03-02 16:06:32 · 262 阅读 · 0 评论 -
【vue】webpack的相关知识点
webpack1:当前Web开发面临的困境文件依赖关系错综复杂静态资源请求效率低模块化支持不友好浏览器对高级Javascript特性兼容程度较低webpack是一个流行的前端项目构建工具(打包工具),可以解决当前web开发中所面临的困境。webpack提供了友好的模块化支持,以及代码压缩混淆、处理js兼容问题、性能优化等强大的功能,从而让程序员把工作的重心放到具体的功能实现上,提高了开发效率和项目的可维护性。目前很受欢迎1:webpack的基本使用创建项目目录并初始化创建项目原创 2021-03-02 14:16:58 · 682 阅读 · 1 评论 -
【vue】slot插槽的基础知识与使用
文章目录插槽的基本使用具名插槽的使用编译作用域的概念作用域插槽的使用插槽的基本使用具名插槽的使用编译作用域的概念作用域插槽的使用原创 2021-03-01 15:26:28 · 447 阅读 · 0 评论 -
【vue】父子组件通信
文章目录一:为什么组件data必须是函数1:组件可以访问vue data里面的数据吗?二:父传子 props1:props数据验证三:子传父 (自定义事件)四:结合双向绑定五:父访问子 children-refs六:子访问父 parent-root一:为什么组件data必须是函数1:组件可以访问vue data里面的数据吗?组件是一个单独功能模块的封装∶这个模块有属于自己的HTML模板,也应该有属性自己的数据data。组件中的数据是保存在哪里呢?顶层的Vue实例中吗?我们先来测试一下原创 2021-03-01 11:39:12 · 293 阅读 · 1 评论 -
【vue】组件化的基本知识
文章目录一:组件化的实现和使用步骤二:组件化的基本使用过程三:全局组件和局部组件四:父组件和子组件的区分五:注册组件的语法糖写法六:组件模板抽离的写法一:组件化的实现和使用步骤二:组件化的基本使用过程三:全局组件和局部组件四:父组件和子组件的区分五:注册组件的语法糖写法六:组件模板抽离的写法...原创 2021-02-27 19:34:05 · 286 阅读 · 0 评论 -
【vue】vue的生命周期
vue的生命周期beforeCreate (create----创建)createdbeforeMount (mount----增加、镶嵌)mountedbeforeUpdate (update----更正、校正)updatedbeforeDestroy (destroy----破坏、消灭)destroyed1、在beforeCreate和created钩子函数之间的生命周期在这个生命周期之间,进行初始化事件,进.原创 2021-02-27 19:28:43 · 158 阅读 · 0 评论 -
【vue】v-model相关知识点
文章目录数据响应式双向数据绑定v-model1.v-model在input的下拉框1.1 存在多个单选按钮1.2 复选框中的应用1.3 v-model : select2.v-model修饰符3.v-model的底层实现原理数据响应式html中的响应式(屏幕尺寸的变化,导致样式的变化)数据响应式(数据的变化导致页面内容发生变化)数据的更新——>界面的更新双向数据绑定v-modelv-model是一个指令,限制在 <input>、<select>、<te原创 2021-02-27 19:08:52 · 266 阅读 · 0 评论 -
【vue】条件判断(v-if)和循环遍历(v-for)
文章目录一:分支结构v-if一:分支结构v-if1:多个元素 通过条件判断展示或者隐藏某个元素。或者多个元素2:进行两个视图之间的切换<div id="app"> <!-- 判断是否加载,如果为真,就加载,否则不加载--> <span v-if="flag"> 如果flag为true则显示,false不显示! </span></div><script&原创 2021-02-27 11:44:52 · 6332 阅读 · 0 评论 -
【vue】指令(二)
文章目录数据响应式双向数据绑定v-modelv-on(事件绑定)v-on事件函数中传入参数事件修饰符按键修饰符自定义按键修饰符别名数据响应式html中的响应式(屏幕尺寸的变化,导致样式的变化)数据响应式(数据的变化导致页面内容发生变化)数据的更新——>界面的更新双向数据绑定v-modelv-model是一个指令,限制在 <input>、<select>、<textarea>、components 中使用当输入框中的内容改变时,页面上的msg原创 2021-02-26 11:25:18 · 180 阅读 · 0 评论 -
【vue】计算属性的基本知识
模板中放入太多的逻辑会让模板过重且难以维护 使用计算属性可以让模板更加的简洁计算属性是基于它们的响应式依赖进行缓存的computed比较适合对多个变量或者对象进行处理后返回一个结果值,也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化文章目录一:体验计算属性二:计算属性的setter和getter一:体验计算属性计算机属性案例:计算所有书的总价格<body> <!-- 1:提供接收Vue数据的容器 --> <div id=.原创 2021-02-24 14:49:21 · 281 阅读 · 0 评论 -
【vue】初识Vue
我又开"坑"了我和Vue的认识过程:大二实习,由于学校安排的实习,是有关java开发之类的,但最后需要交的是小组项目,所以在前端方面,带队老师只是大概教了一下框架,那也是第一次接触前端方面,当时觉得贼有意思,就去搜了一下相关知识,当然第一个认识的就是Vue框架的开发者,类似下面的搜索过程,一个接一个的点,就到了那块当时就觉得真厉害,长得还好看,然后就所有的游戏名字全改成了相关,也将自己毕业的目标从做测试改成了前端,现在终于系统化的可以真正的去学习,有缘看到的,可以顺便给大佬个关注吧,虽然他讨论的我还看原创 2021-01-30 09:17:22 · 388 阅读 · 2 评论 -
【vue】vue中的MVVM
维基百科搜索MVVMMVVM(Model–view–viewmodel)是一种软件架构模式。MVVM有助于将图形用户界面的开发与业务逻辑或后端逻辑(数据模型)的开发分离开来,这是通过置标语言或GUI代码实现的。MVVM的视图模型是一个值转换器,这意味着视图模型负责从模型中暴露(转换)数据对象,以便轻松管理和呈现对象。在这方面,视图模型比视图做得更多,并且处理大部分视图的显示逻辑。视图模型可以实现中介者模式,组织对视图所支持的用例集的后端逻辑的访问。MVVM是马丁·福勒的PM(Presenta原创 2021-02-22 14:23:21 · 349 阅读 · 2 评论 -
模块化相关规范
es6:导入模块:import导出模块:export具体解释1.Node.js中通过babel(语法转换工具,插件)体验ES6模块化在控制台:1:npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node2:npm install --save @babel/polyfill3:项目跟目录创建文件babel.config.js4:在新建的文件夹中写如下代码:5:通过npx babel-node原创 2021-02-21 19:59:30 · 135 阅读 · 3 评论 -
【vue】Vue Router
Vue Router官网它是一个Vue.js官方提供的路由管理器。是一个功能更加强大的前端路由器,推荐使用。Vue Router和Vue.js非常契合,可以一起方便的实现SPA(single page web application,单页应用程序)应用程序的开发。Vue Router依赖于Vue,所以需要先引入Vue,再引入Vue RouterVue Router的特性:支持H5历史模式或者hash模式支持嵌套路由支持路由参数支持编程式路由支持命名路由支持路由导航守卫*支持路由过原创 2021-08-03 14:54:16 · 121 阅读 · 0 评论 -
【vue】v-bind样式绑定
文章目录一:class 属性绑定• 对象语法• 数组语法二:绑定styleclass 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性。Vue.js v-bind 在处理 class 和 style 时, 专门增强了它。表达式的结果类型除了字符串之外,还可以是对象或数组。一:class 属性绑定• 对象语法1:我们可以给v-bind:class 一个对象,以动态地切换class。v-bind:class指令可以与普通的class特性共存&原创 2021-01-31 11:20:11 · 1545 阅读 · 0 评论 -
【vue】指令(一)
本质就是自定义属性vue中指定都是以v-开头v-cloak这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。具体用法:在这里插入代码片v-clockv-clockv-clockv-clockv-clockv-clockv-clockv-clockv-clock...原创 2021-01-31 09:10:37 · 124 阅读 · 0 评论