VUE
关注
分享
扫一扫
古雅学长
这个作者很懒，什么都没留下…
展开
-
VUE 使用 watch 监听路由
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="lib/vue-2.4.0.js"></script> <!-- 1.引入路由 --> <script src="./lib/vue-router.js"></script> </hea原创 2020-09-14 12:31:04 · 340 阅读 · 0 评论 -
VUE 使用 计算属性(computed) 实现 双向数据绑定
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="lib/vue-2.4.0.js"></script> </head> <body> <div id="app"> <input type="text" v-model="lastn原创 2020-09-14 12:30:21 · 1618 阅读 · 0 评论 -
VUE 使用watch 实现 双向数据绑定
1、使用watch 实现 双向数据绑定<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="lib/vue-2.4.0.js"></script> </head> <body> <div id="app"> <input type="原创 2020-09-14 12:28:51 · 623 阅读 · 0 评论 -
VUE 原生 实现 双向数据绑定
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="lib/vue-2.4.0.js"></script> </head> <body> <div id="app"> <input type="text" v-model="lastn原创 2020-09-14 12:27:41 · 186 阅读 · 0 评论 -
VUE 路由的基本使用
1. 引入路由<!-- 1.引入路由 --> <script src="./lib/vue-router.js"></script> </head> <body> <div id="app"> <router-link to="login">登录</router-link> <router-link to="register">注册</router-link>原创 2020-09-14 12:25:44 · 183 阅读 · 0 评论 -
VUE 命名 视图 实现 经典布局
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="js/vue.js"></script> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">原创 2020-09-14 12:21:10 · 150 阅读 · 0 评论 -
VUE 路由 规则 中 定义 参数
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="js/vue.js"></script> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">原创 2020-09-14 12:20:23 · 421 阅读 · 0 评论 -
VUE 中 vue-router 的使用
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="js/vue.js"></script> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">原创 2020-09-14 12:19:32 · 176 阅读 · 0 评论 -
VUE 中 ref 获取DOM元素和组件
ref 获取DOM元素和组件<div id="app"> <input type="button" value="快到碗里来" @click="getElement" ref="mybtn"> <h3 id="myh3" ref="myh3">哈哈哈，今天天气太好了！！！</h3> <login ref="mylogin"></login></div> var login = { template:'&l原创 2020-09-13 14:13:03 · 509 阅读 · 0 评论 -
VUE 中，父组件向子组件传递方法
VUE 中，父组件向子组件传递方法使用的是事件绑定机制<com2 v-on:func="show"></com2>当点击子组件的按钮的时候，如何 拿到 父组件传递过来的 func 方法，并调用这个方法？myclick(){emit 英文愿意：是触发，调用、发射的意思 this.$emit('func',123,456)}methods:{ show(data,data2){ console.log('调用了父组件身上的 show 方法：---' + data原创 2020-09-13 13:09:36 · 803 阅读 · 0 评论 -
VUE 中定义私有组件、组件中的 data、组件切换
1、通过 components 定义私有组件var vm2 = new Vue({ el:'#app2', data:{}, methods:{}, components:{//定硫仪私有组件 login:{ template:'#tmpl2' } }})<!-- 通过 components 定义私有组件 --><div id="app2"> <login></login></div><!-- 通过 c原创 2020-09-12 14:34:36 · 476 阅读 · 0 评论 -
VUE 中组件的三种创建方式
第一种方法，创建全局的vue组件var coml = Vue.extend({ // 通过template 属性指定组件要展示的结构 template:'<a><h1>这是使用 Vue.extend 创建的组件</h1></a>'})如果使用 Vue.component 定义全局组件的时候，组件名称使用了驼峰，就得用 - 来连接驼峰 改为小写使用Vue.component('组件名称'，'创建出来的组件模板对象')Vue.component('原创 2020-09-12 13:04:50 · 1555 阅读 · 0 评论 -
VUE中动画的配合使用
能够实现列表的元素，渐渐离开的效果.v-enter,.v-leave-to{ opacity:0; transform:translateY(80px);}.v-enter-active,.v-leave-active{ transition:all 0.6s ease;}能够实现列表后续的元素，渐渐地飘上来的效果.v-move { transition:all 0.6s ease;}.v-leave-active{ position:absolute;}<tr原创 2020-09-12 09:52:38 · 160 阅读 · 0 评论 -
VUE 中的动画
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="js/vue.js"></script> <style> .ball{ width:15px; height:15px; border-radiu原创 2020-09-09 11:10:46 · 110 阅读 · 0 评论 -
VUE 中的 AJAX 请求
1、如果我们通过全局配置了，请求的数据接口 根域名，则 ，在每次单独发起 http 请求的时候，请求的 url 路径，应该以相对路径开头，前面不能带 / ，否则 不会启用根路径做拼接； getAllList() { // 获取所有的品牌列表 // 分析： // 1. 由于已经导入了 Vue-resource这个包，所以 ，可以直接通过 this.$http 来发起数据请求 // 2. 根据接口API文档，知道，获取列表的时候，应该发起一原创 2020-07-17 16:18:17 · 523 阅读 · 0 评论 -
VUE 生命周期函数 beforeCreate、created、beforeMount、mounted
1、这是我们遇到的第一个生命周期函数,表示实例完全被创建出来之前,会执行它，注意:在 beforeCreate 生命周期函数执行的时候, data 和 methods 中的 数据都还没有初始化beforeCreate (){ // 这是我们遇到的第一个生命周期函数,表示实例完全被创建出来之前,会执行它 // 注意:在 beforeCreate 生命周期函数执行的时候, data 和 methods 中的 数据都还没有初始化},2、这是遇到的第二个生命周期函数，在 created 中,data原创 2020-06-22 20:33:58 · 10191 阅读 · 0 评论 -
VUE 自定义全局按键修饰符、使用 Vue.directive() 自定义全局的指令、自定义私有指令
1、自定义全局按键修饰符<label for="">试试 F2 ：<input type="search" @keyup.113="add"></label><label for="">试试 F2 ：<input type="search" @keyup.f2="add"></label>//自定义全局按键修饰符Vue.config.keyCodes.f2 = 113methods:{ add(){ alert(原创 2020-06-22 15:51:24 · 481 阅读 · 0 评论 -
VUE 中，过滤器的使用、全局和私有过滤器、字符串的padStart()方法使用
1、过滤器的定义语法,过滤器中的 function,第一个参数,已经被规定死了,永远都是 过滤器 管道符前面 传递过来的数据，过滤器调用的时候的格式 {{ name | 过滤器的名称 }}Vue.filter('过滤器的名称',function() {}) //过滤器中的 function,第一个参数,已经被规定死了,永远都是 过滤器 管道符前面 传递过来的数据 //过滤器调用的时候的格式 {{ name | 过滤器的名称 }} Vue.filter('过滤器的名称',function (d原创 2020-06-22 12:37:26 · 244 阅读 · 0 评论 -
VUE 中的搜索关键字
1、定义一个搜索框<label> 搜索关键字： <input type="search" name="" id="" value="" v-model="keywords"/></label>2、循环遍历，之前，v-for 中的数据，都是直接从 data 上的list中直接渲染过来的，现在，我们自定义了一个 search 方法，同时，把所有的关键字，通过传参的形式，传递给了 search 方法，在 search 方法内部，通过 执行 for 循环，把所有符合原创 2020-06-22 09:45:52 · 3968 阅读 · 1 评论 -
VUE 计算属性computed、
1、计算属性缓存 vs 方法基础例子1、computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；2、computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化，举例：购物车里面的商品列表和总金额之间的关系，只要商品列表里面的商品数量发生变化，或减少或增多或删除商品，总金额都应该发生变化。这里的这个总金额使用comput原创 2020-06-21 21:16:21 · 160 阅读 · 0 评论 -
VUE之 v-if 、v-else-if、和 v-show 的使用和特点
1、v-if 的特点：每次都会重新删除或创建元素2、v-if 有较高的切换性能消耗3、 如果元素可能永远也不会被显示出来被用户看到，则推荐使用 v-if4、v-show 的特点：每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式5、v-show 有较高的初始渲染消耗6、如果元素涉及到频繁的切换，最好不要使用 v-if，而是推荐使用 v-show<body> <div id="app"> <input type="but原创 2020-05-27 18:51:41 · 584 阅读 · 0 评论 -
VUE之v-for循环、key的使用和注意事项
1、v-for循环普通数组、对象数组<body> <div id="app"> <span v-for="item in list">{{item}}</span> <h3 v-for="(item,i) in list">索引值是：{{i}}------每一项是：{{item}}</h3> <h4 v-for="(user,h) in list2">索引值是：{{h}}------每一项是：{{us原创 2020-05-27 10:17:19 · 1904 阅读 · 0 评论 -
VUE之通过属性(v-bind :)绑定使用class样式
1、通过属性(v-bind :)绑定、数组的方法添加样式<h1 :class="['thin','italic',{'active':flag}]">若果flag为true就用这个类，是false就不用</h1>data:{ flag:true },2、通过属性(v-bind :)绑定、对象的方式添加样式<h1 :class="{red:true,thin:false,italic:true,active:false}">一世浮沉一刹那，一程山原创 2020-05-26 20:49:52 · 900 阅读 · 0 评论 -
VUE之v-cloak、v-text、v-html、v-bind绑定属性、v-on事件绑定、.stop阻止冒泡.prevent阻止默认.capture捕获触发事件v-model.self、 .once
1、 VUE之v-cloak、v-text、v-html、v-bind绑定属性、v-on事件绑定机制、.stop阻止冒泡、.prevent阻止默认行为、.capture捕获触发事件、.self只有点击当前元素时候、 .once只触发一次事件处理函数1、v-cloak能够解决 插值表达式闪烁的问题2、v-text默认没有闪烁的问题，会覆盖元素中原有的内容，但是，插值表达式只会替换自己的这个占位符，不会把整个元素的内容清空3、v-html会把内容中的HTML代码进行解析4、v-bind是Vue中，提供的原创 2020-05-26 19:25:02 · 455 阅读 · 0 评论