Vuejs1.x - 1

一．数据的传递

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