Vuejs1.x

一．数据的传递

<div id='box'>{{msg}}</div>

var  v = new  Vue ({        el:'#box',        data:{msg:'hello vue'}})

二．数据绑定 v-model

<div  class=’box’>    <input  type='text'  v-model='msg'>    <p>{{msg}}</p></div>

var  v = new Vue({    el:'.box',    data:{msg:' '}})    //  给文档中的msg初始为空值，绑定input的输入文字.

三．循环 v-for

<div id=’box’>    <ul>        <li  v-for='value  in  arr'> {{value}}</li>        <li  v-for='(k,v) in json'>{{k}} {{v}}</li>    </ul></div>

var  v = new Vue({        el:'#box',        data:{            arr:['1','2','3','4'],            json:{a:'1',b:'2',c:'3'}        }})

    1）： 重复循环，多条数据的添加   track-by=‘索引’    

<div id=’box’>    <input type='button' value='点击添加' @click='add'>    <ul v-for='v  in  arr'  track-by = '$index'>        <li>{{v}}</li>    </ul></div>

var  vm  = new Vue({    data:{ arr:['王','梦','娜'] }，    methods：{        add:function( ){ this.arr.push('我爱你') }    }})    // 连续点击的时候，就会无限添加 我爱你  不会报错

四．事件 v-on:click 缩写 @click

<div  id=’box’>    <input  type='button' value='按钮' @click='show()'>    <input  type='button' value='添加' @click='add()'>    <p  v-show='true'>{{msg}}</p></div>

var  v = new Vue({    el:'#box',    data:{ arr:['1','2','3']  },    methods:{        show:function( ){  alert(1) },        add:function( ){  this.arr.push('4') }    }})

五．事件对象

    <!-- 注释：事件对象  var ev = ev  || event  包括键盘事件，鼠标事件，屏幕事件 ev.clientX  可以获取鼠标点击时的X坐标 --><div class='box'>    <input type='button' value='按钮' @click='show($event)'></div>

new   Vue({    el:'.box',    methods:{        show:function( ev ){ console.log( ev.clientX ) }    }   })      //获取当前点击屏幕的X坐标   

1）： 事件冒泡与阻止事件冒泡

<div  id='box'>    <div @click='show2()'>        <input  type='button' value='点击' @click.stop='show()'>    </div></div>

new Vue({    el:'#box',    methods:{        show:function( ){ alert(1) },        show2:function( ){ alert(2) }    }})  // 注释: 如果不加 .stop  点击后按钮会弹出俩个弹框，就是事件冒泡。添加  .stop  方法阻止事件冒泡

2）：键盘事件 keydown

<div  id='box'>        <input type='text' @keyup='show1($event)'>        <input type='text' @keyup='show2($event)'>        <input type='text' @keyup.13='show3($event)'></div>

new Vue({    el:'#box',    methods:{        show1:function( ev ){ alert( 1 ) },        show2:function( ev ){ alert( ev.keyCode) },        show3:function( ev ){ alert( 2 ) }    }})//注释：  show1  输入任何键，都出弹出 1 //       show2   输入任何键，都出弹出对应的阿克斯码//       show3   输入对应的13阿克斯码弹出2    （13是Ctrl键）

六．属性 src 图片

<div id='box'>    <img  :src='url'>    <img  v-bind:src='url'  :width='w'  :title='t'></div>

new Vue({    el:'#box',    data:{        url:'1.jpg',        w:'200px',        t:'王梦娜是女神'    }})

1）：  类的添加class

/* css页面 */.red{ color:red }    .blue{ background:blue }

<div  id='box'>    <p :class='[red,blue]'>曾经的努力</p>    <p :class="{red:true,blue:true}">换来的只是</p>    <p :class='json'>一句话的称赞</p></div>

new Vue({    el:'#box',    data:{        red:'red',        blue:'blue',        json:{red:true,blue:true}    }})//   注释：类添加需要用[ ]进行添加。第二个p 可以直接从css中获取，第三个p 直接将里面的内容改成了json对象而已。实现效果是一样的

2）：style 样式的添加

