关于程序员:Vue简明教程之入门

渐进式 JavaScript 框架

易用、灵便、高效 vue 官网

为什么举荐 vue

轻量级框架、简略易学、双向数据绑定、组件化、视图数据接口拆散、虚构 DOM、运行熟读快

与其余 JS 框架的关联

1. 借鉴 Angular 的 模版 和数据绑定 技术
2. 借鉴 React 的 组件化 和虚构 DOM

模版语法

插值语法

1. 性能: 用于解析标签体内容
2. 语法: {{xxx}}，xxxx 会作为 js 表达式解析

指令语法

1. 性能: 解析标签属性、解析标签体内容、绑定事件
2. 举例：v-bind:href = ‘xxxx’，xxxx 会作为 js 表达式被解析
3. 阐明：Vue 中有有很多的指令，此处只是用 v-bind 举个例子

数据绑定

单向数据绑定

1. 语法：v-bind:href =”xxx” 或简写为 :href
2. 特点：数据只能从 data 流向页面

双向数据绑定

1. 语法：v-mode:value=”xxx” 或简写为 v-model=”xxx”
2. 特点：数据不仅能从 data 流向页面，还能从页面流向 data

MVVM 模型

1. M：模型(Model)：对应 data 中的数据
2. V：视图(View)：模板
3. VM：视图模型(ViewModel)：Vue 实例对象数据代理

Vue 中的数据代理：

​ 通过 vm 对象来代理 data 对象中属性的操作（读 / 写）

Vue 中数据代理的益处：

​ 更加不便的操作 data 中的数据

基本原理：

​ 通过 Object.defineProperty() 把 data 对象中所有属性增加到 vm 上

​ 为每一个增加到 vm 上的属性，都指定一个 getter/setter

​ 在 getter/setter 外部去操作（读 / 写）data 中对应的属性

事件处理

事件的根本应用

1. 应用 v-on:xxx 或 @xxx 绑定事件，其中 xxx 是事件名
2. 事件的回调须要配置在 methods 对象中，最终会在 vm 上
3. methods 中配置的函数，不要用箭头函数！否则 this 就不是 vm 了
4. methods 中配置的函数，都是被 Vue 所治理的函数，this 的指向是 vm 或 组件实例对象
5. @click=”demo” 和 @click=”demo($event)” 成果统一，但后者能够传参

绑定监听

1. v-on:xxx=”fun”
2. @xxx=”fun”
3. @xxx=”fun(参数)”
4. 默认事件形参: event
5. 隐含属性对象: $event

事件修饰符

1. .prevent : 阻止事件的默认行为（罕用）event.preventDefault()
2. .stop : 阻止事件冒泡（罕用）event.stopPropagation()
3. .capture 实现捕捉触发事件的机制，从外往里进行事件执行
4. .self 实现只有点击以后元素时候，才会触发事件处理函数
5. .once 事件只触发一次（罕用）

6. .passive：事件的默认行为立刻执行，无需期待事件回调执行结束

   .stop 和 .self 的区别：.self 只会阻止本人身上冒泡行为的触发，并不会真正阻止 冒泡的行为

键盘修饰符

Vue 中罕用的按键别名

• 回车 => enter
• 删除 => delete (捕捉“删除”和“退格”键)
• 退出 => esc
• 空格 => space
• 换行 => tab (非凡，必须配合 keydown 去应用)
• 上 => up
• 下 => down
• 左 => left
• 右 => right

Vue 未提供别名的按键，能够应用按键原始的 key 值去绑定，但留神要转为 kebab-case（短横线命名）

零碎润饰键（用法非凡）

ctrl、alt、shift、meta

(1). 配合 keyup 应用：按下润饰键的同时，再按下其余键，随后开释其余键，事件才被触发。

(2). 配合 keydown 应用：失常触发事件。

也能够应用 keyCode 去指定具体的按键（不举荐）

Vue.config.keyCodes. 自定义键名 = 键码，能够去定制按键别名

