Vue

vue

mvvm

View层：

视图层
在我们前端开发中，通常就是DOM层。
主要的作用是给用户展示各种信息。
Model层：
数据层
数据可能是我们固定的死数据，更多的是来自我们服务器，从网络上请求下来的数据。
在我们计数器的案例中，就是后面抽取出来的obj，当然，里面的数据可能没有这么简单。
VueModel层：
视图模型层
视图模型层是View和Model沟通的桥梁。
一方面它实现了Data Binding，也就是数据绑定，将Model的改变实时的反应到View中
另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件(点击、滚动、touch等)时，可以监听到，并在需要的情况下改变对应的Data。

1.创建简单vue

原生js的做法（编程范式：命令式编程）

1.创建div元素，设置id属性

2.定义一个变量message

3.将message放在div中显示

4.修改数据

5.将修改的数据再次替换到div中

vue做法（声明式编程）将数据交给vue管理

<div id="app">
  {{ message }}
</div>

let app = new Vue({//let（变量）/const（常量）
  el: '#app',//用于挂载要管理的数据
  data: {//定义数据
    message: 'Hello Vue!'
  }
})

options(对象)中包含了el属性：该属性决定了这个Vue对象挂载到哪一个元素上，很明显，我们这里是挂载到了id为app的元素上
{}中包含了data属性：该属性中通常会存储一些数据
这些数据可以是我们直接定义出来的，比如像上面这样。
也可能是来自网络，从服务器加载的。

【注】响应式：当数据发生改变，界面会自动发生改变

v-for

后面给数组追加元素(push())的时候, 新的元素也可以在界面中渲染出来

打开开发者模式的console

响应式：当我们数组中的数据发生改变时，界面会自动改变。

2.插值操作

mustache（双大括号）

是在内容里面写

mustache语法中,不仅仅可以直接写变量,也可以写简单的表达式

<h2>{{firstName + lastName}}</h2>
<h2>{{counter*2}}</h2>
<h2>{{firstName}} {{lastName}}</h2>

v-once

表示元素和组件(组件后面才会学习)只渲染一次，不会随着数据的改变而改变。

后面不需要跟任何表达式(比如之前的v-for后面是由跟表达式的)

v-html

按照HTML格式进行解析，并且显示对应的内容

该指令后面往往会跟上一个string类型

会将string的html解析出来并且进行渲染

v-text

和Mustache比较相似：都是用于将数据显示在界面中
v-text通常情况下，接受一个string类型，会覆盖原本的内容

v-pre

用于跳过这个元素和它子元素的编译过程，用于显示原本的Mustache语法。

v-cloak（斗篷）

在某些情况下，我们浏览器可能会直接显然出未编译的Mustache标签。

在vue解析之前, div中有一个属性v-cloak
在vue解析之后, div中没有一个属性v-cloak

3.绑定属性 v-bind

v-bind用于绑定一个或多个属性值，或者向另一个组件传递props值

<img v-bind:src="imgURL" alt="">
  <!--语法糖的写法-->
  <a :href="aHref">百度一下</a>

v-bind绑定class

对象语法(绑定方式)

对象语法的含义是:class后面跟的是一个对象。
对象语法有下面这些用法：

用法一：直接通过{}绑定一个类
<h2 :class="{'active': isActive}">Hello World</h2>
用法二：也可以通过判断，传入多个值
<h2 :class="{'active': isActive, 'line': isLine}">Hello World</h2>
用法三：和普通的类同时存在，并不冲突
注：如果isActive和isLine都为true，那么会有title/active/line三个类
<h2 class="title" :class="{'active': isActive, 'line': isLine}">Hello World</h2>
用法四：如果过于复杂，可以放在一个methods或者computed中
注：classes是一个计算属性
<h2 class="title" :class="classes">Hello World</h2>

数组语法(绑定方式)

数组语法的含义是:class后面跟的是一个数组。
数组语法有下面这些用法：

用法一：直接通过{}绑定一个类
<h2 :class="['active']">Hello World</h2>
用法二：也可以传入多个值
<h2 :class=“[‘active’, 'line']">Hello World</h2>
用法三：和普通的类同时存在，并不冲突
注：会有title/active/line三个类
<h2 class="title" :class=“[‘active’, 'line']">Hello World</h2>
用法四：如果过于复杂，可以放在一个methods或者computed中
注：classes是一个计算属性
<h2 class="title" :class="classes">Hello World</h2>

v-bind绑定style

对象语法

:style="{color: currentColor, fontSize: fontSize + ‘px’}"
style后面跟的是一个对象类型
对象的key是CSS属性名称
对象的value是具体赋的值，值可以来自于data中的属性

<h2 :style="{key(属性名): value(属性值)}">{{message}}</h2>-->
<!--'50px'必须加上单引号, 否则是当做一个变量去解析-->
<!--<h2 :style="{fontSize: '50px'}">{{message}}</h2>-->
<!--finalSize当成一个变量使用-->//下面data里面有声明
<!--<h2 :style="{fontSize: finalSize}">{{message}}</h2>

