事件:

  事件冒泡行为:

    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> 

vue.js笔记1.0的更多相关文章

  1. vue.js笔记总结

    一份不错的vue.js基础笔记!!!! 第一章 Vue.js是什么? Vue(法语)同view(英语) Vue.js是一套构建用户界面(view)的MVVM框架.Vue.js的核心库只关注视图层,并且 ...

  2. 珠峰2016,第9期 vue.js 笔记部份

    在珠峰参加培训好年了,笔记原是记在本子上,现在也经不需要看了,搬家不想带上书和本了,所以把笔记整理下,存在博客中,也顺便复习一下 安装vue.js 因为方便打包和环境依赖,所以建意npm  init  ...

  3. vue.js笔记

    一.v-bind 缩写 <!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> &l ...

  4. Vue.js笔记 — vue-router路由懒加载

    用vue.js写单页面应用时,会出现打包后的JavaScript包非常大,影响页面加载,我们可以利用路由的懒加载去优化这个问题,当我们用到某个路由后,才去加载对应的组件,这样就会更加高效,实现代码如下 ...

  5. Vue.js 笔记之 img src

    固定路径(原始html) index.html如下,其中,引号""里面就是图片的路径地址 ```<img src="./assets/1.png"> ...

  6. 奇舞js笔记——第0课——如何写好原生js代码

    摘要 1.好的代码职责要清晰,javscript不要用来操作样式: 2.API要设计的合理:通用性,适度的抽象(数据抽象,过程抽象),可扩展性: 3.效率问题:用好的.合适的算法(前端程序员要把自己当 ...

  7. vue.js 笔记

    <!-- 多层for循环 --> <ul> <li v-for="(ite,key) in list2"> {{key}}-------{{it ...

  8. node npm vue.js 笔记

    cnpm 下载包的速度更快一些. 地址:http://npm.taobao.org/ 安装cnpm: npm install -g cnpm --registry=https://registry.n ...

  9. 窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼?

    引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...

随机推荐

  1. JXl常用解析详解

    目的: java解析 excel 无非就是apache poi 或者 jxl 两者在使用上其实都差不多,关键还是看你自己熟悉那个,用那个!我也是初次接触jxl 看很多博客说 jxl只适用于处理小数据量 ...

  2. Exploring refit, an automatic type-safe REST library for .NET Standard

    自动类型安全的.NET标准REST库refit   在SCOTT HANSELMAN 博客上看到一个好东西<Exploring refit, an automatic type-safe RES ...

  3. JavaSE---悲观锁与乐观锁

    1.[悲观锁] 1.1 在数据处理的整个过程中,数据将处于锁定状态: 1.2 悲观锁的实现,依赖于数据库提供的锁机制(只有数据库提供的锁机制才能真正保证数据访问的排他性,否则,即使在系统中加锁机制,也 ...

  4. RDL Web报表抛出ReportServerException,已取消该操作

    ::, RsBase() [ERROR] - Microsoft.Reporting.WebForms.ReportServerException: 已取消该操作. ---> System.Op ...

  5. 《springcloud 二》SrpingCloud Zuul 微服务网关搭建

    网关作用 网关的作用,可以实现负载均衡.路由转发.日志.权限控制.监控等. 网关与过滤器区别 网关是拦截所有服务器请求进行控制 过滤器拦截某单个服务器请求进行控制 Nginx与Zuul的区别 Ngin ...

  6. JavaScirpt 的垃圾(garbage collection)回收机制

    一.垃圾回收机制—GC Javascript具有自动垃圾回收机制(GC:Garbage Collecation),也就是说,执行环境会负责管理代码执行过程中使用的内存. 原理:垃圾收集器会定期(周期性 ...

  7. [总结] min-25筛

    再不写总结我又会忘掉啊啊啊啊啊啊啊啊啊 这个\(min-25\)筛主要用来求一个积性函数的前缀和,就像这样\[\sum_{i=1}^n f(i)\] 不过这个积性函数要满足两个条件:质数\(p\)的函 ...

  8. win10 vm 11 桥接模式配置

    1 保证你Vmware里面的虚拟机是关机状态 2 在本地连接 属性中 卸载VM 桥接协议 3 管理员身份运行VM ,编辑>虚拟网络编辑器 删除所有网卡,并且重新配置网络适配器 4 配置完成后,选 ...

  9. Android ORM对象关系映射之GreenDAO建立多表关联

    https://blog.csdn.net/u010687392/article/details/48496299 利用GreenDAO可以非常方便的建立多张表之间的关联 一对一关联 通常我们在操作数 ...

  10. Oracle关于TX锁的一个有趣的问题

    前阵子有一个网友在群里问了一个关于Oracle数据库的TX锁问题,问题原文如下: 请教一个问题: 两个会话执行不同的delete语句,结果都是删除同一个行.先执行的会话里where条件不加索引走全表扫 ...