[关闭]
@GivenCui 2017-06-05T15:11:39.000000Z 字数 5108 阅读 899

Vue.js学习

Vue

相关链接和知识点关键词摘要

链接

知识点关键词摘要

  1. 双向绑定的实现原理
  2. virtual DOM的原理

2016智能社Vue视频学习记录

class1

基本结构

一片html代码配合上json，在new出来vue实例

  1. var vm = new Vue({
  2.     el:'#box',    // 选择器
  3.     data:{        // 数据  (属性)
  4.         arr:['apple','banana','orange','pear'],
  5.         json:{a:'apple',b:'banana',c:'orange'}
  6.     },
  7.     methods : {   // 方法
  8.         show : function() { console.log(123) }
  9.     }
  10. });

vue实例属性和方法

Vue 实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 $

  1. var vm = new Vue({
  2.   el: '#example',
  3.   data: {
  4.         a : 123,
  5.         b : 'test'
  6.     }
  7. })
  8. vm.$data === data // -> true
  9. vm.$el === document.getElementById('example') // -> true
  10. // $watch 是一个实例方法
  11. vm.$watch('a', function (newVal, oldVal) {
  12.   // 这个回调将在 `vm.a`  改变后调用
  13. })

模板语法

  2. /* ============ 
  3.     v-for 
  4.    ============*/
  5. <ul>
  6.     <li v-for="value in arr">
  7.         {{value}}   {{$index}}
  8.     </li>
  9. </ul>
  11. <ul>
  12.     <li v-for="value in json">
  13.         {{value}}   {{$index}}  {{$key}}
  14.     </li>
  15. </ul>
  17. <ul>
  18.     <li v-for="(k,v) in json">
  19.         {{k}}   {{v}}   {{$index}}  {{$key}}
  20.     </li>
  21. </ul>

demo-简易留言板(todoList)

技术要点: Bootstrap
总结: Vue是以数据驱动view, 业务逻辑在于改变数据,几乎用不到dom操作

Bootstrap模态框
  1. <!-- data-toggle:弹出, data-target:弹出对象 -->
  2. <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer">删除</button>
  4. <!-- 模态框 弹出框 -->
  5. <!-- data-dismiss: 关闭自身  id对应data-target -->
  6. <div role="dialog" class="modal fade bs-example-modal-sm" id="layer">
  7.     <div class="modal-dialog">
  8.         <div class="modal-content">
  9.             <div class="modal-header">
  10.                 <button type="button" class="close" data-dismiss="modal">
  11.                     <span>&times;</span>
  12.                 </button>
  13.                 <h4 class="modal-title">确认删除么?</h4>
  14.             </div>
  15.             <div class="modal-body text-right">
  16.                 <button data-dismiss="modal" class="btn btn-primary btn-sm">取消</button>
  17.                 <button data-dismiss="modal" class="btn btn-danger btn-sm">确认</button>
  18.             </div>
  19.         </div>
  20.     </div>
  21. </div>
v-show的应用场景

v-if适合第一次渲染的情况, 或变动小的情况
v-show适合显示,隐藏;频繁切换的情况

  1. <tr v-show="myData.length!=0">
  2.     <td colspan="4" class="text-right">
  3.         <button class="btn btn-danger btn-sm">删除全部</button>
  4.     </td>
  5. </tr>
  6. <tr v-show="myData.length==0">
  7.     <td colspan="4" class="text-center text-muted">
  8.         <p>暂无数据....</p>
  9.     </td>
  10. </tr>

demo-百度下拉列表

技术要点: vue-resource.js (ajax的get,post,jsonp等)
总结: 客户端通过get,post,jsonp等方式与服务器数据交互(服务器进行数据库的CURD操作)

  1. // 精华:
  2. <li v-for="value in myData" :class="{gray:$index==now}">
  3.     {{value}}
  4. </li>
  1. new Vue({
  2.     el:'body',
  3.     data:{
  4.         myData:[],
  5.         t1:'',
  6.         now:-1
  7.     },
  8.     methods:{
  9.         get:function(ev){
  10.             // 排除上下键时出发多余的请求
  11.             // 太经典了
  12.             if(ev.keyCode==38 || ev.keyCode==40)return;
  14.             // 回车选中后跳转
  15.             if(ev.keyCode==13){
  16.                 window.open('https://www.baidu.com/s?wd='+this.t1);   // 打开新窗口跳转
  17.                 // location.href = 'https://www.baidu.com/s?wd='+this.t1;   // 原页面跳转
  18.                 this.t1='';
  19.             }
  21.             // jsonp请求部分
  22.             this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
  23.                 wd:this.t1
  24.             },{
  25.                 jsonp:'cb'
  26.             }).then(function(res){
  27.                 this.myData=res.data.s;
  28.             },function(){
  30.             });
  31.         },
  32.         changeDown:function(){
  33.             this.now++;
  34.             if(this.now==this.myData.length)this.now=-1;  // 最后一个调到最上面
  35.             this.t1=this.myData[this.now];  // this.myData[-1] = undefined
  37.         },
  38.         changeUp:function(){
  39.             this.now--;
  40.             if(this.now==-2)this.now=this.myData.length-1;
  41.             this.t1=this.myData[this.now];
  42.         }
  43.     }
  44. });
  46. <!-- HTML -->
  47. <div id="box">
  48.     <input type="text" v-model="t1" @keyup="get($event)" @keydown.down="changeDown()" @keydown.up.prevent="changeUp()"><!--阻止按上键输入框中的光标移动-->
  49.     <ul>
  50.         <li v-for="value in myData" :class="{gray:$index==now}">
  51.             {{value}}
  52.         </li>
  53.     </ul>
  54.     <p v-show="myData.length==0">暂无数据...</p>
  55. </div>
