01 vue入门

vue简介

官网上有介绍，这里粘出来

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

数据双向绑定

页面的数据和js变量绑定，

实例

数据同步

// 我们的数据对象

var data = { a: 1 }

// 该对象被加入到一个 Vue 实例中  ,两者数据保持同步

var vm = new Vue({

  data: data

})

// 他们引用相同的对象！

console.log(vm.a === data.a); //.a === data.a // => true

// 设置属性也会影响到原始数据

vm.a = 2

console.log(data.a) // => 2

// ... and vice-versa

data.a = 3

console.log(vm.a) // => 3

　　Vue的属性data可以引用外部对象。数据同步

实例方法：$watch 以$开头的函数

/*

 * Vue 实例暴露了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。例如：

 */

console.log('--------------')

var data2 = { a: 1 }

var vm = new Vue({

  el: '#example',

  data: data2

})

console.log(vm.$data === data2) // => true

console.log(vm.$el === document.getElementById('example')) // => true

// $watch 是一个实例方法

vm.$watch('a', function (newValue, oldValue) {

  // 这个回调将在 `vm.a` 改变后调用

  alert(543);

})

vm.a=123;

实例的生命周期

var vue1 = new Vue({

    el:'#div1',

    data: {

      a: 1

    },

    //事件的绑定，成员发生改变

    updated : function(){

        alert('vue1 is updated')

//                        console.log('update..');

    },

    created: function () {

      // this 指向 vm 实例

      alert('vue1 is created')

      console.log('a is: ' + this.a)

    }

});

// => "a is: 1"

$('#btnUpdate').click(function(){

    vue1.a='hello world';

})

属性绑定

将div标签内的内容加载进去，可以解析

表达式解析

<div id="div1">

    {{1==1?'yes':'no' }} <br />

    {{msg}}<br /><br />

    可以使用vue的数据和JS的函数,msg.split(' '),<br />

    变异方法 (mutation method)，顾名思义，会改变被这些方法调用的原始数组<br />

    push()

    pop()

    shift()

    unshift()

    splice()

    sort()

    reverse()<br />

    {{msg.split(' ')}}   <br />

</div>

指令

　　指令 (Directives) 是带有 v- 前缀的特殊属性。

　　指令属性的值预期是单个 JavaScript表达式