Vue.config.keyCodes.f2 = 113;

js 外面的键盘事件对应的键码：

(http://www.cnblogs.com/wuhua1…)

计算属性

定义：要用的属性不存在，要通过已有属性计算得来

原理：底层借助了 Objcet.defineproperty 办法提供的 getter 和 setter

get 函数什么时候执行？

(1). 首次读取时会执行一次

(2). 当依赖的数据产生扭转时会被再次调用

劣势：与 methods 实现相比，外部有缓存机制（复用），效率更高，调试不便

备注：

1. 在 computed 对象中定义计算属性
2. 计算属性最终会呈现在 vm 上，间接读取应用即可
3. 如果计算属性要被批改，那必须写 set 函数去响应批改，且 set 中要引起计算时依赖的数据产生扭转
4. 在援用的时候，肯定不要加 () 去调用，间接把它 当作 一般 属性去应用就好
5. 计算属性里的办法必须 return

data:{
  firstName:'张',
  lastName:'三',
  x:'你好'
},
computed:{
  fullName:{
    // get 有什么作用？当有人读取 fullName 时，get 就会被调用，且返回值就作为 fullName 的值
    // get 什么时候调用？1. 首次读取 fullName 时。2. 所依赖的数据发生变化时。get(){// console.log(this) // 此处的 this 是 vm
      return this.firstName + '-' + this.lastName
    },
    // set 什么时候调用? 当 fullName 被批改时。set(value){const arr = value.split('-')
      this.firstName = arr[0]
      this.lastName = arr[1]
    }
  },
  // 简写
  fullName(){console.log('get 被调用了')
    return this.firstName + '-' + this.lastName
  }
}

监督属性

1. 当被监督的属性变动时, 回调函数主动调用, 进行相干操作
2. 监督的属性必须存在，能力进行监督！！

监督的两种写法：

(1). new Vue 时传入 watch 配置

(2). 通过 vm.$watch 监督

const vm = new Vue({
  el:'#root',
  data:{isHot:true,},
  watch:{
    // 失常写法
    isHot:{
      immediate:true, // 初始化时让 handler 调用一下
      // handler 什么时候调用？当 isHot 产生扭转时。handler(newValue,oldValue){console.log('isHot 被批改了',newValue,oldValue)
      }
    },
    // 简写
    isHot(newValue,oldValue){console.log('isHot 被批改了',newValue,oldValue,this)
    }
  }
})

// 失常写法
vm.$watch('isHot',{
  immediate:true, // 初始化时让 handler 调用一下
  //handler 什么时候调用？当 isHot 产生扭转时。handler(newValue,oldValue){console.log('isHot 被批改了',newValue,oldValue)
  }
})
// 简写
vm.$watch('isHot',(newValue,oldValue)=>{console.log('isHot 被批改了',newValue,oldValue,this)
})

深度监督

1. Vue 中的 watch 默认不监测对象外部值的扭转（一层）
2. 配置 deep: true 能够监测对象外部值扭转（多层）

备注：

(1). Vue 本身能够监测对象外部值的扭转，但 Vue 提供的 watch 默认不能够！

(2). 应用 watch 时依据数据的具体构造，决定是否采纳深度监督。

new Vue({
  el:'#root',
  data:{
    numbers:{
      a:1,
      b:1,
        c:{
          d:{e:100}
        }
    }
  },
  watch:{
    // 监督多级构造中某个属性的变动
    'numbers.a':{handler(){console.log('a 被扭转了')
      }
    },
    // 监督多级构造中所有属性的变动
    numbers:{
        deep:true,
      handler(){console.log('numbers 扭转了')
      }
    }
  }
})

computed 和 watch 之间的区别：

1. computed 能实现的性能，watch 都能够实现
2. watch 能实现的性能，computed 不肯定能实现，例如：watch 能够进行异步操作

两个重要的小准则：

