智享笔记 Vue
-
Promise常用API对象方法
<body> <script type="text/javascript"> /* Promise常用API-对象方法 */ // console.dir(Promise) function queryData(url) { return new Promise(function(resolve, reject){ var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if(xhr.readyState != 4) return; if(xhr.readyState == 4 &
-
Promise常用API实例方法
<body> <script type="text/javascript"> /* Promise常用API-实例方法 */ // console.dir(Promise); function foo() { return new Promise(function(resolve, reject){ setTimeout(function(){ // resolve(123); reject('error'); }, 100); }) } // foo() // .then(function(data){ // console.log(data) // }) // .c
-
then参数中的函数返回值
<body> <script type="text/javascript"> /* then参数中的函数返回值 */ function queryData(url) { return new Promise(function(resolve, reject){ var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if(xhr.readyState != 4) return; if(xhr.readyState == 4 && xhr.status == 200) { /
-
基于Promise发送Ajax请求并解决回调地狱问题
<body> <script type="text/javascript"> /* 基于Promise发送Ajax请求 */ function queryData(url) { var p = new Promise(function(resolve, reject){ var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if(xhr.readyState != 4) return; if(xhr.readyState == 4 && xhr.status == 200
-
Promise基本使用
<body> <script type="text/javascript"> /* Promise基本使用 */ // console.log(typeof Promise) // console.dir(Promise); var p = new Promise(function(resolve, reject){ // 这里用于实现异步任务 setTimeout(function(){ var flag = false; if(flag) { // 正常情况 resolve('hello'); }else{ // 异常情况 reject('出错了'); } }, 1
-
异步编程与Promise概述
<body> <div>前后端交互</div> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> /* 前后端交互-异步编程与Promise概述 */ // var ret = '---'; // $.ajax({ // url: 'http://localhost:3000/data', // success: function(data) { // ret = data; // cons
-
购物车案例完成列表组件更新商品数量下
<head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .container { } .container .cart { width: 300px; margin: auto; } .container .title { background-color: lightblue; height: 40px; line-height: 40px; text-align: center; /*color: #fff;*/ } .contai
-
购物车案例完成列表组件更新商品数量上
<head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .container { } .container .cart { width: 300px; margin: auto; } .container .title { background-color: lightblue; height: 40px; line-height: 40px; text-align: center; /*color: #fff;*/ } .contai
-
购物车案例完成列表组件删除商品功能
<head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .container { } .container .cart { width: 300px; margin: auto; } .container .title { background-color: lightblue; height: 40px; line-height: 40px; text-align: center; /*color: #fff;*/ } .contai
-
购物车案例完成标题和结算组件功能
<head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .container { } .container .cart { width: 300px; margin: auto; } .container .title { background-color: lightblue; height: 40px; line-height: 40px; text-align: center; /*color: #fff;*/ } .contai
-
购物车案例组件化布局
<head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .container { } .container .cart { width: 300px; margin: auto; } .container .title { background-color: lightblue; height: 40px; line-height: 40px; text-align: center; /*color: #fff;*/ } .contai
-
作用域插槽用法
<style type="text/css"> .current { color: orange; }</style><body> <div id="app"> <fruit-list :list='list'> <template slot-scope='slotProps'> <strong v-if='slotProps.info.id==3' class="current">{{slotProps.info.name}}</strong> <span v-else>{{slotP
-
具名插槽用法
<body> <div id="app"> <base-layout> <p slot='header'>标题信息</p> <p>主要内容1</p> <p>主要内容2</p> <p slot='footer'>底部信息信息</p> </base-layout> <base-layout> <template slot='header'> <p>标题信息1</p> <p>标题信息2</p&
-
插槽基本用法
<body> <div id="app"> <alert-box>有bug发生</alert-box> <alert-box>有一个警告</alert-box> <alert-box></alert-box> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* 组件插槽：父组件向子组件传递内容 */ Vue.
-
兄弟组件之间数据交互
<body> <div id="app"> <div>父组件</div> <div> <button @click='handle'>销毁事件</button> </div> <test-tom></test-tom> <test-jerry></test-jerry> </div> <script type="text/javascript" src="js/vue.js"></script> <script
-
子组件向父组件传值携带参数
<body> <div id="app"> <div :style='{fontSize: fontSize + "px"}'>{{pmsg}}</div> <menu-item :parr='parr' @enlarge-text='handle($event)'></menu-item> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"&g
-
子组件向父组件传值
<body> <div id="app"> <div :style='{fontSize: fontSize + "px"}'>{{pmsg}}</div> <menu-item :parr='parr' @enlarge-text='handle'></menu-item> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* 子组
-
父组件向子组件传值props属性值类型
<body> <div id="app"> <div>{{pmsg}}</div> <menu-item :pstr='pstr' :pnum='12' pboo='true' :parr='parr' :pobj='pobj'></menu-item> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* 父组件向子组件传值-pro
-
父组件向子组件传值props命名规则
<body> <div id="app"> <div>{{pmsg}}</div> <!-- 在html中是短横行方式 --> <menu-item :menu-title='ptitle'></menu-item> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* 父组件向子组件传值-props属性名规则 */ Vu