
Vue.js
小小小菜鸡zzzz
这个作者很懒,什么都没留下…
-
原创 vuejs 中 betterscroll 的简单使用
<template> <div class="swapper" ref="swapper"> <div class="content"> <slot></slot> </div> </div></template><script> import BScroll from 'better-scroll' export default { name2020-08-29 20:28:5144
0
-
原创 vue 中 axios 的封装
import axios from 'axios'export function request(config) { // 创建一个 axios 实例 const instance = axios.create({ baseURL: 'http://123.207.32.32:8000/api/x6', timeout: 5000 }) // 请求拦截器,必须将处理后的数据返回 instance.interceptors.request.use(config =&2020-08-14 09:58:2431
0
-
原创 vue屏幕适配 postcss-px-to-viewport
基础配置其他属性选项2020-08-13 22:56:0640
0
-
原创 vue 中挂载一个全局组件,用组件构造器
效果index.jsimport Toast from "./Toast";const obj = {}obj.install = function (Vue) { // 1.创建组件构造器 const toastContrustor = Vue.extend(Toast) // 2.new的方式,根据组件构造器,可以创建出来一个自建对象 const toast = new toastContrustor() // 3.将组件对象,手动挂载到某一个元素上 toas2020-08-13 21:35:06243
0
-
原创 01.vue 中 less 的简单使用
使用 less 写一个弹框组件在用 vue create vueless 时选择 css 预处理Alert.vue<template> <div class="alert"> <div class="zhezhao"> <div class="alertMain"> <div class="title"> 温馨提示:{{title}} </div>2020-07-31 18:43:2823
0
-
原创 v-show与v-if的区别
<html><!-- 频繁显示与隐藏时用v-show 切换一次通过v-if --><!-- v-show与v-if的区别 --><!-- v-if:当条件为false时,包含v-if的指令元素,根本不会存在dom中 。 在true和false切换中,本质是创建和销毁 --><!-- v-show:当条件为false时,v-sho...2020-01-31 16:23:1134
0
-
原创 登陆小案例
<html><!-- vue在渲染页面时有可能会复用一些元素,在虚拟Dom中首先,加一个key --><body> <div id="app"> <span v-if="isShow"> <label for="phoneNumber">登陆</label> ...2020-01-31 16:13:5132
0
-
原创 v-show与v-if的区别
<html><!-- v-show与v-if的区别 --><!-- v-if:当条件为false时,包含v-if的指令元素,根本不会存在dom中 。 在true和false切换中,本质是创建和销毁 --><!-- v-show:当条件为false时,v-show给我们的元素添加了一个行内样式:diaplay:none --><b...2020-01-31 16:12:2448
0
-
原创 v-if
<html><body> <div id="app" v-if="isShow"> aaaaaa <button @click="btn1Click(12345,$event)">按钮1</button> </div></body><script src...2020-01-31 16:11:3725
0
-
原创 v-on关键字
<html><body> <div id="app"> <!-- 阻止冒泡事件 --> <div @click="btn2Click"> aaaa <button @click.stop="btn1Click">按钮1</butt...2020-01-31 16:10:1442
0
-
原创 v-on
<html><body> <div id="app"> <button @click="btn1Click(12345,$event)">按钮1</button> </div></body><script src="../js/vue.js"></scrip...2020-01-31 16:09:3924
0
-
原创 计算属性的setter和getter
<!DOCTYPE html><html lang="en"><head> <meta charset="gbk"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA...2020-01-31 16:08:5133
0
-
原创 计算属性的复杂操作
<!DOCTYPE html><html lang="en"><head> <meta charset="gbk"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA...2020-01-31 16:07:4967
0
-
原创 计算属性的基本使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...2020-01-31 16:06:2765
0
-
原创 bind动态绑定style(数组)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...2020-01-31 16:04:27106
0
-
原创 v-for和v-bind的结合使用
<html><style> .active { color: red; }</style><body> <div id="app"> <ul> <li @click="getClasses(index)" v-for="(item,...2020-01-31 16:02:401537
0
-
原创 01-bind的基本使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...2020-01-31 16:01:4233
0
-
转载 Vue.js
vue介绍Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。1.vue的安装尝试 Vue.js 最简单的方法是使用 JS...2020-01-31 15:53:4543
0