<div id='box'>    <p :style='{ color:red }'>仅仅幻想的有点好而已</p>    <p :style='[a]'>累倒自己不想在哭为止</p>    <p :style='[a,b]'>一个人静静的走在北京这个城市</p>    <p :style='json'>我喜欢你王梦娜</p></div>

new  Vue({    el:'#box',    a:{color:'red'},    b:{background:'blue'},    json:{ color:'#fff', background: '#000' }})// 注释： 第一个P可以直接添加样式

3）：其他属性  v-cloak   v-text  v-html

<!-- v-cloak  与  ng-cloak 一样 防止闪烁，适用于大型的段落文字 -->    <!-- v-text --><div  id=’box’>    <p  v-text=’msg’></p></div>

var   vm  = new Vue({    el:'#box',    data:{msg:'王梦娜是女神'}})    // 页面 输出 p标签   王梦娜是女神

4）：计算属性

<!-- HTML页面 --><div  id='box'>    A==>{{a}}    B==>{{b}}</div>

// 第一种方法计算属性var vm =  new Vue({    el:'#box',    data:{a:1},    computed:{        b:function( ){ return this.a+2 }    }})document.onclick = function( ){ vm.a = 100 }//  初始页面  a=1  b=3  //  点击后    a=100  b=102

// 第二种方式计算属性var  vm  = new  Vue({    el:'#box',    data:{a:1},    computed:{        b:{            get:function( ){ return  this.a+15 }            set:function(val){ this.a = val }   //val == b 的值        }    }})document.onclick = function( ){ vm.b = 100 }//  初始页面值     a=1   b=15//  点击之后     a=100   b=105

七．过滤器（内置）

<div id='#box'>     {{'welcome'|uppercase}}    <!-- 大写过滤器 -->     {{'WELCOME'|lowercase}}   <!--小写过滤器-->     {{'WELCOME' | lowercase | capitalize }}  <!--首字母过滤器-->     {{12 | currency }}  <!-- $美元过滤器-->     {{12 | currency '￥'}}   <!--转成RMB-->     <!--延迟事件过滤器-->    <input type='text' @keyup='show()' | debounce 2000>    <ul>      <!--截取俩个字符过滤器-->        <li v-for='val1  in  arr1 | limitBy 2 '>{{val1}}</li>              <!--文字的过滤 ==> 带有w的提取出来-->         <li  v-for="val2 in arr2 | filterBy 'w' ">{{val2}}</li>              <!-- 排序过滤器   1 为正序   -1 为倒序-->        <li  v-for="val2  in  arr2 | orderBy  1 ">{{val2}}</li>    </ul></div>

new Vue({    el:'#box',    data:{        arr1:['1','2','3','4','5'],        arr2：['width','height','background','vue']    }    methods：{        show:function( ){ alert(1) }    } })

八．Vue的生命周期

<!--    created          实力已经创建        beforeCompile    编译之前        compiled         编译之后        ready            插入文档        beforeDestroy    销毁之前        destroyed        销毁之后     -->        <div id=’box’>  {{msg}}  </div>

var  vm = new  Vue({    el:'#box',    data:{ msg:'王梦娜是女神' },    created：function( ){  alert('实例已经创建') }，    beforeCompile：function( ){ alert('编译之前') },    compiled：function( ){ alert('编译之后') },    ready ：function( ){ alert('插入文档') },    beforeDestroy：function( ){ alert('销毁之前') },    destroyed：function( ){alert('销毁之后')}})document.onclick = function( ){ vm.$destroy } //点击页面销毁vue对象

九．Vue实例简单的方法

<!--    vm.$el       自身元素    vm.$data     数据（值）    vm.$mount    手动挂载到Vue    vm.$options  获取自定义属性    vm.$destroy  销毁对象    vm.$log      检查数据状态--><div id='box'> a==>{{a}} </div>

var  vm = new  Vue({    aaa: 18,    show:function( ){ alert(1) }}).$mount('#box')   //手动挂载vue对象vm.$options.aaa       vm.$options.show( ) // 自定义事件，数据console.log(vm.$log)    // vue对象的数据状态

十．自定义指令

1）：自定义属性    

<!-- 定义 : Vue.directive('name',function( ) { })--><div id='box'>        <span  v-red>不到最后一刻不放弃</span>        <span  v-can='msg'></span></div>