1. 所被 Vue 治理的函数，最好写成一般函数，这样 this 的指向才是 vm 或 组件实例对象
2. 所有不被 Vue 所治理的函数（定时器的回调函数、ajax 的回调函数等、Promise 的回调函数），最好写成箭头函数，这样 this 的指向才是 vm 或 组件实例对象

class 与 style 绑定

class 款式

字符串 实用于：类名不确定，要动静获取

<h1 :class="classObj"> 这是一个很大很大的 H1，大到你无奈设想！！！</h1>
data: {classObj: { red: true, thin: true, italic: false, active: false}
}

对象 实用于：要绑定多个款式，个数不确定，名字也不确定

<h1 :class="{red:true, italic:true, active:true, thin:true}"> 这是一个邪恶的 H1</h1>

数组 实用于：要绑定多个款式，个数确定，名字也确定，但不确定用不必

<h1 :class="['red','thin']"> 这是一个邪恶的 H1</h1>
// 三元表达式
<h1 :class="['red','thin', isactive?'active':'']"> 这是一个邪恶的 H1</h1>
// 数组嵌套对象
<h1 :class="['red','thin', {'active': isactive}]"> 这是一个邪恶的 H1</h1>

<li class="li-tab" v-for="(item,index) in tabsParam"
    @click="toggleTabs(index)"
    :class="[{active:index==nowIndex}, index==0?'li-tab-left':'li-tab-right']">{{item}}
</li>

style 款式

​ 写 CSS 属性名的时候，比方 font-size，应用驼峰式 (camelCase) fontSize 或短横线分隔 (kebab-case，记得用单引号括起来) ‘font-size’

<h1 :style="{color:'red','font-size':'40px'}"> 这是一个凶恶的 H1</h1>

<h1 :style="h1StyleObj"> 这是一个凶恶的 H1</h1>
data: {h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200'}
}

<h1 :style="[h1StyleObj, h1StyleObj2]"> 这是一个凶恶的 H1</h1>
data: {h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200'},
  h1StyleObj2: {fontStyle: 'italic'}
}

条件渲染

v-if

• v-if=” 表达式 ”
• v-else-if=” 表达式 ”
• v-else=” 表达式 ”

实用于：切换频率较低的场景

特点：不展现的 DOM 元素间接被移除。

留神：v-if 能够和 :v-else-if、v-else 一起应用，但要求构造不能被“打断”

v-show

• v-show=” 表达式 ”

实用于：切换频率较高的场景

特点：不展现的 DOM 元素未被移除，仅仅是应用款式暗藏掉

留神：应用 v-if 的时，元素可能无奈获取到，而应用 v-show 肯定能够获取到

v-if：当暗藏构造时该构造会间接从整个 dom 树中移除

v-show：当暗藏构造时是在该构造的 style 中加上 display:none，构造仍然保留

当须要在显示与暗藏之间切片很频繁时，应用 v -show

当只有一次切换时，通过应用 v -if

列表渲染

语法：v-for=”(item, index) in xxx” :key=”yyy”

可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）

管制循环次数

// 能够截取循环的数据长度，从而管制循环的次数
v-for="(item,index) in domainList.slice(0, 2)"
// 在标签下紧跟 v -if 来进行管制，这里是用索引来进行管制的，所以循环的时候记得把 index 这个参数加到 v -for 循环中
v-for="(item,index) in domainList" v-if="index<3"

2.2.0+ 的版本里，当在组件中应用 v-for 时，key 当初是必须的

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用 ”策略。如果数据项的程序被扭转，Vue 将 不是挪动 DOM 元素来匹配数据项的程序 ，而是 简略复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。key 属性只能应用 number 或 string

​ 为了给 Vue 一个提醒，以便它能跟踪每个节点的身份，从而重用和从新排序现有元素，须要为每项提供一个惟一 key 属性

key 的外部原理

