Vue基础知识

一、使用Vue实现helloworld

1.1 Vue安装地址

https://cn.vuejs.org/v2/guide/installation.html

1.2 兼容性

• Vue不支持IE8及以下版本，因为Vue使用了IE8无法模拟的ES5特性。但Vue兼容所有兼容ES5特性的浏览器

1.3 Vue的引用

1.4 helloworld原生JS写法

1.5 helloworld vue写法

1.5.1 2s后改变content内容

二、MVVM模式

2.1 MVP模式

2.2 JQuery实现简单的todolist(MVP模型)

2.3 MVVM模式

三、简单的todolist

3.1 最基本的Vue写法

3.2 全局组件写法

3.3 局部组件写法

四、简单的组件间传值

4.1 父组件给子组件传值

4.2 子组件给父组件传值

注意：
部分同学会遇到这个错误

这个错误的原因是：
这是Vue特有的特性：非侵入式响应系统所引起的，Vue不允许动态添加根级响应式属性，所以必须在初始化实例之前声明根级响应式属性，哪怕只是一个空值。

五、Vue的模板语法

• v-text和插值表达式表示的完全一样，但是都不能解析HTML代码，v-html可以

六、计算属性、方法与侦听器

6.1 计算属性

• 因为计算属性有缓存，所以性能更好相对于方法来说

• 当它依赖的数据不做改变时，一直不在重复调用
  

6.2 方法

• 方法在数据变化是就会被调用，没有缓存机制，因此性能不好
  

6.3 侦听器

• 有缓存机制，但是代码结构更加复杂
• 更适合数据变化时的异步操作
  

七、计算属性的getter和setter方法

八、Vue中的样式绑定

8.1 class对象绑定

8.2 class数组绑定

8.3 style对象形式

8.3 style数组形式

九、Vue中的条件渲染

9.1 v-if与v-show的区别

• v-if和v-show都能控制元素的显示与隐藏
• v-if是在DOM中频繁插入与删除元素来控制显示与隐藏
• v-show是通过display:none来控制元素显示与隐藏
• 因此在频繁需要控制元素显示与隐藏的条件下，用v-show性能更好
  

9.2 v-if的使用

十、Vue中的列表渲染

10.1 最简单的例子

10.2 key的作用

• key可以提升列表的渲染效率，高效的更新虚拟DOM，key的唯一性保证在同级vnode的diff过程中，可也快速地根据=key对比是否为新节点。利用key的唯一性生成map对象，这样比遍历更快
  
• 向数组中添加数据不能用数组下标的方式，之能用数组的方法pop push shift unshift splice sort reverse
  

十一、Vue中set方法

• 当我们在想想user中添加活改变一项时，我们可以使用set
• set既是全局方法也是实例方法
• 利用索引不能直接改变页面上的name
  

十二、 Vue中的事件处理

12.1 基础的事件处理

12.2 事件处理传参

12.3 事件修饰符

@click.stop 阻止事件冒泡
@click.self self要求只有当e.target=e.currentTarget时才会触发
@click.once 执行一次之后就解绑
@click.capture 按照事件捕获顺序执行
@click.prevent 阻止默认行为

12.4 按键修饰符

@keydown.enter 只有enter键按下才出发

12.5 系统修饰符

同时按住才会触发
@keydown.alt
@keydown.ctrl
@keydown.shift
@keydown.meta

12.6 鼠标按键修饰符

@click.right 只有用鼠标右键点击时触发
@click.middle @click.left 同上

十三、Vue中的表单绑定

13.1 v-model

13.2 .lazy

• 失去焦点时触发

13.3 .trim

• 去掉两端空格，中间的不能去掉

13.4 .number

• 输入的值能被转化为number类型就转化为number类型
  

十四、使用组件的细节

14.1 .使用is解决table ol ul select中出现的bug

• bug原因及复现

因为HTML规定了这几个标签中必须是tr li option才会被浏览器解析，所以我们使用组件的时候就会遇到如下问题：

为了解决上述问题，我们使用is

14.2 子组件中的data

• 子组件中的data应该是个函数，不应该是个对象，这保证每个实例对象的data都是独立的不会相互影响。如果是对象，就会被共用，无论多少组件都会是一个值
  

14.3 通过ref操作DOM

十五、父子组件之间的数据传递

15.1 父组件通过属性给子组件传值

15.1 子组件给父组件传值

十六、组件参数校验与非props特性

16.1 组件参数校验

16.2 非props特性

• 父组件中声明了，但是子组件中没有props接收就使用，这样会报错
• 属性会展示在DOM结构中

十七、给组件绑定原生事件

十八、非父子组件之间传值

十九、插槽

19.1 插槽的简单使用

• 从父组件像子组件中优雅的传递DOM结构
  

19.2 作用域插槽

• 场景

当子组件做循环或者某一部分的DOM结构应该由外部传递过来的时候

二十、动态组件和v-once指令

20.1 动态组件

20.1.1 原始写法

20.1.1 动态组件写法

20.2 v-once

• 只渲染一次，之后数据无论怎么变化都不会发生改变

二十一、Vue中的CSS动画

21.1 过渡动画

21.2 引入annimate.css

21.3 初始化就有动画效果

21.4 过渡和动画同时使用并兼并过渡时长

21.5 自定义时长

二十二、Vue中的JS动画与Velocity.js的集合

22.1 基础的JS动画实现

22.2 Velocity.js的使用

22.3 封装一个简单的动画组件