数组语法

<div v-bind:style="[baseStyles, overridingStyles]"></div>
style后面跟的是一个数组类型
多个值以，分割即可

4.计算属性

计算属性一般是没有set方法, 只读属性.

计算属性会进行缓存，如果多次使用时，计算属性只会调用一次。

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
        }
      },
    }
    ---------------------------------
    //一般没有set属性
    totalPrice:function(){
			let total = 0;
			for(let i in this.books){
				total += this.books[i].price;
			}
			return total;
	}
    

5.es5和es6

ES5中的var是没有块级作用域的(if/for)

ES6中的let是由块级作用的(if/for)

ES5之前因为if和for都没有块级作用域的概念, 所以在很多时候, 我们都必须借助于function的作用域来解决应用外面变量的问题.(闭包)

ES6中,加入了let, let它是有if和for的块级作用域.

1.注意一: 一旦给const修饰的标识符被赋值之后, 不能修改
const name = ‘why’;
name = ‘abc’;

2.注意二: 在使用const定义标识符,必须进行赋值
const name;

3.注意三: 常量的含义是指向的对象不能修改, 但是可以改变对象内部的属性.

ES6中，对对象字面量进行了很多增强。
属性初始化简写和方法的简写：

6.事件监听

监听用户发生的时间，比如点击、拖拽、键盘事件等等

v-on指令------------绑定事件监听器

v-on:click可以写成@click

v-on参数

当通过methods中定义方法，以供@click调用时，需要注意参数问题：

情况一：如果该方法不需要额外参数，那么方法后的()可以不添加。

但是注意：如果方法本身中有一个参数，那么会默认将原生事件event参数传递进去

情况二：如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件。

v-on修饰符

Vue提供了修饰符来帮助我们方便的处理一些事件：.

.stop - 调用 event.stopPropagation()。（阻止事件冒泡）

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

.prevent - 调用 event.preventDefault()。（阻止默认行为）

.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。

.native - 监听组件根元素的原生事件。.

.once - 只触发一次回调。

7.条件判断----v-if、v-else-if、v-else

v-if的原理：
v-if后面的条件为false时，对应的元素以及其子元素不会渲染。
也就是根本没有不会有对应的标签出现在DOM中。

<h2 v-if="score>=90">优秀</h2>//当条件不满足执行下面的
<h2 v-else-if="score>=80">良好</h2>
<h2 v-else-if="score>=60">及格</h2>
<h2 v-else>不及格</h2>

如果我们不希望Vue出现类似重复利用的问题，可以给对应的input添加key 并且我们需要保证key的不同

v-show

v-show的用法和v-if非常相似，也用于决定一个元素是否渲染：
v-if当条件为false时，压根不会有对应的元素在DOM中。
v-show当条件为false时，仅仅是将元素的display属性设置为none而已。

当需要在显示与隐藏之间切片很频繁时，使用v-show（dom之中没有删除）
当只有一次切换时，通过使用v-if

8.循环遍历

遍历数组

语法格式：v-for=(item, index) in items

其中的index就代表了取出的item在原数组的索引值。

 <!--1.在遍历的过程中,没有使用索引值(下标值)-->
  <ul>
    <li v-for="item in names">{{item}}</li>
  </ul>
  <!--2.在遍历的过程中, 获取索引值-->
  <ul>
    <li v-for="(item, index) in names">
      {{index+1}}.{{item}}
    </li>
  </ul>

遍历对象

<!--1.在遍历对象的过程中, 如果只是获取一个值, 那么获取到的是value-->
  <ul>
    <li v-for="item in info">{{item}}</li>
  </ul>
  <!--2.获取key和value 格式: (value, key) -->
  <ul>
    <li v-for="(value, key) in info">{{value}}-{{key}}</li>
  </ul>
  <!--3.获取key和value和index 格式: (value, key, index) -->
  <ul>
    <li v-for="(value, key, index) in info">{{value}}-{{key}}-{{index}}</li>
  </ul>

检测数组更新（响应式）

因为Vue是响应式的，所以当数据发生变化时，Vue会自动检测数据变化，视图会发生对应的更新。
Vue中包含了一组观察数组编译的方法，使用它们改变数组也会触发视图的更新。

		//1.push方法
        this.letters.push('aaa')
        this.letters.push('aaaa', 'bbbb', 'cccc')

        // 2.pop(): 删除数组中的最后一个元素
        this.letters.pop();

        // 3.shift(): 删除数组中的第一个元素
        this.letters.shift();

        // 4.unshift(): 在数组最前面添加元素
        this.letters.unshift()
        this.letters.unshift('aaa', 'bbb', 'ccc')

        // 5.splice作用: 删除元素/插入元素/替换元素
        // 删除元素: 第二个参数传入你要删除几个元素(如果没有传,就删除后面所有的元素)
        // 替换元素: 第二个参数, 表示我们要替换几个元素, 后面是用于替换前面的元素
        // 插入元素: 第二个参数, 传入0, 并且后面跟上要插入的元素
        // splice(start)
        // splice(start):
        this.letters.splice(1, 3, 'm', 'n', 'l', 'x')
        // this.letters.splice(1, 0, 'x', 'y', 'z')

        // 5.sort()排序
        this.letters.sort()

        // 6.reverse()反转
        this.letters.reverse()

        // 注意: 通过索引值修改数组中的元素
        this.letters[0] = 'bbbbbb';
        this.letters.splice(0, 1, 'bbbbbb')
        // set(要修改的对象, 索引值, 修改后的值)
         Vue.set(this.letters, 0, 'bbbbbb')
      }

