Vue
关注
分享
扫一扫
AsaZyf
这个作者很懒，什么都没留下…
展开
-
Vue基础--简易的计算器
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/vue.js" >&am原创 2019-01-23 14:31:12 · 472 阅读 · 0 评论 -
Vue动画--使用 animate.css库
code：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>使用 animate.css库</title> <script type="text/javascript" src="js/vu原创 2018-11-05 16:02:31 · 212 阅读 · 0 评论 -
Vue动画--Vue中CSS动画原理
code：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Vue中CSS动画原理</title> <script type="text/javascript" src="js/vue.js原创 2018-11-05 15:42:04 · 219 阅读 · 0 评论 -
Vue--slot作业
require：将title和arrlist的内容显示在页面上code：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type=&quo原创 2018-11-05 15:07:26 · 265 阅读 · 0 评论 -
Vue--利用路由完成todolist
目录文件：index.js：import Vue from 'vue'import Router from 'vue-router'import news from '@/components/news/news'import done from '@/components/news/pages/done'import nodone from '@/components/ne...原创 2018-11-07 21:11:17 · 385 阅读 · 0 评论 -
Vue--脚手架的搭建
1）什么是vue-cliVue-cli是官方推荐的快速构建单页应用的脚手架，用于快速构建vue项目目录，无需手动加载项目文件。我们需要知道项目的目录文件是由webpack打包工具为我们编译完成。2）安装node.js安装node.js，从node.js官网下载并安装node，安装过程很简单，一路“下一步”就可以了，安装完成之后，打开命令行工具(win+r，然后输入cmd)，输入 nod...原创 2018-11-07 20:57:10 · 646 阅读 · 0 评论 -
Vue--动态组件与v-once指令
code：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>动态组件与v-once指令</title> <script src="https://cdn.bootcss.com/vue/2.5.17-原创 2018-11-04 17:15:29 · 212 阅读 · 0 评论 -
Vue组件--单个插槽
code：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/vue.js"原创 2018-11-02 09:17:49 · 199 阅读 · 0 评论 -
Vue动画--组件的过渡
code：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Vue中组件的过渡</title> <script type="text/javascript" src="js/vue.js&q原创 2018-11-06 11:09:21 · 241 阅读 · 0 评论 -
Vue动画--两个元素过渡
code：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Vue中两个元素过渡</title> <script type="text/javascript" src="js/vue.js&原创 2018-11-06 11:08:28 · 258 阅读 · 0 评论 -
Vue组件切换--带动画效果
code：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>组件切换comment--适用于多个组件切换</title> <script type="text/javascript" src=&quo原创 2018-11-01 16:27:11 · 1037 阅读 · 1 评论 -
Vue动画--同时使用过渡和动画
code：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Vue中同时使用过渡和动画</title> <script type="text/javascript" src="js/vue.原创 2018-11-05 23:57:21 · 471 阅读 · 0 评论 -
Vue单文件组件和路由
单文件组件路由配置路由出口【显示】原创 2018-11-21 16:28:19 · 412 阅读 · 0 评论 -
vue中使用stylus
1.在vue项目中用cmd敲下面这段代码npm install stylus-loader css-loader style-loader stylus --save2.下载成功后要查看Vue里面是否配置了3.使用stylus4.定义变量并调用文件后缀为styl，储存变量对应的样式引入自定义的文件【注意用的是@import】和使用...原创 2018-11-21 21:51:13 · 282 阅读 · 0 评论 -
Vue基础--事件修饰符
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/vue.js" >&am原创 2019-01-19 21:51:48 · 288 阅读 · 0 评论 -
Vue基础--跑马灯效果
code：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/vue.js" &原创 2019-01-19 21:49:50 · 298 阅读 · 0 评论 -
ES6箭头函数--不能在computed用
箭头函数里面的this是根据上下文的,在computed里用箭头函数，由于找不到对应的内容，this会指向window，数据无法出现<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=de原创 2018-12-25 11:41:31 · 850 阅读 · 0 评论 -
Vue解决拖动影响
情况：在首页拖动页面，然后点击商品页面进入，会出现显示的是商品详情的下面，例如：这是页面当你拖到中间时才点击进入这时页面会跳到详情页的下面（下面还没有写代码所以没东西）解决方法：在index.js写下这段代码scrollBehavior(to,from,savedPosition){ return{x:0,y:0}}配好后，点击页面就会正常显示了...原创 2018-12-11 19:44:46 · 605 阅读 · 0 评论 -
局域网访问Vue项目
一、获取本机IP地址：二、在vue项目文件夹下的package.json配置以下代码，配置完成记得重启项目三、直接输入IP地址+端口号 即可访问，若是手机要访问，需要和电脑连接的网络是同一个...原创 2018-12-16 17:19:02 · 913 阅读 · 0 评论 -
Vuex代码优化--数据表现
一、state优化前：优化后：... 表示展开运算符，mapState表示把Vuex里面的数据映射到computed，把city公用数据映射到city的计算属性之中也可以另起名字：二、mutations...原创 2018-12-10 15:33:26 · 382 阅读 · 0 评论 -
Vuex高级使用--数据分类存储
将store文件夹下的index.is代码分类到对应文件中去，如：将state中的代码写到一个js文件中保存1.新建state.js2.将index里state的内容剪贴到state.js中，并导出语句【export default】3.index.js配置state.js，由于键值同名，写一个就行...原创 2018-12-10 15:21:23 · 1014 阅读 · 1 评论 -
Vue--组件传值
一、父子组件1.在父组件上定义2.绑定到要传递的子组件3.在子组件上接收二、兄弟组件1.在要发送数据的组件上绑定事件，每点击一次，向外触发事件 第一个参数是事件名，第二个参数是传递的值2.在引用组件的页面【父组件】上监听页面打印，看父组件是否成功接收子组件传过来的值3.转发到子组件，通过属性方式传递绑定到要调用的组件【li...原创 2018-12-05 16:53:09 · 208 阅读 · 0 评论 -
Vue使用插件--轮播图
插件>>地址1.找到第一个点进去2.安装3.引入4.使用5.页面使用 ①新建swiper.vue②找到SPA复制template代码③绑定了变量得定义，删除不需要的代码④注意点，它的高度会相对于宽度撑开31.25%，实现宽高比平衡【图片】PS:不能写在height是因为height是相对于父级元素的...原创 2018-11-27 09:56:37 · 817 阅读 · 0 评论 -
Vue--自定义文件名缩写
找到build文件夹下的webpack.base.conf.js，在resolve里面定义文件名和文件位置原创 2018-11-21 21:54:41 · 567 阅读 · 0 评论 -
Vue组件切换--comment(适用于多个组件切换)
code:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>组件切换comment--适用于多个组件切换</title> <script type="text/javascript" src=&quo原创 2018-11-01 16:20:16 · 3475 阅读 · 0 评论 -
Vue组件切换--v-if(适合只有两个组件)
code：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>组件切换v-if--适用于两个组件切换</title> <script type="text/javascript" src="j原创 2018-11-01 16:16:58 · 3332 阅读 · 0 评论 -
Vue组件--父组件发起ajax请求实现json数据(jqueryAjax-axios)
HTMl和Vue：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>父组件发起ajax请求实现json数据(jqueryAjax-axios)</title> <script type="text/javasc原创 2018-10-30 19:12:51 · 403 阅读 · 0 评论 -
Vue入门练习09--选项卡切换
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>选项卡切换</title> <script type="text/javascript" src="js/vue.js" &g原创 2018-10-23 21:13:01 · 303 阅读 · 0 评论 -
Vue练习--table增删改
带数据存储<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/bootstrap.css" /&a原创 2018-10-23 21:09:18 · 391 阅读 · 0 评论 -
Vue入门08--v-bind
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>v-bind</title> <script type="text/javascript" src="原创 2018-10-23 15:20:25 · 199 阅读 · 0 评论 -
Vue--待办清单
带本地缓存下载链接https://download.youkuaiyun.com/download/asazyf/10749810【需要支付1积分，想免费可以留言，我私发】效果：不知道为什么动图动不了，大概就是在输入框输入待办事项，点击按钮添加，完成了就勾选按钮然后点删除，下面的历史记录会出现你刚刚完成的事项，由于设置缓存，所以关掉浏览器再打开还是会有...原创 2018-10-28 22:29:19 · 967 阅读 · 0 评论 -
Vue入门07练习--走马灯文字
函数问题，箭头函数代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/vue.js&q原创 2018-10-22 11:51:48 · 535 阅读 · 0 评论 -
Vue入门06--v-on
代码：v-on简写@<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/vue.js&quo原创 2018-10-22 11:36:05 · 201 阅读 · 0 评论 -
Vue入门05--if，else
代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/vue.js" &g原创 2018-10-22 11:26:38 · 225 阅读 · 0 评论 -
Vue入门04--v-show
代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/vue.js" &g原创 2018-10-22 11:24:31 · 197 阅读 · 0 评论 -
Vue入门03--if
代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/vue.js" &g原创 2018-10-22 11:21:20 · 175 阅读 · 0 评论 -
Vue入门02--for循环
代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="https://lib.baomitu.com/vue/2.5.17/vue.js">原创 2018-10-22 10:32:07 · 233 阅读 · 0 评论 -
Vue入门练习10--图片切换
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>图片轮播</title> <script type="text/javascript" src="js/vue.js" >原创 2018-10-23 21:14:15 · 249 阅读 · 0 评论 -
Vue--全选
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/vue.js" >&am原创 2018-10-26 09:34:44 · 347 阅读 · 0 评论 -
Vue组件--利用axios和组件
注意：要导入vue.js、axios.is和bootsteap.css包<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"原创 2018-10-31 16:05:02 · 455 阅读 · 0 评论