随笔分类 - vue
1
摘要：async/await时ES7引入的新语法，async关键字用于函数上（async函数的返回值时Promise实例对象），await关键字用于async函数中（await可以得到异步的结果） async function queryData() { var res = await new Promi
阅读全文
摘要：1、请求拦截器 在请求发出之前设置一些信息 axios.interceptors.request.use(function(config) { console.log(config.url); config.headers.mytoken = 'nihao'; // 设置请求头 return con
阅读全文
摘要：axios是一个第三方库文件，具有以下特征： （1）支持浏览器和node （2）支持Promise （3）能拦截请求和响应 （4）自动转换JSON数据 1、axios的基本用法 axios.get('http://localhost:3000/adata').then(function(res) {
阅读全文
摘要：fetch可以更加简单的获取数据，可以看作Ajax的升级版，是基于Promise实现的 1、使用语法 <script> fetch('http://localhost:3000/fdata').then(function(data) { return data.text(); // 通过调用text
阅读全文
摘要：1、实例方法 （1）.then 得到异步任务的正确结果 （2）.catch 获取异常信息 （3）.finally 成功与失败都会执行 <script> function foo() { return new Promise(function(resolve, reject) { // resolve
阅读全文
摘要：1、处理原生Ajax <script> function queryData(url) { var p = new Promise(function(resolve, reject) { var xhr = new XMLHttpRequest(); xhr.onreadystatechange =
阅读全文
摘要：在编程中会存在异步的问题 常见异步调用的情况：（1）定时任务 （2）Ajax （3）事件函数 多次调用异步函数会出现的情况 （1）多次异步调用的结果顺序不确定 （2）异步调用结果如果存在依赖需要嵌套 如以下情况（多层嵌套，可读性不好） <script> $.ajax({ url: 'http://l
阅读全文
摘要：1、父组件向子组件传递内容 <div id="app"> <alert-box>警示框</alert-box> <alert-box>有一个警告</alert-box> <alert-box></alert-box> <!-- 没有内容 显示默认内容 --> </div> <script src="
阅读全文
摘要：1、父组件向子组件传值 组件内部通过props接受传递过来的值 props属性名规则 在props中使用驼峰形式，模板中需要使用短横线的形式 在字符串形式的模板中没有这个限制 <div id="app"> <div>{{pmsg}}</div> <test-con title="来自父组件的值" c
阅读全文
摘要：自定义过滤器 Vue.filter('过滤器名称', function(value) { // 业务逻辑 }); 过滤器的使用 <div>{{msg | upper}}</div> <div>{{msg | upper | lower}}</div> <div :abc="msg | upper">
阅读全文
摘要：侦听器常用于数据变化时执行异步操作或耗时较长的操作 侦听器的用法： var vm = new Vue({ el: '#app', data: { fristName: 'xukun', lastName: 'cai', fullName: 'xukun cai' }, watch: { fristN
阅读全文
摘要：表达式的计算逻辑可能会比较复杂，使用计算属性可是模板内容更加简洁 1、计算属性的用法 <body> <div id="app"> <div>{{reversed}}</div> </div> <script src="../js/vue.js"></script> <script> var vm =
阅读全文
摘要：vue为我们提供了自定义指令功能 自定义指令语法规则 Vue.directive('自定义指令名' , { inserted: function(el) { // el 获取到的元素 el.focus(); } }) 带参数的自定义指令 <input type="text" v-color="col
阅读全文
摘要：number：转化为数值 <input type="text" v-model.number="age"> <script src="../js/vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { age: '' } }
阅读全文
摘要：单行文本 <input type="text" v-model="uname"> <script src="../js/vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { uname: 'lisi' } }) </scr
阅读全文
摘要：循环结构 v-for遍历数组 <div :key="index" v-for="(item,index) in fruit">{{item}}</div> <script src="../js/vue.js"></script> <script> var vm = new Vue({ el: '#a
阅读全文
摘要：1、分支结构 · v-if · v-else · v-else-if · v-show v-if控制元素是否渲染到页面 v-show控制元素是否下显示（已经渲染到了页面） <div id="app"> <div v-if="sorce"> 90">优秀</div> <div v-else-if="s
阅读全文
摘要：1、class样式处理 对象语法 <div v-bind:class="{active: isActive, bg: isBg}">测试内容</div> <script src="../js/vue.js"></script> <script> var vm = new Vue({ el: '#ap
阅读全文
摘要：Vue动态处理属性 v-bind指令 <a v-bind:href="url">链接</a> <script src="../js/vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { url: 'http://www.b
阅读全文
摘要：什么是指令呢？指令本质就是自定义属性，指令的格式都以v-开始 1. v-cloak指令：插值表达式中存在的问题：“闪动”，原理：先通过样式隐藏内容，然后在内存中替换值，替换好后在显示最终的结果。 用法 [v-cloak] { display: none; } <div id="box" v-cloa
阅读全文
1
浙公网安备 33010602011771号