组件的key属性

Diff算法就可以正确的识别此节点
找到正确的位置区插入新的节点。
key的作用主要是为了高效的更新虚拟DOM。

9.表单绑定v-model

Vue中使用v-model指令来实现表单元素和数据的双向绑定。

v-model其实是一个语法糖，它的背后本质上是包含两个操作：
1.v-bind绑定一个value属性
2.v-on指令给当前元素绑定input事件
也就是说下面的代码：等同于下面的代码：

<input type="text" v-model="message">
等同于
<input type="text" v-bind:value="message" v-on:input="message = $event.target.value">

v-model：radio

   <label for="male">
    <input type="radio" id="male" value="男" v-model="sex">男
  </label>
  <label for="female">
    <input type="radio" id="female" value="女" v-model="sex">女
  </label>
  <h2>您选择的性别是: {{sex}}</h2>

v-model：checkbox

复选框分为两种情况：单个勾选框和多个勾选框
单个勾选框：
v-model即为布尔值。
此时input的value并不影响v-model的值。
多个复选框：
当是多个复选框时，因为可以选中多个，所以对应的data中属性是一个数组。
当选中某一个时，就会将input的value添加到数组中。

<div id="app">
  <!-- 1.checkbox单选框-->
  <!--<label for="agree">-->
    <!--<input type="checkbox" id="agree" v-model="isAgree">同意协议-->
  <!--</label>-->
  <!--<h2>您选择的是: {{isAgree}}</h2>-->
  <!--<button :disabled="!isAgree">下一步</button> -->

  <!--2.checkbox多选框-->
  <input type="checkbox" value="篮球" v-model="hobbies">篮球
  <input type="checkbox" value="足球" v-model="hobbies">足球
  <input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
  <input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
  <h2>您的爱好是: {{hobbies}}</h2>

  <label v-for="item in originHobbies" :for="item">
    <input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}
  </label>
</div>
--------------------------
const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      isAgree: false, // 单选框
      hobbies: [], // 多选框,
      originHobbies: ['篮球', '足球', '乒乓球', '羽毛球', '台球', '高尔夫球']
    }
  })

v-model：select

和checkbox一样，select也分单选和多选两种情况。
单选：只能选中一个值。
v-model绑定的是一个值。
当我们选中option中的一个时，会将它对应的value赋值到mySelect中
多选：可以选中多个值。
v-model绑定的是一个数组。
当选中多个值时，就会将选中的option对应的value添加到数组mySelects中

<div id="app">
  <!--1.选择一个-->
  <select name="abc" v-model="fruit">
    <option value="苹果">苹果</option>
    <option value="香蕉">香蕉</option>
    <option value="榴莲">榴莲</option>
    <option value="葡萄">葡萄</option>
  </select>
  <h2>您选择的水果是: {{fruit}}</h2>

  <!--2.选择多个-->
  <select name="abc" v-model="fruits" multiple>
    <option value="苹果">苹果</option>
    <option value="香蕉">香蕉</option>
    <option value="榴莲">榴莲</option>
    <option value="葡萄">葡萄</option>
  </select>
  <h2>您选择的水果是: {{fruits}}</h2>
</div>
------------------------
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      fruit: '香蕉',
      fruits: []
    }
  })

lazy修饰符：

默认情况下，v-model默认是在input事件中同步输入框的数据的。

也就是说，一旦有数据发生改变对应的data中的数据就会自动发生改变。

lazy修饰符可以让数据在失去焦点或者回车时才会更新：

number修饰符：

默认情况下，在输入框中无论我们输入的是字母还是数字，都会被当做字符串类型进行处理。

但是如果我们希望处理的是数字类型，那么最好直接将内容当做数字处理。

number修饰符可以让在输入框中输入的内容自动转成数字类型：

trim修饰符：

如果输入的内容首尾有很多空格，通常我们希望将其去除

trim修饰符可以过滤内容左右两边的空格

<div id="app">
  <!--1.修饰符: lazy-->
  <input type="text" v-model.lazy="message">
  <h2>{{message}}</h2>

  <!--2.修饰符: number-->
  <input type="number" v-model.number="age">
  <h2>{{age}}-{{typeof age}}</h2>

  <!--3.修饰符: trim-->
  <input type="text" v-model.trim="name">
  <h2>您输入的名字:{{name}}</h2>
</div>

待续…
b站coderwhy老师：https://www.bilibili.com/video/BV17j411f74d?p=62&t=728