• vue.js笔记1.0


    事件:

      事件冒泡行为:

        1、@click="show($event)"

          show:function (ev) {

            ev.cancelBubble=true;

          }

         2、@click.stop="show()"

      事件捕获行为:

        <div v-on:click.capture="doThis">...</div>

      连用:<a v-on:click.stop.prevent="doThat"></a>

      事件默认行为:

        1、ev.preventDefault();

        2、@contextmenu.prevent 

       键盘事件行为:

        1、@keydown  可以有 $event ev.keycode

        2、@keyup

        3、回车键@keyup.13或者@keyup.enter;@keydown.13,@keydown.enter

          同理有上下左右键up,down,left,right.还有space,esc,delete,tab

    属性:

        v-bind:src=""   width/height/title等

        简写::src=""

        <img :src="url" alt=">

        class与style:

          :class   v-bind:class=""

          :style   v-bind:style=""

          :class="[r,b,c]" r,b,c是data中的数据

          :class="[r]"

          :class="{r:true}"添加上class

          :class="{r:false,b:true}"没添加上class r,只添加了b

     模板:

        {{msg}}  数据更新模板变化

        {{*msg}} 数据只绑定一次

        {{{msg}}} HTML转义输出

    过滤器:

        在1.0中系统提供一些过滤器:

        capitalize,uppercase,lowercase,currency 表示钱,debounce:配合事件,延迟执行  ,json:转化为json格式。

       在2.0中内置过滤器全部删除了。

    例:   new Vue({

          el:'#box',

          data:{

            a:{name:'strive',age:'18'}

          }

        });

        <div id="#box">

          {{a |json}}

        </div>

         例: {{'welcome'|capitalize}} {{'welcome'|uppercase}} {{'WELCOME'|lowercase|capitalize}}

          {{ message | filterA }}

          {{ message | filterA | filterB }}       

          {{msg|currency '参数' }}

         例: {{12|currency '¥'}} 结果 ¥12.00

            {{12|currency}} 结果 $12.00

       例: <input type='text' @keyup="show | debounce 1000">表示1000毫秒后执行函数show();

        数据配合使用过滤器:

        limitBy:限制几个

        使用:limitBy 参数  ------>一个参数表示限制几个

           limitBy 参数 参数 ------>两个参数,第一个表示限制几个,第二个表示开始位置

        例:<li v-for="val in arr |limitBy 2">{{val}}</li>//显示前两个

        <li v-for="val in arr |limitBy 2 1">{{val}}</li>//从第二个开始显示到第三个

          

        filterBy 参数 过滤数据

        <li v-for="val in arr |filterBy 'a'">{{val}}</li>//如果arr数组中包含["background","blue","apple","red"],则会输出 background,apple

        orderBy 参数 排序

         orderBy 1从小到大排序 即正序

         orderBy -1倒序

       

        自定义过滤器1.0:

        Vue.filter('名称',function(input,a,b){

          return ;

        });

        例:{{input| toDo a b}}

        Vue.filter('toDo',function(a,b){});

        Vue.filter('date',function (input) {
          var oDate=new Date(input*1000);
          return oDate.getFullYear()+'-'+oDate.getMonth()+1+'-'+oDate.getDate()+' ''+oDate.getHours()+':'+oDate.getMinutes()+':'+oDate.getSeconds();
        });

        自定义过滤器2.0:

       {{input| toDo (a, b)}}

        

    交互:

      需要引入vue-resource.js,  ajax  php

      this.$php.get()/post()/jsonp()

      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);
        });

      this.$http({

        url:地址

        data:给后台提交数据

        method:默认'get',可以添加'post'/'jsonp'

        jsonp:'cb' //cbName

        });

    vue的生命周期:

      钩子函数:1.0

        create:实例已经创建 

        beforeCompile:编译之前

        compiled:编译之后

        ready:插入到文档中

        beforeDestroy:销毁之前

        Destroyed:销毁之后

      在2.0中变化:

        beforeCreate 组件刚刚被创建,属性都没有

        created  实例已经创建完成,属性已经绑定

        beforeMount  编译模板之前

        mounted  编译模板之后

        beforeUpdate  组件更新之前

        updated  组件更新之后

        beforeDestroy  组件销毁之前

        destroyed  组件销毁之后

    用户会看到花括号:

      1、 v-cloak :防止闪烁。比较大的段落中使用。添加到标签中类似属性

        在style中将v-cloak属性 display:none;

      2、用v-text代替{{}}

      3、用v-html代替{{{}}}

    ----------------------------------------------------------------------------

    计算属性的使用:

      data:{
        t1:'',
      },
      computed:{
        t2:function () {//默认为get方法
          return t1+"bbbb";
        }
      }, 

      t2也是属性,computed中放置业务逻辑代码,return 值很重要

      computed:{
        t2:{

          get:function(){

            return t1+"bb";

          },

          set:function(){

            this.t1='aaaa'

          }
         
        }
      },

    ---------------------------------------------------------------------

    vue实例:

      var vm=new Vue({});

      vm.$el:元素

      vm.$data:就是数据data

      vm.$mount:手动挂载vue程序

      vm.$options.aabb:aabb为自定义属性,options专门调用自定义属性

      vm.$destroy:销毁对象

      vm.$log():查看现在数据的状态

    --------------------------------------------------------

    关于循环:

      v-for="value in data" 

     在vue 1.0中value会有重复数据 ,当需要加载重复数据是,需要加track-by='索引' 可以提供循环性能

      例如<li v-for="(value,index) in arr" track-by="index">

      在2.0中for循环默认会把重复数据加载出来。

    自定义指令:

        Vue.directive(指令名称(red),function(参数el){

          this.el:原生的DOM元素

        });

        <div v-red="参数"></div>

        指令名称:v-red ----->写成red

     

    自定义元素指令:用处不大

        Vue.elementDirective(元素名称,{bind:function(){}});

    自定义键盘指令1.0中:

      Vue.directive('on').keyCodes.ctrl=17//自定义ctrl键,通过@keyup.ctrl=""来使用

     在2.0中:Vue.comfig.keyCodes.ctrl=17;

    监听数据变化:

      vm.$el/$mount/$options/...

      vm.$watch(name,fncb);浅度

      vm.$watch(name.fncb,{deep:true});//深度监视

    ---------------------------------------------------

    vue过渡动画:

      本质是css3:transition,animation

      <div id="div1" v-show="bSign" transition="fade"></div>

     动画:

            名称规定: .fade-transition{

              transition: 1s all ease;

             }

       进入动画: .fade-enter{

              opacity:0;

             }

       退出动画: .fade-leave{

              opacity:0;

            }

    -----------------------------------------------

    vue组件:  

      全局组件:

        组件里面放数据,函数必须返回一个对象json。注意要确保在初始化根实例之前注册了组件:

        Vue.component('my-component',{

          data(){

            return {msg:'A custom component!'} 

          },

          methods:{

            change(){

              this.msg='hello';

            }

          }

          template: '<div @click="change" v-text="msg"></div>'

        });

        new Vue({

          el:'#box'

        })

      使用:<my-component><my-component/>

     

       

       局部组件: 通过使用组件实例选项注册,可以使组件仅在另一个实例/组件的作用域中可用:

        var Child = {
          template: '<div>A custom component!</div>'
        }

        new Vue({

          el:'#box',

          components:{

            'my-component':Child

          }

        });

    -------------------------------------------------------

    配合模板使用:

     方式一: 

    <script type="x-template" id="aaa">
        <h2 @click="change" v-text="msg"></h2>
        <ul>
            <li>1111</li>
            <li>1111222</li>
            <li>111333</li>
            li>4444</li>
        </ul>
    </script>        

     方式二: 

        <template id="aaa">
            <ul>
                <li v-for="value in arr"></li>
            </ul>
    </template> new Vue({ el:'#box', components:{ 'my-component':{ data(){ return { msg:'A custom component!', arr:['aa','bb','cc'] } },        methods:{ change(){ this.msg='hello'; } }, template: '#aaa' } } });

       动态组件:

          <component :is="组件名称"></component> 

  • 相关阅读:
    linux 网络相关
    工作随笔
    python
    trouble-shooting
    MySQL常见问题总结
    根据 Request 获取客户端 IP
    文件上传按钮优化
    Linux中RabbitMQ安装
    linux 完全卸载MySQL
    Linux 下安装 MySQL-5.7.24
  • 原文地址:https://www.cnblogs.com/yuxingyoucan/p/6918563.html
Copyright © 2020-2023  润新知