Vue
Binglili0809
这个作者很懒,什么都没留下…
展开
-
Vue-路由对象vue-router的基本使用
监听Hash值的改变切换不同组件hash值改变时触发window.onhashchange = function(){location.hash(获取hash值)}<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="../lib/vue-2.4.0.js"></script>原创 2021-01-12 15:32:51 · 233 阅读 · 0 评论 -
Vue-使用axios请求数据
<script src="../lib/axios.min.js"></script><script src="../lib/vue-2.4.0.js"></script><div id="app"> <input type="button" value="Get请求" @click="getInfo"> <input type="button" value="Post请求" @click="postInfo">&原创 2020-12-29 17:26:45 · 214 阅读 · 1 评论 -
Vue-(vue-resource请求数据),get、post请求,async await使用
<script type="text/javascript" src="../lib/vue-2.4.0.js"></script><script type="text/javascript" src="../lib/vue-resource-1.3.4.js"></script><div id="app"> <input type="button" value="Get请求" @click="getInfo" /> <原创 2020-12-29 16:41:05 · 1073 阅读 · 1 评论 -
Vue-生命周期(创建、运行、销毁)图示
原创 2020-12-29 11:47:01 · 189 阅读 · 0 评论 -
Vue-自定义指令(获取焦点、设置字体颜色指令实例)
<div id="app"><label> Id: <input type="text" v-model="id" /></label><label> 品牌: <input type="text" v-model="name" /></label><button type="button" @click="add">添加</button><br /><la原创 2020-12-23 16:52:57 · 1256 阅读 · 0 评论 -
Vue-过滤器(全局过滤器、私有过滤器)
<div id="app"> <h3>{{msg | strFilter('莫名其妙') | strFilter2}}</h3> <br /> </div><div id="app2"> <h3>{{msg2 | strFilter}}</h3></div>// 自定义一个全局过滤器// .filter('过滤器的名称', 过滤器的处理函数)// 过滤器的处理函数中参数1:原创 2020-12-23 15:55:03 · 129 阅读 · 0 评论 -
Vue-增加、删除、查询数据并在页面中显示(包含数组的filter方法)
<div id="app"> <label> Id: <input type="text" v-model="id" /> </label> <label> 品牌: <input type="text" v-model="name" /> </label> <button type="button" @click="add">添加</button> <br原创 2020-12-07 16:37:37 · 463 阅读 · 0 评论 -
Vue(v-if、v-show的使用)
1、v-if 和v-show 只有一个作用,就是根据指定的标识符,切换元素的显示和隐藏状态2、v-if 是通过实时的创建或移除元素,从而达到元素的显示和隐藏3、v-show 是通过为元素添加或移除 display: none来实现隐藏和显示4、如果元素需要频繁的切换显示和隐藏,使用v-show更合适。如果元素被创建出来之后,可能不会进行状态的切换,使用v-if更合适5、v-show有更高的初始渲染消耗,而v-if有更高的切换消耗<div id="app"> {{flag}} ---原创 2020-12-07 14:58:59 · 264 阅读 · 0 评论 -
Vue-(v-for循环的使用)
for循环数组、对象数组<div id="app"> <!-- v-for循环数组,(item值每一项) --> <ul> <li v-for="item in list">{{ item }}</li> </ul> <ul> <!-- i 是索引 --> <li v-for="(item,i) in list">{{ item + '=======' + i}}</l原创 2020-12-07 14:37:14 · 201 阅读 · 0 评论 -
Vue-样式设置(style、class)
class样式.red{ color: red;}.weight{ font-weight: 200;}.border{ border: 1px solid #FFD700;}<div id="app"> <!-- 直接传递一个数组,这里的class要使用v-bind做数据绑定 --> <!-- <h1 :class="['red', 'weight']">这是一个大大的h1</h1> --> <!-- 在数组原创 2020-12-07 11:48:12 · 431 阅读 · 0 评论 -
Vue-双向数据绑定(v-model)
<div id="app"> <h4>{{ msg }}</h4> <!-- v-bind 只能实现数据的单向绑定, 从 M 自动绑定到 V,不能实现数据的双向绑定 --> <input type="text" v-bind:value="msg" style="width: 300px;" /> <!-- v-model 实现数据的双向绑定 --> <!-- 只能在表单元素中使用 --> <input原创 2020-12-07 11:28:24 · 79 阅读 · 0 评论 -
Vue-事件修饰符(.stop、.prepent、.capture、.self、.once)
<div id="app"> <!-- .stop阻止冒泡行为 --> <!-- <div class="innerDiv" @click="innerClick"> <input type="button" value="按钮" @click.stop="btnClick" /> </div> --> <!-- .prevent 阻止默认事件 --> <!-- &原创 2020-12-07 11:25:06 · 180 阅读 · 0 评论