vue.js
vue基础
前端yyds无敌
这个作者很懒,什么都没留下…
展开
-
vue之项目代码介绍
README.md 项目说明文件package.json 第三方模块依赖package-lock.json 是package.json的锁文件,确定第三方包具体的版本LICENSE 开源协议index.html 首页.postcssrc.js 配置项.gitignore 配置一些不上传git.eslintrc.js 配置代码规范,检测代码是否正确.eslintignore 配置哪些文件不受eslintrc.js的规范控制.editorconfig 配置编辑器里面的语...原创 2021-08-10 21:35:38 · 396 阅读 · 0 评论 -
vue之环境配置
详细参考官网:安装 | Vue CLI (vuejs.org)首先需要配置node.js,如有配置可在cmd里面查询cmd查询命令行node -v 查询node版本npm -v 查询npm版本如果上面两个都安装好的话,需要创建vue项目npm install -g @vue/cli# ORyarn global add @vue/cli然后用cd命令去你要建立项目的路径打包执行命令行打包项目vue init webpack 项...原创 2021-08-10 20:24:40 · 120 阅读 · 0 评论 -
vue.js基础之列表过渡
详细请参考官网:状态过渡 — Vue.js (vuejs.org)<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>列表过渡</title> <script src="../js/vue.js"></script> </head> <style> .v-enter, .v-leave-to{原创 2021-08-09 20:48:04 · 114 阅读 · 0 评论 -
vue.js基础之js动画与Velocity.js的结合
详细请参考vue官网:状态过渡 — Vue.js (vuejs.org)详细请参考Velocity.js官网:Velocity.js (velocityjs.org)<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>js动画与Velocity.js的结合</title> <script src="../js/vue.js"><原创 2021-08-09 19:48:22 · 75 阅读 · 0 评论 -
vue.js基础之使用ainmate.css
详细请参考官网:动画.css |CSS 动画的跨浏览器库。 (animate.style)<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>使用ainmate.css</title> <script src="../js/vue.js"></script> <link rel="styleshee原创 2021-08-08 21:42:11 · 161 阅读 · 0 评论 -
vue.js基础之css动画原理
详细参考官网:进入/离开 & 列表过渡 — Vue.js (vuejs.org)<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>vue-动画原理</title> <script src="../js/vue.js"></script> </head> <style> ..原创 2021-08-08 21:07:21 · 81 阅读 · 0 评论 -
vue.js基础之动态组件与v-once
详细参考官网:动态组件 & 异步组件 — Vue.js (vuejs.org)<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>动态组件与v-once</title> <script src="../js/vue.js"></script> </head> <body> <div原创 2021-08-08 10:45:48 · 59 阅读 · 0 评论 -
vue.js基础之在vue中使用插槽以及作用域插槽
详细参考官网:插槽 — Vue.js (vuejs.org)<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>在vue中使用插槽</title> <script src="../js/vue.js"></script> </head> <body> <div id="app">原创 2021-08-08 09:05:42 · 91 阅读 · 0 评论 -
vue.js基础之非父子组件间传递
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>非父子组件间传值</title> <script src="../js/vue.js"></script> </head> <body> <div id="app"> <child content="Dell">&l..原创 2021-08-07 21:51:56 · 49 阅读 · 0 评论 -
vue.js基础之组件参数效验与非props特性
详细参考官网:Prop — Vue.js (vuejs.org)<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>父子组件间数据传递</title> <script src="../js/vue.js"></script> </head> <div id="app"> <child原创 2021-08-07 12:44:51 · 60 阅读 · 0 评论 -
vue.js基础之使用组件的细节点
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>使用组件的细节点</title> <script src="../js/vue.js"></script> </head> <body> <div id="app"> <table> <ul> .原创 2021-08-07 10:33:53 · 62 阅读 · 0 评论 -
vue.js基础之表单绑定
请参考官网:表单输入绑定 — Vue.js (vuejs.org)<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>表单绑定</title> <script src="../js/vue.js"></script> </head> <body> <div id="app">原创 2021-08-06 22:11:17 · 55 阅读 · 0 评论 -
vue.js基础之事件绑定
事件绑定有很多种,以下只是举例三种,详细可看官方文档<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>事件绑定</title> <script src="../js/vue.js"></script> </head> <body> <div id="app"> <but原创 2021-08-06 21:27:56 · 106 阅读 · 0 评论 -
vue.js基础之条件渲染
v-if和v-else-if或v-else一定要连起来用,不然会报错。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>条件渲染</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> &原创 2021-08-06 15:20:25 · 48 阅读 · 0 评论 -
Vue.js基础之样式绑定
用vue实现点击一次颜色变红,再次点击消失<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Vue中的样式绑定</title> <script src="js/vue.js"></script> </head> <style> .acitvated{ color: #FF0000;原创 2021-08-06 14:04:37 · 53 阅读 · 0 评论 -
vue.js基础之计算属性的get和set
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>计算属性的get和set</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> {{fullName}} </div> .原创 2021-08-06 10:50:51 · 102 阅读 · 0 评论 -
vue.js基础之计算属性、方法与监听器
当我们要计算一个值时,可以用到计算属性、方法、监听器三种办法。在这里我们推荐使用计算属性,即简洁,同时性能又高看下面代码,理解三种办法的区别<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>计算</title> <script src="js/vue.js"></script> </head> <原创 2021-08-06 09:45:55 · 66 阅读 · 0 评论 -
vue.js基础之生命周期
什么是生命周期生命周期函数就是vue实例在某一个时间点会自动执行的函数有什么函数beforeCreate created beforeMount mounted beforeDestroy destroyed beforeUpdate updated什么时候执行,看下面代码说明,或者参考官方文档<!DOCTYPE html><html> <head> <meta charset="utf-8"> &...原创 2021-08-05 21:26:26 · 55 阅读 · 0 评论 -
vue.js基础之简单的组件传值
v-bind 简写 :v-on 简写 @<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue.js"></script><!-- 引入vue --> </head> <body> <div id="app">原创 2021-08-05 12:17:27 · 85 阅读 · 0 评论 -
vue.js基础之使用组件改造TodoList
v-bind用于绑定数据和元素属性<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue.js"></script><!-- 引入vue --> </head> <body> <div id="app"> &l.原创 2021-08-05 11:07:50 · 66 阅读 · 0 评论 -
vue.js基础之mvvm模式
MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自动传递给 View,即所谓的数据双向绑定。 Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库,专注于View 层。它的核心是 MVVM 中的 VM,也就是 ViewModel。 ViewModel负责连接 View 和 Model,保证视图和数据的一致性,这种轻量级的架转载 2021-08-05 09:31:43 · 441 阅读 · 0 评论 -
vue.js基础之开发todolist(v-model、v-for、v-on)
v-for 循环数据v-on 绑定事件v-model 双向数据绑定<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue.js"></script><!-- 引入vue --> </head> <body> <div原创 2021-08-05 09:11:17 · 52 阅读 · 0 评论 -
vue.js基础一之halloworld
vue官网:Vue.js (vuejs.org)什么是vueVue 是一套用于构建用户界面的渐进式框架学习vue之前要学会什么需要学习JS、HTML、es6、es5语法等基础编程语言如何安装vue下载vue.js通过路径引入 直接使用script加连接引入 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> 使用vue实现第一个程序hel.原创 2021-08-05 08:34:39 · 162 阅读 · 0 评论