vue-resource的用法

$ajax和基本http概念
vue-resource全攻略
API

  1. /* Response的API */
  2. {
  3.   // Constructor
  4.   constructor(any: body, object: {string: url, object: headers, number: status, string: statusText})
  6.   // Properties
  7.   url (string)
  8.   body (any)
  9.   headers (Headers)
  10.   ok (boolean)
  11.   status (number)
  12.   statusText (string)
  14.   // Methods
  15.   blob() (Promise)
  16.   text() (Promise)
  17.   json() (Promise)
  18. }
http和$http
  1. // 基于全局Vue对象使用http
  2. Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);
  3. Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);
  5. // 在一个Vue实例内使用$http
  6. this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);
  7. this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);
GET
  1. /* get:获取数据 */
  2. /* 通过get获取本地的a.txt中的内容 */
  3. new Vue({
  4.     el:'body',
  5.     data:{
  7.     },
  8.     methods:{
  9.         get:function(){
  10.             this.$http.get('a.txt').then(function(res){
  11.                 alert(res.data);
  12.             },function(res){
  13.                 alert(res.status);
  14.             });
  15.         }
  16.     }
  17. });
  1. /* get:向服务器发送数据 */
  2. /* get(url, option)中option为get所传参数 */
  3. new Vue({
  4.     el:'body',
  5.     data:{
  7.     },
  8.     methods:{
  9.         get:function(){
  10.             this.$http.get('get.php',{
  11.                 a:1,
  12.                 b:2
  13.             }).then(function(res){
  14.                 alert(res.data); // 3 (a + b)
  15.             },function(res){
  16.                 alert(res.status);
  17.             });
  18.         }
  19.     }
  20. });
  22. /* get.php */
  23. <?php
  24. $a=$_GET['a'];
  25. $b=$_GET['b'];
  26. echo $a+$b;
  27. ?>
POST
  1. new Vue({
  2.     el: 'body',
  3.     data: {},
  4.     methods: {
  5.         get: function () {
  6.             this.$http.post('post.php', {
  7.                 a: 1,
  8.                 b: 20
  9.             }, {
  10.                 headers: {
  11.                     "X-Requested-With": "XMLHttpRequest"
  12.                 },
  13.                 emulateJSON: true   // 启用该选项后，请求会以application/x-www-form-urlencoded作为MIME type
  14.             }).then(function (res) {
  15.                 alert(res.data);
  16.             }, function (res) {
  17.                 alert(res.status);
  18.             });
  19.         }
  20.     }
  21. });
  23. /* post.php */
  24. <?php
  25. $a=$_POST['a'];
  26. $b=$_POST['b'];
  27. echo $a-$b;
  28. ?>
JSONP
  • JSONP只支持GET方法， CORS（跨域资源共享）支持GET、POST、PUT、DELETE，但不支持老旧浏览器
  • callback函数的函数名由服务端决定
  • CORS浏览器支持情况可在caniuse.com中查询
  • JSONP相当于GET方法, 所以不用写 emulateJSON: true
  1. /* 百度输入框输入a,获得的链接简化后得到 */
  2. /* 参数解析:
  3.     wd=a  --> "wd":"a"
  4.     cb=jshow  --> cb为回调函数名,  jshow随便改对数据无影响
  5. */
  6. https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=jshow
  8. /* 返回的数据为
  9. jshow({q:"a",p:false,s:["爱奇艺","阿里巴巴批发网","airbnb","acfun","阿里云","阿里云邮箱","阿里妈妈","安居客","阿里巴巴","安全教育平台"]});
  10. */
  13. new Vue({
  14.     el:'body',
  15.     data:{
  17.     },
  18.     methods:{
  19.         get:function(){
  20.             this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
  21.                 wd:'a'
  22.             },{
  23.                 jsonp:'cb'    // callback函数的函数名, 默认值为callback,默认值可以省略
  24.             }).then(function(res){
  25.                 alert(res.data.s);
  26.             },function(res){
  27.                 alert(res.status);
  28.             });
  29.         }
  30.     }
  31. });

class2

lifecycle.png-114kB

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注