vue2第一部分

 

 

 

 

 

 一个小案例（要去官网下载vue的js文件，放到js文件夹中）：

 

 

 

 

容器和vue实例只能一一对应。

 

在双大括号中能写的可以是js表达式和js代码：

 

 

 

 ===

 

 v-bind：     表示给后面的字符动态绑定值，可以直接简写成：

 

 

 

 

v-model：value（简写：v-model）

 

 

 容器和实例有两种关联写法：

 

 date的两种写法：

 

 函数式的简写：

 

 

 

 ==============

MVVM模型：

 

 

 

 用方法将age属性注入到person中（这样注入的值是无法遍历到的，要添加配置项才能修改）：

 

 加一个配置项就能遍历到（object.keys就是用来遍历keys）：

 

 

还有几个配置项：

 

 

getter和setter：

 

 简单的一个数据代理（用obj2去改变obj1的x值）：

 

 

 

 

 

 ============

事件处理：

 

 

====

 

 

 

 

 

 

 

 

 

 

演示用插值语法和method方法：

 

 计算属性的演示：

 

 

 

 

 

 计算属性的简写（只有查询没有修改的时候才能这么写）：

 

 ==============

监视属性：

 

 第二种写法：

 

 

 深度监视，监视属性多级结构中的值：

 

 

 

 监视的简写形式（只有不写配置项如：deep的时候才可以简写）：

 

 第二种写法：

 

 

 

 

 

 

 

 优化一下（三种心情随机出现）：

 

 

 

 

 

 

 =============

 

 

 

 列表渲染

 遍历数组：

 必须要给每个结构取个唯一的名字，就是key

p就是每个元素，index就是每个元素的索引

 

 

 遍历对象：

 

 遍历字符串：

 

 

设置key的作用，key的原理：

 

 

 

 

列表的过滤：

 

 

 

 做个优化：

 

 用计算属性代替watch实现过滤，其中 indexof方法是判断是否包含，返回值为-1代表不包含：

 

 =========

列表排序：

 

通过计算属性实现排序，其中.sort方法就是用来排序，通过两个参数p1-p2或者p2-p1实现升序或者降序

 

 

vue对象数据监测的原理P34

vue数组数据监测的原理P35，36

 

 

 

 

 ========

过滤器：

 

 

 

========

 

 

 

 

 

 

 ===========

 

 =============

 

 

 ============

 

==================

自定义指令P47

 

 

 

 

 

 

 

 ===========

生命周期：