　　(v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，

　　将其产生的连带影响，响应式地作用于 DOM。

v-if 可预见性

<div id="div1" v-if="seen">

    指令 v-if

</div><br />

v-bind 属性绑定

<div id="div2">

    <a v-bind:href="link">连接到</a>

</div>

v-on 时间绑定

<div id="div3">

    <button v-on:click="fun">dosomething</button>

</div>

//另一个例子是 v-on 指令，它用于监听 DOM 事件：

//<a v-on:click="doSomething">

var app3=new Vue({

    el:'#div3',

    data:{

        a:1

    },

    event:{

        fun:function(){

            alert(123)

        }

    }

});

计算属性和观察者

计算属性：

　　与函数的区别：

不同的是计算属性是基于它们的依赖进行缓存的。
如果依赖数据没有改变，那么不在执行函数，直接返回该属性值
这也同样意味着下面的计算属性将不再更新，因为 Date.now() 不是响应式依赖：

var vm=new Vue({

    el:'#example',

    data:{

        message:'hello world'

    },

    computed:{

        reversedMessage:function(){

            console.log('setter....')

            return this.message.split('').reverse().join(',');

        }

    },

    methods:{

        //我们可以将同一函数定义为一个方法而不是一个计算属性

        //程序结束时，会被调用一次，利用栈的原理

        fun1:function(){

            console.log('methods fun 被调用了...')

            return 'hello';

        }

    }

});

//这里我们声明了一个计算属性 reversedMessage。

//我们提供的函数将用作属性 vm.reversedMessage 的 getter 函数：

console.log('后'+vm.reversedMessage) // => 'olleH'

vm.message = 'Goodbye'

//如果message发生改变，那么计算属性会重新计算

console.log('后'+vm.reversedMessage) // => 'eybdooG'

　　计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：

var vm=new Vue({

    el:'#example',

    data:{

        firstName:'bob',

        lastName:'admin'

    },

    computed:{

      fullName: {

        // getter

        get: function () {

          return this.firstName + ' ' + this.lastName

        },

        // setter

        set: function (newValue) {

          var names = newValue.split(' ')

          this.firstName = names[0]

          this.lastName = names[names.length - 1]

        }

      }

    }

});

观察者：

　 watch:

　　question:function(){}

当vue data的属性变量，发生变化时，自动执行watch函数

var watchExampleVM = new Vue({

  el: '#watch-example',

  data: {

    question: '',

    answer: '请输入用户名！'

  },

  watch: {

    // 如果 question 发生改变，这个函数就会运行

    question: function (newQuestion) {

//              this.answer = '等待输入中..'

//alert(newQuestion)

      this.getAnswer()

    }

  },

  methods: {

      getAnswer:function(){

          if(this.question.length<4||this.question.length>10){

              this.answer='用户名长度必须为5-9位';

          }

          else

          {

              this.answer='符合条件'

          }

      }

绑定class

　　三种方式：

<script>

    // al

    $(function(){

        var app1=new Vue({

            el:'#div1',

            data:{

                isActive:true,

            }

        });

        var app1=new Vue({

            el:'#div2',

            data:{

                isActive:true,

                //可以使用，比较方便

                info:{

                    red:true,

                    size:true

                }

            }

        })

    })

</script>

    </head>

    <body>

        <div id="div1" class="static" v-bind:class="{ active: isActive }"></div>

        可以使用对象

        <div id="div2" class="static" v-bind:class="info"></div>

        数组用法

        <div v-bind:class="[{ active: isActive }, errorClass]"></div>

    </body>

</html>

列表渲染

数组for

items:[

　　{message:'Foo'},

　　{message:'Bar'}

]

<ul id="ul1">

  <li v-for="item in items">

    {{ item.message }}

  </li>

</ul>

<ul id="ul2">

  <li v-for="(index,item) in items">

    {{ item.message }}--{{index}}

  </li>

</ul>

　　修改data: vue.items[1]={message:'new values'}

对象属性：

data:{

    object:{

        a:'mon',

        b:'admin',

        c:123

    },

    users:[

    {name:'admin',age:'33'},

    {name:'bob',age:'23'}

    ]

}

<ul id="v-for-object" class="demo">

  <li v-for="value in object">

    {{ value }}

  </li>

  <li v-for="(value,key) in object">

    {{ value }} -{{key}}

  </li>

  <li v-for="value in users">

    {{ value.name }} -{{value.age}}

  </li>

组件

注册组件

全局注册

Vue.component(tagName, options)

e.g.

Vue.component("tag", {

    template: '<div>hello component!</div>',

    props:{

    }

})

组件在注册之后，便可以作为自定义元素 `` 在一个实例的模板中使用。

注意确保在初始化根实例之前注册组件

注意：组件必须在vue实例中才能使用。

局部注册

data必须是函数

组件组合

组件设计初衷就是要配合使用的，最常见的就是形成父子组件的关系：组件 A 在它的模板中使用了组件 B。它们之间必然需要相互通信：父组件可能要给子组件下发数据，子组件则可能要将它内部发生的事情告知父组件。然而，通过一个良好定义的接口来尽可能将父子组件解耦也是很重要的。这保证了每个组件的代码可以在相对隔离的环境中书写和理解，从而提高了其可维护性和复用性。

父子组件通信

子组件可使用props和父组件做数据同步：将模板中的属性和父组件的data做数据绑定【v-bind】，在模板中使用props的值，这样就可以间接的使得父子组件进行通信。

使用了v-bind的属性会当成JavaScript代码进行解析。例如：

->>

属性【props】也可以定义为对象形式，主要用来做数据验证：

props:{

　　name:String,

　　age:{

　　　　type:Number，

　　　　default:100 | function(){ return 200; },

　　　　required:true

　　}...

}

type 可以是下面原生构造器：

String
Number
Boolean
Function
Object
Array
Symbol

当 prop 验证失败，Vue 会抛出警告 (如果使用的是开发版本)。注意 prop 会在组件实例创建之前进行校验，所以在 default 或 validator 函数里，诸如 data、computed 或 methods 等实例属性还无法使用。

非prop特性

添加特性，也可以给元素添加其他属性【class，id，name等】

对于class属性，如果模板中和元素中出现多个，vue会自动合并

自定义事件

父组件使用 prop 传递数据给子组件。但子组件怎么跟父组件通信呢？这个时候 Vue 的自定义事件系统就派得上用场了。

使用v-bind绑定自定义事件

每个vue实例都实现了事件接口：

使用$on(eventName) 监听事件
使用$emit(eventName, optionPayload)触发事件

<div id="counter-event-example">

  <p>{{ total }}</p>

  <button-counter v-on:increment="incrementTotal"></button-counter>

  <button-counter v-on:increment="incrementTotal"></button-counter>

  <button-counter v-on:click.native="incrementTotal"></button-counter>

</div>

在组件根元素上，可以添加原生事件【.native】，也可以添加自定义事件【比较麻烦】

sync修饰符

在一些情况下，我们可能会需要对一个 prop 进行“双向绑定”。【2.4仍然不可以使用】

当一个子组件改变了一个带 .sync 的 prop 的值时，这个变化也会同步到父组件中所绑定的值。【vue1中引入，2.0中删除，2.3中重新引入】

例如：

【在组件根元素中，将foo【props中定义的】属性绑定为父组件的data（bar）】

等价于：<comp :foo="bar" @update:foo="val => bar=val" />

当子组件更新foo属性时，会显式地触发一个更新事件： this.$emit('update:foo', newValue)

一次性绑定多个属性：

v-model 【默认绑定的是value和input事件，一般用于表单输入】

自定义事件可以用来创建自定义的表单输入组件，使用 v-model 来进行数据双向绑定

<currency-input v-model="price"></currency-input>

Vue.component('currency-input', {

  template: '\

    <span>\

      $\

      <input\

        ref="input"\

        v-bind:value="value"\

        v-on:input="updateValue($event.target.value)"\

      >\

    </span>\

  ',

  props: ['value'],

  methods: {

    // 不是直接更新值，而是使用此方法来对输入值进行格式化和位数限制

    updateValue: function (value) {

      var formattedValue = value

        // 删除两侧的空格符

        .trim()

        // 保留 2 位小数

        .slice(

          0,

          value.indexOf('.') === -1

            ? value.length

            : value.indexOf('.') + 3

        )

      // 如果值尚不合规，则手动覆盖为合规的值

      if (formattedValue !== value) {

        this.$refs.input.value = formattedValue

      }

      // 通过 input 事件带出数值

      this.$emit('input', Number(formattedValue))

    }

  }

})

自定义组件的v-model

默认情况下，一个组件的 v-model 会使用 value prop 和 input 事件。但是诸如单选框、复选框之类的输入类型可能把 value 用作了别的目的。model 选项可以避免这样的冲突：

Vue.component('my-checkbox', {

  model: {

    prop: 'checked',

    event: 'change'

  },

  props: {

    checked: Boolean,

    // 这样就允许拿 `value` 这个 prop 做其它事了

    value: String

  },

  // ...

})

非父子组件的通信

有时候，非父子关系的两个组件之间也需要通信。在简单的场景下，可以使用一个空的 Vue 实例作为事件总线：

使用插槽分发内容

编译作用域

父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译。

父组件不会感知到子组件的属性。

单个插槽

使用组件模板时，不需要指定标签内的内容，只需要指定属性【用来和父组件通信】。

巴特西