[Vue.js] - Vue.js基础学习笔记

Vue.js基础

---

1.第一个Vue.js程序

实例与数据绑定

• 创建实例

var app = new Vue({
    el:''
    data:''
})

• el指定已存在的dom挂载Vue实例
• v-model用于数据的绑定，对应data中的字段
*

生命周期

1. created：实例创建完成后调用，尚未挂载（初始化数据）
2. mounted：el挂载到实例上之后调用（第一个业务逻辑开始）
3. beforeDestroy：实例销毁前调用（解绑监听事件）

插值与表达式

1. 插值{{}}
   
   • 使用 v-html将插值输出成html
   • 使用v-pre可跳过这个元素及其子元素的编译
2. 表达式
   在{{}}中可以使用JavaScript表达式进行简单的二、三元计算，如需要发咋计算需要使用计算属性
3. 过滤器
   支持在{{}}的尾部加入|对数据进行过滤，常用于格式化文本，复杂处理需使用计算属性。

{{date | formatDate}}

new Vue({
    ...
    filters:{
        formatDate:function({
            ...
            return XXXX;
})
})

2.指令和事件

1. 指令是Vue.js模板中最常用的一项功能，它带有前缀 v-，其主要职责就是当其表达式的值改变时，相应的对DOM进行操作。
   
   • v-bind：基本用途是动态的更新HTML元素上的属性
   • v-on：使用它来绑定事件监听器
2. 语法糖

<a v-bind:href="url"/>  -->  <a :href="url"/>
<button v-on:click="click"/> --> <button @click="click"/>

3.计算属性

计算属性需要以函数的形式添加在Vue实例的computed选项中，最终返回计算后的结果。

计算属性用法

<div id="app">
        {{prices}}
    div>

    <script>
        var app = new Vue({
            el:'#app',
            data:{
                package1:[
                    {
                        name:'iphone7',
                        price:7199,
                        count:2
                    },
                    {
                        name:'ipad',
                        price:2888,
                        count:1
                    }
                ],
                package2:[
                    {
                        name:'apple',
                        price:3,
                        count:5
                    },
                    {
                        name:'banana',
                        price:2,
                        count:10
                    }
                ]
            },
            computed:{
                prices:function(){
                    var prices = 0;
                    for (var i = 0; i<this.package1.length; i++) {
                        prices += this.package1[i].price*this.package1[i].count;
                    }
                    for (var i = 0; i<this.package2.length; i++) {
                        prices += this.package2[i].price*this.package2[i].count;
                    }
                    return prices;
                }
            }
        })
    script>

• 计算属性可以依赖其他计算属性
• 计算属性可以依赖其他实例的数据
• 计算属性基于它的依赖缓存，依赖的数据变化时他才会重新取值。

4.v-bind及class与style绑定

绑定class的几种方式

1. 对象语法：为v-bind:class设置一个对象，可以动态的切换class
2. 数组语法：为v-bind:class绑定一个数组，应用一个class列表
3. 在组件上使用：直接在组件中使用 class或者:class，会直接应用到这个组件上。
   ::当设置的表达式过长或较为复杂则应该优先使用计算属性::

绑定内联样式

使用v-bind:style可以给元素绑定内联样式，使用和绑定class类似。

5.内置指令

1. 基本指令
   
   • v-cloak：不需要表达式，经常和display:none配合使用，在加载内容缓慢时使用
   • v-once：不需要表达式，定义的元素只能渲染一次
     
2. 条件渲染指令 v-if
   
   • v-if：当表达式为真时，当前元素/组件及其子节点渲染，为假时被移除
   • v-else-if：跟在v-if之后
   • v-else：跟在v-if或v-else-if之后
   • v-show：是改变元素CSS属性display:none
v-if用于不经常改变的场景，v-show用于频繁切换的场景
     

     出于效率考虑，vue会尽量使用已有元素而非重新渲染，可以使用 key属性决定是否要复用。

3. 列表渲染指令 v-for
   
   • 遍历数组

<ul>
    <template v-for="item in items">
        <li >{{item.name}}li>
        <li >{{item.price}}li>
    template>
ul>

* 遍历对象属性

<ul>
    <template v-for="(value,key,index) in user">
        <li >{{index}} - {{key}} - {{value}}li>
    template>
ul>

1. 方法与事件
   v-on:click可以直接使用JavaScript语句，也可以使用选项中methods方法

修饰符

* .stop  ->  阻止单击事件冒泡
* .prevent  ->  提交事件不再重载页面
* .capture  ->  添加时间侦听器时使用事件捕获模式
* .self  ->  当事件在该元素触发时触发回调
* .once  ->  只触发一次

还可以使用按键修饰符，按下某个键才会调用。
*

6.表单与v-model

基本用法

<div id="app>
    text" v-model="message">
    <p>{{message}}p>
div>

* 使用`v-model`实现了表单元素的双向绑定。
* 对于`textarea`文本域的使用和`text`相同
* 单选按钮`radio`可以直接使用`v-bind`绑定一个布尔类型的值，选中时为true。如果使用组合来实现互斥时间，就需要`v-model`配合value使用，当选中时将value的值赋到绑定的数据中。
* 复选框、选择列表使用方法也基本相同。需要把想选择的数据绑定到value上

绑定值

在业务中v-model绑定的值大多是动态的，这时需要使用v-bind来实现。

选中时，将item的值加入checkList中。

修饰符

与事件的修饰符类似，用于控制数据同步的时机。
* .lazy：使用该修饰符后，在输入过程中并不会数据同步，而是在change事件中同步。
* .number：会将输入转换为Number类型，否则虽然你输入的是数字，但是还是会被识别为String。
* .trim：可以自动过滤掉收尾的空格。