Vue学习1：基础知识（简介、指令语法、补充知识）

Vue学习1：基础知识（简介、指令语法、补充知识）

一、Vue简介

vue全家桶：core+vue-router+vuex
vue特点：
1.解耦视图和数据
2.可复用的组件
3.前端路由技术
4.状态管理
5.虚拟DOM

vue安装方式：

原生js编程范式：命令式编程
vue：声明式编程

vue的MVVM：


vue传入的option：

vue生命周期：

生命周期解释：Vue实例中生命周期created和mounted的区别(具体细节分析)。

二、Vue语法

1. 简单指令

mustache：{{}}，里面可以跟变量和表达式，响应式改变
v-once：{{}}不能改变内容
<p v-once>{{message}}</p>
v-html：设置元素的innerHTML，可以解析html结构
<p v-html="message"></p>
v-text：设置标签内容，会替换全部内容，支持表达式，只能解析文本
<p v-text="message"></p>
v-pre：原封不动显示，不做解析,显示{{message}}
<p v-pre>{{message}}</p>
v-cloak：在vue解析之前 p标签中包含了v-cloak属性，解析完成之后就没有这个属性（少用）
<p v-cloak>{{message}}</p>

2. v-bind 动态绑定属性

缩写（：属性）

常用:class="{类名1：boolean，类名2：boolean}"
:style="{属性名1：变量（字符串），属性名2：变量（字符串）}"

3. 计算属性computed

    computed: {
      //常用写法 实际上只是get（一个属性）
      // fullname: function() {
      //   return this.firstname + ' ' + this.lastname;
      // }

      //真正的规范写法 但是一般不写set方法 只读属性
      fullname: {
        set: function(newValue) {
		  const names = newValue.split(' ');
          this.firstname = names[0];
          this.lastname = names[1];
        },
        get: function() {
          return this.firstname + ' ' + this.lastname;
        }
      }

computed计算属性的好处：多次调用get属性，里面的函数只调用一次，之后调用会直接使用缓存，只有在更新了之后，才会重新调用函数，选择使用computed而不是mustache或者method能对性能有较大改善。

4. 事件监听 v-on

v-on基本使用

  <button v-on:click="increment">+</button>
  <!--  语法糖-->
  <button @click="increment">+</button>

添加参数
注意参数要传入基本数据类型，例如字符串要加单引号 不然会被当做变量

v-on修饰符

<div id="app">
  <!-- 1.阻止事件冒泡 .stop-->
  <div @click="divclick">
    <button @click.stop="btnclick">按钮</button>
  </div>

  <!--  2.prevent 阻止默认事件-->
  <form action="baidu">
    <input type="submit" value="提交" @click.prevent="submitClick">
  </form>

  <!--  3.监听某个键盘事件  enter回车按钮-->
  <input type="text" @keyup.enter="keyup">

  <!--  4.once 只触发一次回调-->
  <button @click.once="onceclick">只响应一次</button>
</div>

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

小问题：
存在虚拟dom的机制，在数据改变时，会复用已经存在的元素（用户输入内容也保存下来了），并修改变化的部分，再显示出来
不想复用的话，可以使用key属性，当key值不同时，不会复用（其实也就是更好的复用）

6. 显示v-show

注意v-show和v-if的区别：

<!--  v-if：当条件为false时，该dom元素不存在-->
  <h2 v-if="isShowed" id="aaa">{{message}}</h2>
<!--  v-show：当条件为false时，添加行内样式display：none，实际存在于dom树中-->
  <h2 v-show="isShowed" id="bbb">{{message}}</h2>

选择：当显示与隐藏切换很频繁时，使用v-show，当只有一次切换时，使用v-if

7. 遍历数据v-for

遍历数组和对象

<!--    遍历数组-->
    <li v-for="item in names">{{item}}</li>
    <li v-for="(item, index) in names">{{index+1}}.{{item}}</li>
  </ul>
  <ul>
<!--    遍历对象-->
    <li v-for="item in person">{{item}}</li>
    <li v-for="(value, key, index) in person">{{key}}.{{value}}.{{index}}</li>
  </ul>

使用v-for是添加key属性：更好的复用
当有key时，先匹配对应的对应的key值，在创建新的并插入
因此key的值要一一对应，譬如：<li v-for="item in letter" :key="item">{{item}}</li>（没有重复元素的前提下，这是一一对应的）

数组中的响应式方法：
因为Vue是响应式的，所以当数据变化时，Vue会自动检测数据变化，视图会发生对应的更新
push()、pop()、shift()、unshift()、splice()、sort()、reverse()

删除元素/插入元素/替换元素：
删除：splice(开始的位置, 删除的个数) splice(开始的位置) 后面的全部删除
替换：splice(开始的位置, 删除的个数, 追加元素1, 追加元素2...) Vue.set(要修改的对象, 索引值, 修改的值)
插入：splice(开始的位置, 0, 追加元素1, 追加元素2)

注意 通过索引值来修改数据，不是响应式的

8. 表单绑定v-model

基本使用：
mustache语法/v-bind是单向的，就是数据发生变化，会显示在页面上，但是反过来不行
v-model是双向绑定的，数据和UI对应变化，应用于input 和 textarea
<input type="text" v-model="message"> 相当于 <input tyoe="text" :value="message" @input="message=$event.target.value">
v-model其实是一个语法糖，包含两个操作：v-bind绑定一个value属性；v-on指令给当前元素绑定input事件

v-model：radio
数据中的sex和value绑定了，此时，可以不用添加name="sex"也可以实现互斥选择

    <div id="app">
        <label for="male">
            <input type="radio" id="male" name="sex" value="男" v-model="sex">男
        </label>
        <label for="female">
            <input type="radio" id="female" name="sex" value="女" v-model="sex">女
        </label>
        <h2>{{sex}}</h2>
    </div>

v-model：checkbox
把选中的和hobbies联系起来

    <div id="app">
        <input type="checkbox" id="agree" value="篮球" v-model="hobbies">篮球
        <input type="checkbox" id="agree" value="足球" v-model="hobbies">足球
        <input type="checkbox" id="agree" value="羽毛球" v-model="hobbies">羽毛球
        <input type="checkbox" id="agree" value="游泳" v-model="hobbies">游泳
        <h2>{{hobbies}}</h2>
    </div>

v-model：select

mySelect："", mySelects：[]

值绑定：
通过v-bind动态绑定value的值（originHobbies可能是网络获取的数据）

<label v-for="item in originHobbies" :for="item">
	<input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}} 