Vue.directive('red',function(){    this.el.style.background = 'red'})Vue.directive('can',function(){    this.el.innerHTML = msg})new Vue({  data:{msg:'王梦娜'}  }).$mount('#box')

2): 自定义元素  （了解）

<!-- 定义：Vue.elementDirective('name',function( ){ }) --><div id='box'>    <mengna>王梦娜</mengna></div>

Vue.elementDirctive('mengna',{    bind:function( ){ this.el.style.color ='pink' }})new Vue({  }).$mount('#box')

3):自定义键盘指令    定义：@keydown.up/enter/a b c / 1 2 3 ….    特殊的键盘码绑定  Vue.directive(‘on’).keyCodes.ctrl = 17    显现方法： @keydown.ctrl = 17

十 一 . 数据的监听改变 $watch

定义：监听数据的变化1）：浅度的监听

<!-- 定义：vm.$watch(‘msg’,function(){alert(‘我变化了’) })--><div id='box'>    {{msg}}    {{count}}</div>

var vm = new  Vue({    data:{msg:'王梦娜',count：200}}).$mount('#box')Vm.$watch('msg',function( ){    alert('我改变化了')    this.count += 1})document.onclick = function(){ vm.msg='我爱你' }

2）：深度监听（json数据）

<!--  定义：vm.$watch(‘msg’,function( ){ },{deep:’true’}) --><div  id='box'>    {{info | json}}    {{name}}</div>

var vm  = new Vue({    data:{        info：{msg:'王梦娜', count：200},        name：'张三'    }}).$mount('#box')vm.$watch('info',function(){    alert('我改变了')},{deep：true})document.onclick = funtiocn(){ vm.info.msg = '我爱你' }

十 二 . 动画
定义：过滤动画，本质css3： transition animation

/*css页面*/.fade-transition{  transition : all  1s }.fade-enter{  opacity:0  }   /*开始动画*/.fade-leave{                 /*离开动画*/        opacity: 0;        transform: translate (50px,0)}

<!-- 第一种写法 --><div id='box'>    <input  type='button' value='动画'  @click='show()'>    <div v-show='bg' transition='fade'></div></div>

var vm = new Vue({    data:{ bg:true },    methods:{        show:function( ){            this.bg  =  !this.bg    // 锁的效果        }    }}).$mount(‘#box’)

第二种写法：  需要引入animate.css

<div  id='box'>    <input  type='button'  value='动画'  @click='show()'>    <div class='animated' v-show='bg' transition='fade'></div></div>

var  vm = new  Vue({    data:{ bg:true },    methods:{        show:function( ){ this.bg  =  !this.bg }    },    transitions:{        fade:{            enterClass:'zoomInLeft',   //开始动画            leaveClass:'zoomOutRight'  // 离开动画        }    }}).$mount('#box')

十 三 . 组件

1）：全局组件：

<div id='box'>    <mengna></mengna></div>

var  Aaa = Vue.extend({                             // 创建组件    template:"<h3 @click='char( )'>{{name}}</h3>",   // 组件内容    data( ){                                  // 组件内部传递参数        return { name: '王梦娜' }    },    methods:{        char( ){  this.name = '是女神' }    }})// 参数一：组件的名，参数二：绑定组件的对象Vue.component( 'mengna' , Aaa ) var vm = new Vue({  }).$mount('box') 

2）：局部组件：

<div  id='box'>    <mengna></mengna></div>

var  Aaa = Vue.extend({    template:"<h3>{{name}}</h3>",    data( ){        return {  name:"给王梦娜一个家" }    }})var vm = new  Vue({    components:{        mengna:Aaa      // mengna：组件名  Aaa：组件对象    }}).$mount(‘#box’)// 注意：只要在vue对象内的成为局部组件 所有的单词最后加‘ S ’

3）：另一种编写组件的写法

<div  id='box'>    <mengna></mengna></div>

var vm = new  Vue({    el:'#box',    components:{        'mengna':{            data( ){ return { msg:'王梦娜' } }，                methods:{                    char( ){ this.msg = ‘变的更好’}                },                template:"<h2 @click='char()'>{{msg}}</h2>"        }    }})