1. 虚构 DOM 中 key 的作用：

   key 是虚构 DOM 对象的标识，当数据发生变化时，Vue 会依据【新数据】生成【新的虚构 DOM】, 
   随后 Vue 进行【新虚构 DOM】与【旧虚构 DOM】的差别比拟，比拟规定如下：

2. 比照规定：

​ (1). 旧虚构 DOM 中找到了与新虚构 DOM 雷同的 key：
​ ①. 若虚构 DOM 中内容没变, 间接应用之前的实在 DOM！
​ ②. 若虚构 DOM 中内容变了, 则生成新的实在 DOM，随后替换掉页面中之前的实在 DOM。

​ (2). 旧虚构 DOM 中未找到与新虚构 DOM 雷同的 key
​ 创立新的实在 DOM，随后渲染到到页面。

3. 用 index 作为 key 可能会引发的问题

   1. 若对数据进行：逆序增加、逆序删除等毁坏程序操作:
           会产生没有必要的实在 DOM 更新 ==> 界面成果没问题, 但效率低。1. 如果构造中还蕴含输出类的 DOM：会产生谬误 DOM 更新 ==> 界面有问题。

4. 开发中如何抉择 key?

      1. 最好应用每条数据的惟一标识作为 key, 比方 id、手机号、身份证号、学号等惟一值。1. 如果不存在对数据的逆序增加、逆序删除等毁坏程序操作，仅用于渲染列表用于展现，应用 index 作为 key 是没有问题的。

数据检测

1. vue 会监督 data 中所有档次的数据
2. 如何监测对象中的数据？

​ 通过 setter 实现监督，且要在 new Vue 时就传入要监测的数据

​ (1). 对象中后追加的属性，Vue 默认不做响应式解决

this.persons[0] = {id:'001',name:'马老师',age:50,sex:'男'} // 不是响应式

​ (2). 如需给后增加的属性做响应式，请应用如下 API：

​ Vue.set(target，propertyName/index，value) 或

​ vm.$set(target，propertyName/index，value)

3. 如何监测数组中的数据？

​ 通过包裹数组更新元素的办法实现，实质就是做了两件事：

​ (1). 调用原生对应的办法对数组进行更新

​ (2). 从新解析模板，进而更新页面

4. 在 Vue 批改数组中的某个元素肯定要用如下办法：

​ 1. 应用这些 API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()

​ 2. Vue.set() 或 vm.$set()

特地留神：Vue.set() 和 vm.$set() 不能给 vm 或 vm 的根数据对象 增加属性！！！

// push 办法，向可向数组的开端增加一个或多个元素
this.letters.push('aaa')
this.letters.push('aaaa', 'bbbb', 'cccc')

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

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

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

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

// 删除元素: 第二个参数传入你要删除几个元素(如果没有传, 就删除前面所有的元素)
// 替换元素: 第二个参数, 示意咱们要替换几个元素, 前面是用于替换后面的元素
// 插入元素: 第二个参数, 传入 0, 并且前面跟上要插入的元素
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()

// 留神: 通过索引值批改数组中的元素 
// 不会批改
this.letters[0] = 'bbbbbb';
this.letters.splice(0, 1, 'bbbbbb')
// 能够批改
set(要批改的对象, 索引值, 批改后的值)
Vue.set(this.letters, 0, 'bbbbbb')

收集表单数据

若：<input type=”text”/>，则 v-model 收集的是 value 值，用户输出的就是 value 值

若：<input type=”radio”/>，则 v-model 收集的是 value 值，且要给标签配置 value 值

若：<input type=”checkbox”/>

1. 没有配置 input 的 value 属性，那么收集的就是 checked（勾选 or 未勾选，是布尔值）
2. 配置 input 的 value 属性:

​ (1) v-model 的初始值是非数组，那么收集的就是 checked（勾选 or 未勾选，是布尔值）

​ (2) v-model 的初始值是数组，那么收集的的就是 value 组成的数组

v-model 的三个修饰符：

