2019年05月_Chestnut*

原创 Axios

AxiosAxios是基于Promise的HTTP请求，可以用在浏览器和node.js中。Features1.从浏览器中创建XMLHttpRequests2.从node.js中创建http请求3.支持Promise API4.拦截请求和相应5.转换请求数据和响应数据6.取消请求7.自动转换JSON数据8.客户端支持防御XSRFAxios官方API拦截器在请求或响应被 th...

2019-05-14 10:12:03 87

原创 Vue中全局守卫

Vue 全局守卫使用全局守卫简单举个例子实现用户是否需要登陆 <div id="app"> <router-link to="home">首页</router-link> <router-link to="blog">我的博客</router-link> <!-- <a h...

2019-05-12 17:34:45 868

原创 Vue 获取DOM元素，给DOM增加事件的特殊情况

Vue 获取DOM元素，给DOM增加事件的特殊情况给标签绑定ref属性使用this.$refs.xxx 获取原生的jsDOM对象ref属性值不能重名 Vue.component('subCom',{ template:`<div class="subCom"></div>` }) var App = { temp...

2019-05-12 17:23:58 4634

原创 Vue 生命周期

Vue 生命周期举了个例子，可以在控制台看输出的结果，就一目了然了<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1...

2019-05-12 17:18:00 92

原创 Vue 计算属性

Vue 计算属性（computed）简单实现利用计算属性的方法实现点击切换音频 <div id="app"> <audio :src="getCurrentSrc" autoplay controls></audio> <ul> <li v-for="(item,index) in...

2019-05-12 17:14:47 233

原创 Vue Watch监听

Vue Watch监听watch监听单个属性基本数据类型是简单监视，复杂的数据类型深度监视 <div id="app"> <input type="text" v-model="msg"> <h3>{{msg}}</h3> <button @click="arr[0].name='小板栗'">点击</bu...

2019-05-12 17:11:00 191

原创 Vue 过滤器的使用

Vue 过滤器的使用作用：为页面中数据进行添油加醋的功能有两种：1.局部过滤器 2.全局过滤器<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ...

2019-05-04 21:52:07 154

原创 Vue父子组件之间的通信

Vue父子组件之间的通信创建两个全局组件1.Parent 2. Child父组件往子组件通信现在父组件中绑定自定义属性在子组件中使用props接收父组件传递的数据在子组件中可以任意使用Vue.component('Child',{ template:`<div> <p>我是子组件</p> <input type="...

2019-05-03 14:37:46 110

原创 Vue全局组件的创建

Vue全局组件的创建//全局组件Vue.component("App",{ data(){ return { msg:"我是全局组件" } }, template:`<div>{{msg}}</div>`})new Vue({ el:"#app", components:{ App }, template:`<App>&...

2019-05-03 14:13:04 192

原创 vue v-model：双向数据绑定

v-model：双向数据绑定v-model: 双向数据绑定的体现,只会体现在有value属性的它是v-bind:value v-on:input 的体现<div id=”#app”>  <input type=”text” :value=”msg” @input...

2019-05-02 22:24:25 193

原创 Vue指令系统

Vue指令系统1: v-test: innerText2: v-html: innerHTML3: v-if: 数据属性对应的值，如果为假不渲染，如果为真则渲染 appendChild()、removeChild();4：v-show: 控制DOM元素显示隐藏，display:none|block;项目中如果频繁使用切换，建议使用v-show, 如果运行条件很少改变，则使用v-if,...

2019-05-02 22:19:32 83

weixin_43830188的博客