</label>

修饰符：
v-model.lazy：不及时双向绑定，而是当失去焦点或者回车时才更新数据
v-model.number：输入框获得的都是字符串类型，使用此修饰符可以转成数字类型，方便后续处理
v-model.trim：过滤内容两边的空格

三、其他补充知识

1. ES6对象增强写法

angular：google 实际是用typescript
typescript：Microsoft 增加了类型检测
flow：Facebook
react：Facebook 用JavaScript

2. js高阶函数filter/map/reduce

命令式编程：一步一步给指令执行
声明式编程：先把数据定义好，然后直接拿来使用， vue/react

面向对象编程：第一公民是对象
函数式编程：第一公民是函数

filter：
语法：var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])
回调函数返回一个布尔值，若为true，则加入新数组中，false则过滤掉

//返回小于100的值
let newNums = nums.filter(function(n) {
	return n < 100;
})

map：
语法：
var new_array = arr.map(function callback(currentValue[, index[, array]]) {
// Return element for new_array
}[, thisArg])
一个由原数组每个元素执行回调函数的结果组成的新数组

//返回两倍
let newNum = nums.map(function(n){
	return n * 2;
})

reduce：
语法：arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])
Accumulator (acc) (累计器)
Current Value (cur) (当前值)
Current Index (idx) (当前索引)
Source Array (src) (源数组)

作用：对数组中所有内容进行汇总

[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array){
  return accumulator + currentValue;
}); //10

[0, 1, 2, 3, 4].reduce((accumulator, currentValue, currentIndex, array) => {
    return accumulator + currentValue
}, 10) //20

三者综合起来写：

let total = nums.filter(n => n < 100).map(n => n * 2).reduce((prev, curr) => prev + curr);