​ lazy：失去焦点再收集数据

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

​ number：输出字符串转为无效的数字

// 留神：如果输出的第一个字是字符串，那 number 这个修饰符就不会失效。// 输出的第一个只能是数字或者小数点或者是正负号。<input type="text" v-model.number="msg">

​ trim：输出首尾空格过滤

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

过滤器

定义：对要显示的数据进行特定格式化后再显示（实用于一些简略逻辑的解决）

语法：

1. 注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
2. 应用过滤器：{{xxx | 过滤器名}} 或 v-bind: 属性 = "xxx | 过滤器名"

备注：

1. 过滤器也能够接管额定参数、多个过滤器也能够串联
2. 并没有扭转本来的数据, 是产生新的对应的数据

<div id="root">
  <h2> 显示格式化后的工夫 </h2>
  <!-- 过滤器实现 -->
  <h3> 当初是：{{time | timeFormater}}</h3>
  <!-- 过滤器实现（传参）-->
  <h3> 当初是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>
  <h3 :x="msg | mySlice"> 哈哈哈 </h3>
</div>

// 全局过滤器
Vue.filter('mySlice',function(value){return value.slice(0,4)
})

new Vue({
  el:'#root',
  data:{
    time:1621561377603,
    msg:'你好哈哈哈哈'
  },
  // 部分过滤器
  filters:{timeFormater(value,str='YYYY 年 MM 月 DD 日 HH:mm:ss'){// console.log('@',value)
      return dayjs(value).format(str)
    }
  }
})

指令

内置指令

• v-bind: 单向绑定解析表达式, 可简写为 :xxx
• v-model: 双向数据绑定
• v-for : 遍历数组 / 对象 / 字符串
• v-on : 绑定事件监听, 可简写为 @
• v-if : 条件渲染（为 true, 以后标签才会输入到页面）
• v-else: 条件渲染（为 false, 以后标签才会输入到页面）
• v-show: 条件渲染 (通过管制 display 款式来管制显示 / 暗藏)
• v-text: 向其所在的节点中渲染文本内容，与插值语法的区别：v-text 会替换掉节点中的内容，{{xx}}则不会

• v-html：更新元素的 innerHTML

  1. 作用：向指定节点中渲染蕴含 html 构造的内容。

  2. 与插值语法的区别：

        (1). v-html 会替换掉节点中所有的内容，{{xx}}则不会。(2). v-html 能够辨认 html 构造。

​ 3. 重大留神：v-html 有安全性问题！！！！

        (1). 在网站上动静渲染任意 HTML 是十分危险的，容易导致 XSS 攻打。

​ (2). 肯定要在可信的内容上应用 v -html，永不要用在用户提交的内容上！

• v-cloak: 避免闪现, 与 css 配合: [v-cloak] {display: none}

  1. 实质是一个非凡属性，Vue 实例创立结束并接管容器后，会删掉 v -cloak 属性
  2. 应用 css 配合 v -cloak 能够解决网速慢时页面展现出 {{xxx}} 的问题

• v-once:

  1. v-once 所在节点在首次动静渲染后，就视为动态内容了
  2. 当前数据的扭转不会引起 v -once 所在构造的更新，能够用于优化性能

• v-pre:

  1. 跳过其所在节点的编译过程
  2. 可利用它跳过：没有应用指令语法、没有应用插值语法的节点，会放慢编译

自定义指令

应用 Vue.directive() 定义全局的指令 v-focus

