zoukankan      html  css  js  c++  java
  • vue.js

    vue:
    读音: v-u-e
    view


    vue到底是什么?
    一个mvvm框架(库)、和angular类似
    比较容易上手、小巧
    mvc:
    mvp
    mvvm
    mv*
    mvx
    官网:http://cn.vuejs.org/
    手册: http://cn.vuejs.org/api/


    vue和angular区别?
    vue——简单、易学
    指令以 v-xxx
    一片html代码配合上json,在new出来vue实例
    个人维护项目


    适合: 移动端项目,小巧


    vue的发展势头很猛,github上start数量已经超越angular
    angular——上手难
    指令以 ng-xxx
    所有属性和方法都挂到$scope身上
    angular由google维护

    合适: pc端项目


    共同点: 不兼容低版本IE
    -------------------------------------------
    vue基本雏形:
    angular展示一条基本数据:
    var app=angular.module('app',[]);


    app.controller('xxx',function($scope){ //C
    $scope.msg='welcome'
    })


    html:
    div ng-controller="xxx"
    {{msg}}
    vue:
    html:
    <div id="box">
    {{msg}}
    </div>


    var c=new Vue({
    el:'#box',  //选择器  class tagName
    data:{
       msg:'welcome vue'
    }
    });
    常用指令:
    angular: 
    ng-model   ng-controller
    ng-repeat
    ng-click
    ng-show  


    $scope.show=function(){}
    指令: 扩展html标签功能,属性


    v-model  一般表单元素(input) 双向数据绑定


    循环:
    v-for="name in arr"
    {{$index}}


    v-for="name in json"
    {{$index}}  {{$key}}

    v-for="(k,v) in json"
    事件:
    v-on:click="函数"


    v-on:click/mouseout/mouseover/dblclick/mousedown.....


    new Vue({
    el:'#box',
    data:{ //数据
       arr:['apple','banana','orange','pear'],
       json:{a:'apple',b:'banana',c:'orange'}
    },
    methods:{
       show:function(){ //方法
           alert(1);
       }
    }
    });
    显示隐藏:
    v-show=“true/false”
    bootstrap+vue简易留言板(todolist):

    bootstrap: css框架 跟jqueryMobile一样
    只需要给标签 赋予class,角色
    依赖jquery


    确认删除?和确认删除全部么?
    -----------------------------------------
    事件:
    v-on:click/mouseover......

    简写的:
    @click=""  推荐


    事件对象:
    @click="show($event)"
    事件冒泡:
    阻止冒泡:  
    a). ev.cancelBubble=true;
    b). @click.stop 推荐
    默认行为(默认事件):
    阻止默认行为:
    a). ev.preventDefault();
    b). @contextmenu.prevent 推荐
    键盘:
    @keydown  $event ev.keyCode
    @keyup


    常用键:
    回车
    a). @keyup.13
    b). @keyup.enter
    上、下、左、右
    @keyup/keydown.left
    @keyup/keydown.right
    @keyup/keydown.up
    @keyup/keydown.down
    .....
    -----------------------------------------
    属性:
    v-bind:src=""
    width/height/title....

    简写:
    :src=""  推荐


    <img src="{{url}}" alt=""> 效果能出来,但是会报一个404错误
    <img v-bind:src="url" alt=""> 效果可以出来,不会发404请求
    -----------------------------------------
    class和style:
    :class=""  v-bind:class=""
    :style=""  v-bind:style=""


    :class="[red]" red是数据
    :class="[red,b,c,d]"

    :class="{red:a, blue:false}"


    :class="json"

    data:{
    json:{red:a, blue:false}
    }
    --------------------------
    style:
    :style="[c]"
    :style="[c,d]"
    注意:  复合样式,采用驼峰命名法
    :style="json"
    -----------------------------------------
    模板:
    {{msg}}  数据更新模板变化
    {{*msg}}  数据只绑定一次

    {{{msg}}}  HTML转意输出
    -----------------------------------------
    过滤器:-> 过滤模板数据
    系统提供一些过滤器:

    {{msg| filterA}}
    {{msg| filterA | filterB}}


    uppercase  eg: {{'welcome'| uppercase}}
    lowercase
    capitalize


    currency  钱


    {{msg| filterA 参数}}


    ....
    -----------------------------------------
    交互:
    $http (ajax)


    如果vue想做交互


    引入: vue-resouce


    get:
    获取一个普通文本数据:
    this.$http.get('aa.txt').then(function(res){
       alert(res.data);
    },function(res){
       alert(res.status);
    });
    给服务发送数据:√
    this.$http.get('get.php',{
       a:1,
       b:2
    }).then(function(res){
       alert(res.data);
    },function(res){
       alert(res.status);
    });
    post:
    this.$http.post('post.php',{
       a:1,
       b:20
    },{
       emulateJSON:true
    }).then(function(res){
       alert(res.data);
    },function(res){
       alert(res.status);
    });
    jsonp:
    https://sug.so.360.cn/suggest?callback=suggest_so&word=a


    https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=jshow


    this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
       wd:'a'
    },{
       jsonp:'cb'  //callback名字,默认名字就是"callback"
    }).then(function(res){
       alert(res.data.s);
    },function(res){
       alert(res.status);
    });
     
     
  • 相关阅读:
    三角函数
    第十七次作业
    第十六次作业
    第15次作业
    第13次java作业
    第十二次java作业
    第十一次java作业
    第十次java作业
    第九次java
    第八次java作业
  • 原文地址:https://www.cnblogs.com/chaofei/p/7688526.html
Copyright © 2011-2022 走看看