vue的基础概念和语法01

vue的特点和web开发中的常见高级功能

解耦视图和数据
可复用的组件
前端路由技术
状态管理
虚拟DOM
数据响应式

不是所有元素操作都Vue都会监听并实现数据响应式

    //push方法:追加

    this.letters.push('aaa')

    //pop(): 删除数组中的最后一个元素

    this.letters.pop();

    //shift(): 删除数组中的第一个元素

    this.letters.shift();

    //unshift(): 在数组最前面添加元素

    this.letters.unshift('aaa', 'bbb', 'ccc')

    //splice作用: 删除元素/插入元素/替换元素

    //删除元素: 第二个参数传入你要删除几个元素(如果没有传,就删除后面所有的元素)

    //替换元素: 第二个参数, 表示我们要替换几个元素, 后面是用于替换前面的元素

    //插入元素: 第二个参数, 传入0, 并且后面跟上要插入的元素

    splice(start):

    this.letters.splice(1,3)

    this.letters.splice(1, 3, 'm', 'n', 'l', 'x')

    this.letters.splice(1, 0, 'x', 'y', 'z')

    //sort() 排序

    this.letters.sort()

    //reverse() 反转

    this.letters.reverse()

 Vue不会监听通过索引值修改数组中的元素：

    this.letters[0] = 'bbbbbb';  //这样修改的元素不会被监听和响应

    //那如何修改索引为0的元素呢？

    方法一：this.letters.splice(0, 1, 'bbbbbb')

    //set(要修改的对象, 索引值, 修改后的值)

    方法二： Vue.set(this.letters, 0, 'bbbbbb')

安装vue ：1.CDN 2.下载引入 3.npm

创建Vue实例

创建时传入了一个对象options
这哥option包含了（常用基础选项）
- el ：string|HTMLElement 作用：决定之后Vue实例会管理哪个DOM
- data ：object|function(组件当中data必须是一个函数) 作用：Vue实例对应的数据对象
- methods ：{ [key:string]:function} 作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用
- computed（计算属性）：与methods相似，但是调用函数时不用（），当作属性直接调用 ,计算属性会进行缓存，如果多次使用时，计算属性只会调用一次
computed和methods的区别
- computed会设置缓存，当多次调用时只执行一次，而methods会调用多次，一般当我们讲一些数据进行一些处理并展示出去的时候用computed，而不用methods

vue的生命周期

生命周期：一个事物的诞生到消亡的整个过程
callHook钩子函数（Hook：钩子）

vue中的基本指令

Mustache语法：{{ }}
- mustache语法中,不仅仅可以直接写变量,也可以写简单的js表达式
v-once指令：元素和组件只渲染一次，不会根据数据改变而改变
- <h2 v-once> {{message}} </h2>

v-html指令：可以插入html标签(会覆盖标签中文本)

  url: '<a href="http://www.baidu.com">百度一下</a>'

  <h2 v-html="url"></h2>

v-text指令：和html相似，但是不能识别html标签（会覆盖标签中文本）

v-pre指令：跳过这个元素和他子元素的编译过程

   message:"小明"

   <h2 v-pre>{{message}}</h2> //message

v-cloak：cloak（斗篷），当js编译过慢时，遮挡Mustache语法让其不显示，这个指令在vue解析前存在，解析之后不再，所以通常配合css样式display：none来使用
v-for：用于遍历数组或者枚举对象
- <p v-for="item in list">{{item.name}}-------{{item.age}} </p>(遍历数组，如果in前面有两个参数，第二个参数代表索引)
- <p v-for="(val,key) in user">{{key}} ----- {{val}}</p>(对象是无序的，所以应该用value-key的形式)
- 官方推荐我们在使用v-for的时候，给对应的元素或组件添加上一个:key
  - 这和Vue的虚拟DOM的Diff算法有关，不添加标识的时候，插入元素是替换了所有从插入位置以后了元素，而加入了唯一标识key（不要使用index来做标识，因为index会随着元素位置改变而改变）他会识别后面已有的一样的元素，只插入一个元素在进行渲染
v-bind：绑定属性，缩写 :

除了内容需要动态来决定以外，某些属性也希望动态来绑定（基本使用：a元素的href属性，img元素的src属性）
- <a v-bind:href="aHref">百度一下</a> 缩写<a :href="aHref">百度一下</a>

v-bind动态绑定class的两种方法（对象和数组）

对象语法

CSS代码：

    .active {

        color: red;

     }

HTML代码：

    <h2 class="title" v-bind:class="{active: isActive, line: isLine}">{{message}}</h2>

    <h2 class="title" v-bind:class="getClasses()">{{message}}</h2>

JS代码（vue）：

    const app = new Vue({

        el: '#app',

        data: {

        message: '你好啊',

        isActive: true,

        isLine: true

        },

        methods: {

        btnClick: function () {

            this.isActive = !this.isActive

        },

        getClasses: function () {

            return {active: this.isActive, line: this.isLine}

        }

        }

     })

数组语法

HTML代码：

      <h2 class="title" :class="[active, line]">{{message}}</h2>

      <h2 class="title" :class="getClasses()">{{message}}</h2>