<!--  Vue 中所有的指令，在调用的时候，都以 v- 结尾 -->
<input type="text" class="form-control" v-model="keywords" v-focus v-color="'green'">
// 参数 1：指令的名称，在定义的时候，指令的名称后面，不须要加 v- 前缀, 但在调用的时候，必须 在指令名称前 加上 v- 前缀来进行调用
// 参数 2：是一个对象，这个对象身上，有一些指令相干的函数，这些函数能够在特定的阶段，执行相干的操作
    Vue.directive('focus', {
          // 每当指令绑定到元素上的时候，会立刻执行，只执行一次
      bind: function (el, binding) { 
          // binding 的第二个参数, 能够输出下面 v -color="'green'" 里的值
        el.style.color = binding.value
        // 留神：在每个函数中，第一个参数，永远是 el，示意被绑定了指令的那个元素。这个 el 参数，是一个原生的 JS 对象
        // 在元素 刚绑定了指令的时候，还没有 插入到 DOM 中去，这时候，调用 focus 办法没有作用
       //  因为，一个元素，只有插入 DOM 之后，能力获取焦点
       // el.focus()
       // 和款式相干的操作，个别都能够在 bind 执行
      },
           // 示意元素插入到 DOM 中的时候，会执行【触发 1 次】inserted: function (el) {el.focus()
        // 和 JS 行为无关的操作，最好在 inserted 中去执行，搁置 JS 行为不失效
      },
          // 当 VNode 更新的时候，会执行, 可能会触发屡次
      updated: function (el) {}})
        Vue.directive('color', {bind: function (el, binding) {el.style.color = binding.value}
    })

自定义公有指令

<div id="app2">
    <h3 v-fontweight="900" v-fontsize="50">123</h3>
 </div>
 new Vue({
      el: '#app2',
      directives: {
        'fontweight': { // 设置字体粗细的
          bind: function (el, binding) {el.style.fontWeight = binding.value}
        },
        'fontsize': function (el, binding) { // 留神：这个 function 等同于 把 代码写到了 bind 和 update 中去
          el.style.fontSize = parseInt(binding.value) + 'px'
        }
      }
    })

生命周期

罕用的生命周期钩子

1. mounted: 发送 ajax 申请、启动定时器、绑定自定义事件、订阅音讯等【初始化操作】。
2. beforeDestroy: 革除定时器、解绑自定义事件、勾销订阅音讯等【收尾工作】。

对于销毁 Vue 实例

1. 销毁后借助 Vue 开发者工具看不到任何信息。
2. 销毁后自定义事件会生效，但原生 DOM 事件仍然无效。
3. 个别不会在 beforeDestroy 操作数据，因为即使操作数据，也不会再触发更新流程了。

组件

定义组件

​ 应用 Vue.extend(options)创立，其中 options 和 new Vue(options)时传入的那个 options 简直一样，但也有点区别；

​ 区别如下：

​ 1. el 不要写，最终所有的组件都要通过一个 vm 的治理，由 vm 中的 el 决定服务哪个容器。

​ 2. data 必须写成函数，防止组件被复用时，数据存在援用关系。

注册组件

1. 部分注册：靠 new Vue 的时候传入 components 选项
2. 全局注册：靠 Vue.component(‘ 组件名 ’, 组件)

编写组件标签

<school></school>

VueComponent

1. school 组件实质是一个名为 VueComponent 的构造函数，且不是程序员定义的，是 Vue.extend 生成的
2. 只须要写 <school/> 或 <school></school>，Vue 解析时会帮创立 school 组件的实例对象，即 Vue 执行的：new VueComponent(options)
3. 特地留神：每次调用 Vue.extend，返回的都是一个全新的 VueComponent！！！！

4. VueComponent 的实例对象，当前简称 vc（也可称之为：组件实例对象）。

   Vue 的实例对象，当前简称 vm。

5. 对于 this 指向：

   (1). 组件配置中：

   ​ data 函数、methods 中的函数、watch 中的函数、computed 中的函数 它们的 this 均是【VueComponent 实例对象】。

   (2).new Vue(options)配置中：

   ​ data 函数、methods 中的函数、watch 中的函数、computed 中的函数 它们的 this 均是【Vue 实例对象】。

内置关系：VueComponent.prototype.proto === Vue.prototype，为了让组件实例对象（vc）能够拜访到 Vue 原型上的属性、办法。

本文由 mdnice 多平台公布