JS代码：

     const app = new Vue({

        el: '#app',

        data: {

        message: '你好啊',

        active: 'aaaaaa',

        line: 'bbbbbbb'

        },

        methods: {

        getClasses: function () {

            return [this.active, this.line]

        }

        }

    })

v-bind动态绑定style的两种方法

    对象方法：

    <h2 :style="{key(属性名): value(属性值)}">{{message}}</h2>

    // key：fontSize，font-size等属性名    value：属性如果不加字符串会被认定为变量（10px变量  "10px"属性值）

    数组方法（相当于放入多个对象 **用的很少**）

    HTML代码：

        <h2 :style="[baseStyle, baseStyle1]">{{message}}</h2>

    JS代码：

        const app = new Vue({

            el: '#app',

            data: {

                message: '你好啊',

                baseStyle: {backgroundColor: 'red'},

                baseStyle1: {fontSize: '100px'},

            }

        })

v-on:事件监听，缩写@

v-on的参数问题：
- 情况一：如果该方法不需要额外参数，那么方法后的（）课不添加，但是如果方法本身有一个参数，而调用时没有传值的话，会默认将原生的事件event参数传递进去
- 情况二：如果需要同时传入多个参数，同时需要event时，可以通过$event传入事件

v-on修饰符：

    v-on修饰符的使用：

    //1.stop（阻止冒泡，调用了event.stopPropagation()

        <button @click.stop="btnClick">按钮</button>

    //2.prevent（阻止默认行为，调用了event.preventDefault()

        <input type="submit" value="提交" @click.prevent="submitClick">

    //3.{keyCode|keyAlias}监听某个键盘的键帽

        <input type="text" @keyup.enter="keyUp">  //键别名（enter回车）

        <input type="text" @keyup.13="keyUp"> //键代码

    //4.点击回调只会触发一次

        <button @click.once="btn2Click">按钮2</button>

    //5.串联修饰符

        <button @click.stop.prevent="doThis"></button>

v-if,v-else-if,v-else的使用

    <div id="app">

        <span v-if="isUser">

            <label for="username">用户账号</label>

            <input type="text" id="username" placeholder="用户账号">

        </span>

        <span v-else>

            <label for="email">用户邮箱</label>

            <input type="text" id="email" placeholder="用户邮箱" >

        </span>

        <button @click="isUser = !isUser">切换类型</button>

    </div>

    const app = new Vue({

        el: '#app',

        data: {

        isUser: true

        }

    })

问题：当我们在文本框中已经输入了内容在进行切换的时候，文本内容并不会被清空，而是会沿用切换前已有的文本，这是为什么？

原因：因为Vue在进行DOM渲染的时候，处于性能考虑，会尽可能复用已经存在的元素（input），而不是创建新元素，复用时有部分不同在进行替换（id，placeholder）

解决：如果不希望Vue出现类型重复利用的问题，可以给对应的input添加key并保证key的不同（如：key="username"，key="email"）

v-show
- 和v-if的使用相似，但有些不同
  
  v-if: 当条件为false时, 包含v-if指令的元素, 根本就不会存在dom中
  
  <h2 v-if="true" id="aaa">{{message}}</h2>
- v-show: 当条件为false时, v-show只是给我们的元素添加一个行内样式: display: none
  
  <h2 v-show="ture" id="bbb">{{message}}</h2>
使用场景：当需要在显示与隐藏之间切片很频繁的使用时，使用v-show，当只有一次切换的时候，使用v-if

v-model：表单绑定双向数据

v-model双向数据绑定原理：(语法糖)
1. v-bind绑定表单标签的value属性，实现从数据到页面的绑定
2. v-on指令给当前元素绑定input事件（$event.target.value）实现从页面到数据的绑定
<input type="text" :value="message" @input="message = $event.target.value">

v-model可以结合radio，checkbox，select等标签一起使用

radio : 多个radio标签用v-model绑定同一个属性
checkbox： checkbox单选框，绑定的属性对应boolean值，checkbox多选框，绑定的属性对应的数组

    select的使用方法：

    <select name="abc" v-model="fruit">

    <option value="苹果">苹果</option>

    <option value="香蕉">香蕉</option>

    <select>

    data：{

        fruit：'香蕉'

    }

v-model修饰符:

//1.修饰符: lazy

//作用：让数据失去焦点或者回车的时候才会更新

<input type="text" v-model.lazy="message">

//2.修饰符: number

//作用：让输入框中输入的内容自动转成数字类型

<input type="number" v-model.number="age">  

//3.修饰符: trim

//作用：可以过滤内容左右两边的空格

<input type="text" v-model.trim="name">

深入理解计算属性(computed)

调用计算属性的方法的时候为什么不用加（）？下面来看一下计算属性的本质

  computed: {

    fullName: {

      set: function(newValue) {

        // console.log('-----', newValue);

        const names = newValue.split(' ');

        this.firstName = names[0];

        this.lastName = names[1];

      },

      get: function () {

        return this.firstName + ' ' + this.lastName

      }

    },

计算属性本质就是对象属性，里面包含了setter和getter方法，但是我们通常不适用setter方法，让其成为只读属性，这样就有了另外一种缩写方式：

       fullName: function () {

          return this.firstName + ' ' + this.lastName

    }

其实这样就是只调用某个计算属性中的get方法