vue

前端vue2.0框架知识及工具，我将不断学习和完善

vue框架

• 
• vue的功能
  •  通过尽可能简单的 API 实现响应的数据绑定和组合视图组件数据绑定通过尽可能简单的 API 实现响应的数据绑定和组合视图组件组合视图组件 2.开发手机app
• vue属性
  • 
  • vue的思想
    • 
  • vue的版本
    • 兼容性提示：Vue.js 不支持 IE8 及其以下版本。
  • vue1和vue2的区别
    • 
  • MVVM架构
    •   
  • $符号的使用
    • vue的实例属性和方法
      • 
    • 表示为变量
      • 表示为变量 可以用来表示变量，比如变量 var s='asdsd'或var $s='asdasd'; es6中也可以采用${XXX}来在字符串中插入变量（这个记住要利用v-bind）插入变量es6中也可以采用${XXX}来在字符串中插入变量（这个记住要利用v-bind）
    • Jquery中
      • Jquery中 利用$作为选择器，其实是jquery库对原生JavaScript对选择元素进行的一种封装！
  • 钩子函数的组成
    • 在不同状态的函数
    • 属性
      • 
      • el指令绑定元素
      • binding对象
        • name指令名
        • value指令绑定值
        • oldvalue指令绑定前一个值
        • expression绑定值表达式
          • 未计算的
        • arg传给指令的参数
        • modifiers: 包含修饰符的对象
      • vnode: Vue 编译生成的虚拟节点
      • oldVnode: 上一个虚拟节点
        • 仅在 update 和 componentUpdated 钩子中可用
    • bind：初始化时
      • bind: 只调用一次，指令第一次绑定到元素时调用， 功能：用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。初始化动作。
    • inserted:插入父节点
      • inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
    • update：模板更新
      • update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。
    • unbind 元素解绑
      • unbind: 只调用一次， 指令与元素解绑时调用。
    • componentUpdated：更新周期
      • componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
• vue的目录结构
  •  
  • build项目构建
    •  build和config文件主要是 webpack打包 端口的信息配置 ├─build.js // 生产环境构建 │ ├─check-version.js // 检查npm、node版本 │ ├─vue-loader.conf.js // webpack loader配置 │ ├─webpack.base.conf.js// webpack基础配置 │ ├─webpack.dev.conf.js // 开发环境配置，构建本地开发服务器 │ ├─webpack.prod.conf.js// 生产环境的配置
  • config配置目录
    •  ├─dev.env.js // 开发环境的配置 │ ├─index.js // 项目一些配置变量 │ ├─prod.env.js // 生产环境的配置
  • dist打包生成文件
    • dist是打包以后才会生成的文件（npm run build执行此命令）
  • node_modules npm 项目依赖模块
    • 
  • src开发目录
    • 
    • asset图片
    • module需要的模块
      • module就是当前需要的模块 
      • <router-link>路由
        • to属性
          • 
        • replace导航不留痕迹
          • 
        • append相对路径前添加基路径
          •  设置 append 属性后， 则在当前 (相对) 路径前添加基路径。 例如，我们从 /a 导航到一个相对路径 b， 如果没有配置 append，则路径为 /b， 如果配了，则为 /a/b
        • tag类指定何种标签
          •  有时候想要 渲染成某种标签， 例如 。 于是我们使用 tag prop 类指定何种标签， 同样它还是会监听点击，触发导航。
        • active-class链接激活时使用的 CSS 类名
          •  链接激活时使用的 CSS 类名。可以通过以下代码来替代。
        • exact-active-class链接被精确匹配的时候应该激活的 class
          • 
        • event触发导航的事件
          • 
      • animal.css库
        • anmation.css的使用
          •  使用vue的 enter-active-class 和 leave-active-class;后面紧跟animated类名和想使用的动画名称(区分大小写) 
      • 插件
        • vueAwesomeSwiper插件
          •  
        • better-scoll滚动插件
          • 
    • conponent需要的组件
      • <transition过渡
        •  
      • 内置组件
        • 
      • <transtion>动画组件
        • <transtion>动画组件
          • 
        • <style>的语法
          • 
      • 组件实例
        •  
        • 基础属性
          • 
          • 禁用特性继承inheritAttrs false
            • 
          • 多传入的属性合并已有特性
            •   class 和 style 特性会稍微智能一些，即两边的值会被合并起来， 从而得到最终的值：form-control date-picker-theme-dark。date-picker-theme-dark。
          • 组件接受特性自动添加
            • 例如，想象一下你通过一个 Bootstrap 插件使用了一个第三方的 组件， 这个插件需要在其 上用到一个 data-date-picker 特性。 我们可以将这个特性添加到你的组件实例上： 然后这个 data-date-picker="activated" 特性就会自动添加到 的根元素上。自动添加到 然后这个 data-date-picker="activated" 特性就会自动添加到 的根元素上。的根元素上然后这个 data-date-picker="activated" 特性就会自动添加到 的根元素上。
        • data属性
          • data是一个函数
            •  作用： 可以维护一份被返回对象的独立的拷贝，如果 data 是一个对象则会影响到其他实例
        • props:[prop]
          •  子组件需要显式地用 props 选项声明 "prop"：
          • 字符串类型
            • 
          • 对象形式
            • 
          • 组件和props的命名
            •  祖建明 w3c标准 字母全小写且必须包含一个连字符
          • 验证的原理
            • 注意那些 prop 会在一个组件实例创建之前进行验证，所以实例的属性 (如 data、computed 等) 在 default 或 validator 函数中是不可用的。 
            • 指定要求的功能
              • 我们可以为组件的 prop 指定验证要求，例如你知道的这些类型。 如果有一个需求没有被满足，则 Vue 会在浏览器控制台中警告你。 这在开发一个会被别人用到的组件时尤其有帮助。 可以用于过滤和提醒 工作原理： 当 prop 验证失败的时候，(开发环境构建版本的) Vue 将会产生一个控制台的警告。
            • 验证需求传递变量
              • 组件为 props 指定验证要求。定验证要求组件为 props 指定验证要求。 为了定制 prop 的验证方式，你可以为 props 中的值提供一个带有验证需求的对象，而不是一个字符串数组验证需求的对象为了定制 prop 的验证方式，你可以为 props 中的值提供一个带有验证需求的对象，而不是一个字符串数组字符串数组
            • 验证的构造类型
              • 
              • A基本类型检查
                • 
              • B多种可能类型
                • 
              • Cstring必填字符串
                • 
              • Dnumber带有默认值数字
                • 
              • Eobject带有默认值对象
                • // 带有默认值的对象 propE: { type: Object, // 对象或数组默认值必须从一个工厂函数获取 default: function () { return { message: 'hello' } } },
              • Ffunction自定义验证函数
                • // 自定义验证函数 propF: { validator: function (value) { // 这个值必须匹配下列字符串中的一个 return ['success', 'warning', 'danger'].indexOf(value) !== -1 } }
              • 自定义构造函数author
                • 
          • vue组件间通信
            • 父子组
              •  
              • 父传子
                • 传递属性prop
                  • Prop prop 是父组件用来传递数据的一个自定义属性。 父组件的数据需要通过 props 把数据传给子组件， 子组件需要显式地用 props 选项声明 "prop"： 传递的解析： 步骤1，父组件也就是vue实例中的属性传递到 子组件 步骤2：子组件像函数一样，接下参数，然后赋给组件内的形参 步骤3：组件实例内部进行解析，产生对应的模板 
                • 传递动态和静态类型
                  • 父组件发生更新子组件也发生更新
                  • 不可改变props
                    • 注意在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变这个对象或数组本身将会影响到父组件的状态。 解决：复制一个新的  传入后转换， 
              • 子传父
                • 
                • 1.子组件事件触发父组件$emit
                  • 鼠标点击 （就发送）（并传入事件名称）来触发一个事件： 步骤1 步骤2   
                • 2.父组件监听子组件v-on：事件
                  • 
                • 3.父组件事件监听接受$event
                  • 表达式的方式：  函数方法的方式 
        • tempel
        • methods
          • js动画方法
            • 
        • slot插槽
          • 
          • 父组件
            • 
          • 子组件
            • 
          • 具名插槽
            • 
        • 自定义事件
          • 命名
            • 不同于组件和 prop， 都会进行大写->小写的转化 事件名不存在任何自动化的大小写转换。 所以始终使用 kebab-case 的事件名。
            • 事件的命名
              •  并且 v-on 事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的)， 所以 v-on:myEvent 将会变成 v-on:myevent——导致 myEvent 不可能被监听到。
          • • 一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件， 但是像单选框、复选框等类型的输入控件可能会将 value 特性用于不同的目的。 model 选项可以用来避免这样的冲突：
    • app vue项目入口
      •   
      • template模板
        •  
        • <router-view>的引入
          •  
        • <link>animate.css库
          • 
          • 首次使用配置appear
            • 
          • 同时使用过渡 和动画
            • 
          • 定义动画总时长
            • 
          • 自定义入场动画和出场动画总时长
            • 
          • slot动画元素传递给子组件
            • 
        • 过滤器的使用
          • {{item.ctime | dataFormat('yyyy-mm-dd')}} dataFormat('yyyy-mm-dd') {{item.ctime | dataFormat('yyyy-mm-dd')}}
        • 递归组件实现
          • 
        • 事件
          • 这个事件是某些元素的属性
          • 鼠标修饰符
            • 只有修饰符
            • 修饰符可以串联
            • .stop阻止事件冒泡
            • .prevent不再重载页面
            • .capture事件捕获模式
              • ...
            • .self元素本身触发回调
              • ...
            • .once只能点击一次2.1.4
            • passive滚动立刻触发2.3.0
              • 
            • ctrl等系统修饰符
              • 
              • exact系统修饰符组合
                • 
            • 鼠标修饰符
              • 
          • 按键修饰符
            • 
            • enter等按键别名
              • 
            • 13按键码
              • 
            • 自定义键盘修饰符
              • 
          • 系统修饰符
            • 
          • 事件的种类
            • 
          • []动态绑定参数
            • ... [attributeName] ... 这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用。例如，如果你的 Vue 实例有一个 data 属性 attributeName，其值为 "href"，那么这个绑定将等价于 v-bind:href。 ... [eventName] ...
            • 参数值为null 移除绑定
              • 对动态参数的值的约束 动态参数预期会求出一个字符串，异常情况下值为 null。 这个特殊的 null 值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。移除绑定这个特殊的 null 值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。
            • 参数表达式空格 引号无效
              • 对动态参数表达式的约束 动态参数表达式有一些语法约束，因为某些字符， 例如空格和引号，放在 HTML 特性名里是无效的。 同样，在 DOM 中使用模板时你需要回避大写键名。  解决： 变通的办法是使用没有空格或引号的表达式，或用计算属性替代这种复杂表达式。计算属性变通的办法是使用没有空格或引号的表达式，或用计算属性替代这种复杂表达式。
            • 参数名字强制转化为小写
              • 需要留意浏览器会把特性名全部强制转为小写： 
          • 原生事件监听@click.native
            • 
          • 事件的使用
            • passive和prevent不能一起使用
              • 不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。
            • 事件绑定方法
              • 
        • vue指令
          • 
          • 数据绑定{{}}
            • 在html中显示 
            • 插值表达式
              •  数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值： Message: {{ msg }}
              • 插值表达式的使用
                • Mustache 标签将会被替代为对应数据对象上 msg 属性的值。上 msg 属性Mustache 标签将会被替代为对应数据对象上 msg 属性的值。 原理： 绑定的数据对象上 msg 属性发生了改变 插值处的内容都会更新。
              • 可以使用表达式
                • 
              • 不可以使用语句
                • 
            • @{{task}}输出内容
              • 
          • HTML格式绑定v-html
            • 会把html格式的文本 识别后输出为 文本
            • 输出html代码
              • 
            • 数据绑定和v-html绑定区别
              •  
          • 根据表达式值的真假渲染v-if
            •  
            • 执行原理
              • 只有在v-if指令的表达式为trully时 元素才会被浏览器渲染
            • v-else
              • 
            • v-if-else
              • 
            • 条件指令的使用
              • v-if控制tempate元素控制渲染
                • 
              • v-if/v-else复用元素不完全渲染
                • 1.这么做除了使 Vue 变得非常快之外， 2.还有其它一些好处。例如，如果你允许用户在不同的登录方式之间切换  程序分析：那么在上面的代码中切换 loginType 将不会清除用户已经输入的内容。 因为两个模板使用了相同的元素 不会被替换掉——仅仅是替换了它的 placeholder。
              • v-if/v-else利用key值完全渲染
                •  注： label仍然是重复的，所以还是不完全渲染，也快
              • v-if和v-for使用for优先级高
                • 
            • v-if和v-show的区别
              • v-if vs v-show v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。 相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。 一般来说， v-if 有更高的切换开销， v-show 有更高的初始渲染开销。 如果需要非常频繁地切换，则使用 v-show 较好； 如果在运行时条件很少改变，则使用 v-if 较好。 v-if全套 建立htlm 一边成 v-show糊弄 穿css 一直换
          • 根据表达式的真假改变css v-show
            •  不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。 v-show 只是简单地切换元素的 CSS 属性 display简单地切换元素v-show 只是简单地切换元素的 CSS 属性 display  
          • 多次渲染元素模块v-for
            •  v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 
            • v-for功能
              • value.key in json遍历对象
                • 
                • key/name键名
                  • 
                • value键值
                  • 
                • index序号
              • value,index in array遍历数组
                •  v-for 可以绑定数据到数组来渲染一个列表：
                • 功能渲染列表
                • index索引
                  • 
              • n in 10迭代整数
                • 
            • v-for属性
              • 可以用of替代in作为分隔符
                • 
              • v-for更新元素状态
                • 问题：数据顺序改变但渲染位置不变
                  • 当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。 如果数据项的顺序被改变如果数据项的顺序被改变， Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。这个类似 Vue 1.x 的 track-by="$index"。就地更新每个元素而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。这个类似 Vue 1.x 的 track-by="$index"。 解决 1.建议尽可能在使用 v-for 时提供 key attribute，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。 因为它是 Vue 识别节点的一个通用机制，key 并不仅与 v-for 特别关联。后面我们将在指南中看到，它还具有其它用途。
            • v-for的使用
              • 数组的更新
                • 变异方法会更新渲染
                  • 
                • 非变异方法不会更新渲染
                  • 变异方法，顾名思义，会改变调用了这些方法的原始数组。 相比之下，也有非变异 (non-mutating method) 方法， 例如 filter()、concat() 和 slice() 。它们不会改变原始数组，而总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组： 
                • vue不能检测的数组更新情况
                  •  解决方法： 使用后两种方法效果相同的方法
                  • vm.items[indexOfItem] = newValue
                    • 当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue 等效方法： 
                  • vm.items.length = newLength
                    • 当你修改数组的长度时，例如：vm.items.length = newLength 
              • 对象的变更
                • 问题vue不能检测对象属性的添和删
                  • 
                  • 解决方法
                    • 对于已经创建的实例，Vue 不允许动态添加根级别的响应式属性 但是，可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性。嵌套对象但是，可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性。  1.你可以添加一个新的 age 属性到嵌套的 userProfile 对象： Vue.set(vm.userProfile, 'age', 27) 2.你还可以使用 vm.$set 实例方法，它只是全局 Vue.set 的别名： vm.$set(vm.userProfile, 'age', 27)
                • 为对象赋予新的属性方法
                  • 比如使用 Object.assign() 或 _.extend()。在这种情况下， 你应该用两个对象的属性创建一个新的对象。 创建一个新的对象。  不要 
              • 显示过滤和排序后的版本（不改变原始数据）
                • 我们想要显示一个数组经过过滤或排序后的版本，而不实际改变或重置原始数据。 在这种情况下，可以创建一个计算属性，来返回过滤或排序后的数组。可以创建一个计算属性，来返回过滤或排序后的数组。 
                • 计算属性不使用时
                  • 
              • v-for和tempate控制多段元素渲染
                • 
          • 只渲染元素和组件一次之后的渲染跳过 v-once
            • 
          • 属性绑定指令v-bind
            •   相应更新 元素属性
            • 缩写
              •  区别class传递是 是类值是否传递 style传递是类值是传递对应的值
            • class元素的样式
              • 表达式的结果类型除了字符串之外，还可以是对象或数组 class 与 style 是 HTML 元素的属性，用于设置元素的样式、
              • 属性
                • 多属性覆盖
                  •  text-danger 类背景颜色覆盖了 active 类的背景色：
              • 方法1：数组传递
                • 
                • 在数组传递中使用对象
                  •  === 
              • 方法2：对象传值
                • 标准的代码格式 
                • 传入多个对象
                  •   之后的运行结果会进行化简为：化简为： 
                • 对象传递执行原理
                  •  原理：active 这个 class 存在与否 将取决于数据属性 isActive 的 truthiness。 class={属性：属性的属性}
              • 三元表达式--根据条件切换class属性
                •  
            • style(内联元素样式)
              • style(内联样式)
              • 方法1：直接设置样式
                • 
              • 方法2：绑定样式对象
                • 
              • 方法3：使用数组多个样式对象
                • 
              • v-bind使用vue会自动添加需要的前缀
                • 
                • 2.3+提供前缀值
                  • 2.3.0+ 从 2.3.0 起你可以为 style 绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值，例如： 这样写只会渲染数组中最后一个被浏览器支持的值。 在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 display: flex。
          • 事件绑定指令v-on
            •  
            • v-on功能：事件监听
              • 因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。 当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何清理它们。
            • v-on的属性
              • 缩写
                • 
            • v-on使用方法
              • v-on接受定义方法
                • 
              • v-on内联js语句
                • 
          • 字符串绑定指令v-text=”msg"
            •  
          • 表单元素双向绑定指令v-mode
            • 
            • 功能
              • 1.表单控件元素上创建双向数据绑定。 2.监听input change事件v-mode获取最新值 并且同步给vm中的数据模型
            • 修饰符
              • .lazy在change事件中同步
                • .lazy 在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：
              • .number输入值转化数字
                • .number 如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值： 这通常很有用，因为在 type="number" 时 HTML 中输入的值也总是会返回字符串类型。
              • .trim过滤输入首尾空格
                • .trim 如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入：
            • v-mode工作原理
              • 只将实例的数据作为数据来源
                • v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
              • 不同元素不同属性不同事件
                • 
            • 使用
              • 元素位置
                • input表单元素
                  • 
                  • checkbox复选框type
                    • 
                  • radio单选按type钮
                    • 
                • select下拉列表元素
                  • 
                • <textarea>文本段元素
              • v-mode值绑定数据
                • 
              • v-mode在组件使用中绑定事件
                • 
                • 组件部分的设置
                  •  
                • 组件实例部分
                  • 
          • 跳过元素的编译过程v-pre
            • 
          • 保持元素直到关联实例结束编译v-cloak
            •  
          • 自定义指令
            • 
      • script逻辑处理
        •   $符号指定的是实例内部的方法 ，而不再是表层的参数
        • 混入 (mixins)
          • 就是预定义 
          • 选项合并
            • 当组件和混入对象含有同名选项时，这些选项将以恰当的方式混合同名选项当组件和混入对象含有同名选项时，这些选项将以恰当的方式混合  
            • methods 选项中有相同的函数名，则 Vue 实例优先级会较高
              • 
          • 全局混入
            • 相当于改变了Vue的构造器  一旦使用全局混入对象，将会影响到 所有 之后创建的 Vue 实例。 使用恰当时，可以为自定义对象注入处理逻辑。 谨慎使用全局混入对象，因为会影响到每个单独创建的 Vue 实例 (包括第三方模板)。
        • import引入
          • import VueResource from ‘’
            • 
        • 选项/数据
          •   
          • 选项/DOM
            • 
            • el视图的挂载点
              • 
            • template标签方式定义view
              • 
            • render通过vnode创建view
              • 
          • data数据属性
            • 
          • props父组件输出接口
          • methods事件属性
            • 
            • vue实例method中调用action方法
              • 
            • vue实例的axios的ajax方法
              • 
            • vue实例中的vue-soures方法
              • 
            • 手写js动画入场动画出场动画
              •  
          • computed计算属性
            • 
            • 计算属性功能
              • 在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量 message 的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时，就会更加难以处理。 对于任何复杂逻辑，你都应当使用计算属性任何复杂逻辑对于任何复杂逻辑，你都应当使用计算属性
            • getter读取属性
              • 
            • setter设值属性
            • compute和method的区别
              • 我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。 然而，不同的是compute是基于它们的响应式依赖进行缓存的。 只在相关响应式依赖改变时才重新求值。 这就意味着只要 message 还没有发生改变， 多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。   compute=检测值+method
              • 执行原理
                • 在template 中，我们可以看到，input 是直接绑 v-model="fullName"，如果我们这里直接修改了fullName的值，那么就会触发setter， 同时也会触发getter以及updated函数。其执行顺序是setter -> getter -> updated， 2.并不是触发了setter也就会触发getter，他们两个是相互独立的。是相互独立的2.并不是触发了setter也就会触发getter，他们两个是相互独立的。 我们这里修改了fullName会触发getter是因为setter函数里有改变firstName 和 lastName 值的代码。 也就是说我们如果注释掉上边的setter中修改firstName 和lastName的代码后就不会执行getter，如下：
          • watch 监听属性
            •  以上代码中我们创建了两个输入框，data 属性中， kilometers 和 meters 初始值都为 0。 watch 对象创建了两个方法 kilometers 和 meters。 当我们再输入框输入数据时，watch 会实时监听数据变化并改变自身的值。
            • 监听属性的功能
              •  虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。 当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
            • watch属性的重复用compute代替
              •  
          • computed vs methods
            • computed vs methods 我们可以使用 methods 来替代 computed，效果上两个都是一样的， 但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。 而使用 methods ，在重新渲染的时候，函数总会重新调用执行。 ，但是如果你不希望缓存，你可以使用 methods 属性。
          • 全局数据的绑定
            • 
        • 选项/生命周期函数
          •  生命周期函数/生命周期时间 钩子函数
          • 钩子函数的功能
            • 在事件发生时 就立刻执行的函数 就是在不同的执行时间，执行你想执行的函数
          • 钩子函数的实例
            • 
          • 分类
            • 
            • 创建期间的生命周期函数
              • 创建期间的生命周期函数： - beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性 - created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始 编译模板 - beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中挂载到页面 - beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中 - mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示指定的容器中 - mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示 
              • 1.数据未初始化-初始化
                • 
              • 2.内存中创建
                • 
              • 3.挂在到页面
                • 
            • 运行期间的生命周期函数
              • 运行期间的生命周期函数： - beforeUpdate：状态更新之前执行此函数， 此时 data 中的状态值是最新的，但是界面上显示的 数据还是旧的，因为此时还没有开始重新渲染DOM节点 - updated：实例更新完毕之后调用此函数， 此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！
              • 4.实例更新
                • 
            • 销毁期间的生命周期函数
              • 销毁期间的生命周期函数： - beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。 - destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
              • 5.实例销毁
                • 
      • style样式表
        • 
        • animation.css执行时间设置
          • 
      • vue的API
        • $vue实例组成
          • 实例属性
            • 
            • $attrs属性
              • 
          • 实例方法/数据
            • 
          • 实例方法/事件
            • 
          • 实例方法/生命周期
            • 
          • 事件接口(Events interface)
    • 自定义
      • vue.filter过滤器
        • 
        • 过滤器功能
          • Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化
        • filter全局过滤器
          • 
        • 自定义过滤器
          • 
        • 私有过滤器定义
          • 
        • 调用规则
          • 当有局部和全局两个名称相同的过滤器时候，会以就近原则进行调用，即：局部过滤器优先于全局过滤器被调用！
      • vue.directive自定义指令
        •  
        • 全局自定义函数
          • 
        • 自定义局部函数
          • 
        • 自定义指令的简写形式
          • 
    • main.js项目核心文件
      • 初始化vue实例并使用需要的插件   main.js 1.引入vue import Vue from 'vue' 2.引入app.vue 用他的内容来替换div id = app import App from './app.vue' 3.构建vue实例 new Vue ({ el : '#app', render : function(c){//c只是个形参 叫什么都可以 return c(App); } })
      • vue.use()
        •  使用vue.use()注册插件， 插件可以是一个函数， 可以是一个带有install属性的对象。 不管是函数还是install方法,第一个参数总是vue对象。 个人还是喜欢使用将插件的功能方法写在install方法里。因为install内的this指向的是plugin对象自身，扩展性更好。
      • vue实例中写入router
        • 
      • vue实例中写入store
        • 
    • router.js路由
      •  
      • 安装vue-router
        • 
      • vouter.js的配置
        • 
      • vue-router导航类型
        • 
      • path：‘路径:id’动态路由
        • 
      • router.js代码
        • import Vue from 'vue'; import VueRouter from 'vue-router'; //主体 import App from './components/app.vue'; import Home from './components/home.vue' //安装插件 Vue.use(VueRouter); //挂载属性 //创建路由对象并配置路由规则 let router = new VueRouter({ routes: [ //一个个对象 { path: '/home', component: Home } ] });
      • main.js代码
        • mai.js中 //new Vue 启动 import VueRouter from “vue-router” Vue.use（VueRouter） new Vue({ el: '#app', //让vue知道我们的路由规则 router: router, //可以简写router render: c => c(App), })
      • app.vue中留坑
        • //app.vue中 export default { data(){ return {} } }
    • vuex的store.js存储
      •  总线形式，单项数据流  工作原理：将各个组件的修改信息上传到 store.js文件 在分发到其它组件
      • 功能：实现非父子之间的通信
      • vuex的安装
        • 
      • 取值的组件{{}}里面使用this.$store.state
        • 
      • 创建mutation突变
        •  action存储事件 传入上下文和值 利用commit去获取mutatins里面的方法
      • 总线传输机制
        • 
      • 仓库关系
        •  
        • state公有数据
        • action异步操作
        • mutation同步数据修改
          • 
    • vue.resource,js网络请求
      • 
      • 安装vue-resource
        • 
      • vue-resourc的方法
        • 
    • Vue.js Ajax(axios)
      • Axios 是一个基于 Promise 的 HTTP 库 
      • axios([options])
        • 
      • axios.get(url[,options]);获取数据
        •   
      • response.data 读取 JSON 数据
        • 
      • 请求方法的别名
        • axios.request(config) axios.get(url[, config]) axios.delete(url[, config]) axios.head(url[, config]) axios.post(url[, data[, config]]) axios.put(url[, data[, config]]) axios.patch(url[, data[, config]]) 
  • index.html首页入口
    • 
  • static资源
    •  CSS+JS+IMG+JSON+fonts等
    • .babelrc Babel的配置文件
    • editorconfig 代码规范配置文件
    • .gitignore git忽略配置文件
    • .postcssrc.js postcss插件配置文件
  • text测试目录
    • 
  • package.json项目配置文件
    •  
    • 编译.vue文件
      • vue-loader vue-template-compiler 来加载并编译.vue文件
  • readme.md说明文档
    • 
• vue的使用
  • vue的API
    • vue全局配置
      • 
    • vue全局API
      • 
    • 选项/组合
      • 
    • 特殊属性
      • 
  • vue的安装方法
    • 
    • 1.初始化操作$ vue init webpack myProject
    • 2.设置global和cache路径
      •  修改全局的指针导向 ： 我就默认的没有改变 默认的在
    • 3.安装cnpm
      • 
    • 4.设置系统环境变量
      •  
  • vue创建工程的方法1：vue cli
    • vue创建工程方法2：vue ui
      •  
    • 1.进入操作目录
      • 
    • 2.vue create hello-world
      • 
    • 3.配置工程目录的选项
      •   
    • 4.安装相关依赖组件
      • 
    • 5.npm run serve运行项目
      • 
    • 6.localhost8080项目端口运行
      • 
  • vue的执行方法
    • 
  • vue的调试方法
    • vue serve demo1.vue
      • 
  • vue项目克隆使用的方法
    • npm install
      •  
    • npm bulid dev
      • 如果没有被编译过的话； 编译过的会在json中有记录
    • npm run dev
      • 
  • MVVM的开发方法
    • 
  • vue的sublime插件
    • 
    • vuejs snippets
      • Snippets Global: v vue ⇢ Vue instance vued ⇢ Vue directive vuef ⇢ Vue filter vuenexttick ⇢ Vue.nextTick() Component + Options/Data vuec ⇢ Vue component vueccomputed ⇢ Vue computed props vuecdata ⇢ Vue component data vuecmethods ⇢ Vue component methods vuecmixins ⇢ Vue component mixins vuecprops ⇢ Vue component props vuecwatch ⇢ Vue component watch Vue Resource vueht ⇢ this.$http() vuehtget ⇢ this.$http.get() vuehtpost ⇢ this.$http.post() Vue Router vuert ⇢ this.$route vuertgo ⇢ this.$route.router.go() Directives: v-bind ⇢ :prop="data" v-el ⇢ v-el:el-name v-else ⇢ v-for ⇢ v-if ⇢ v-link ⇢ v-on ⇢ @evt="callback" v-ref ⇢ v-ref:ref-name
  • vue的深深度选择css作用域
  • 性能优化
    • keep alive缓存不活动组件实例
      • 
    • actived重新请求时，判断页面数据和上一次显示的数据
      • 
    • 获取动态路由参数
      • 
    • 使用import实现按需加载
      •  app.js很小的时候； 发一个http请求的代价远比 多加载一点js代码的代价要高 app.js很大的时候 进行拆分使用异步组件进行代码拆分；
    • 使用异步组件进行代码拆分
      • 
• 组件实例
  • Vue.component(tagName, options)    
  • 组件的特性
    • 
    • 组件和实例的关系
      • 因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项， 例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。
    • 组件的工作原理
      • 注意当点击按钮时，每个组件都会各自独立维护它的 count。 1.因为你每用一次组件，就会有一个它的新实例被创建。新实例被创建。
    • 组件的注册
      • 
      • 全局组件
        • 
      • 局部组件
        • 
  • 组件的使用
    • 
    • 组件的状态缓存
      • 
    • 组件的设计
      • 
      • 设计原则
        • 
      • 组件设计输入输出接口
        • 
      • 输入属性加约束
        • 
      • 组件标签自由添加子节点
        • 
    • 组件需要绑定的属性太多的重构
      • 
      • 组件的多元素重构
        • 在实例中利用数组和对象 在组件中减少绑定命令的使用。  
    • is组件的动态绑定
      •  
    • 组件元素的限制的 is
      • 限制：option只能是select的子元素所有元素不是随便组件的 
      • 从有些来源的组件没有限制
        • 
• vue的组件库
  • iView UI组件库
  • Vux UI组件库
  • Bootstrap-Vue UI组件库
  • Ant Design Vue UI组件库
  • Element UI组件库
    • 主题编辑器 Chrome 插件
    • 组件
      • Layout 布局
        • 1。 elrow <el-row>
        • 2。 elcol <el-col>
        • 3。 elcon <el-container>
        • 4。 elas <el-aside>
        • 5。 elhe <el-header>
        • 6。 elma <el-main>
        • 7。 elfo <el-footer>
        • 8。 elcb #409EFF
        • 9。 elcs #67C23A
        • 10。 elcw #E6A23C
        • 11。 elcd #F56C6C
        • 12。 elci #909399
        • 13。 TBD #303133
        • 14。 TBD #606266
        • 15。 TBD #909399
        • 16。 TBD #C0C4CC
        • 17。 TBD #DCDFE6
        • 18。 TBD #E4E7ED
        • 19。 TBD #EBEEF5
        • 20。 TBD #F2F6FC
    • ELement UI使用
      • Vue安装 element-ui 的步骤
        • npm i element-ui -S
          • 在项目下 输入 npm install element-ui -S
        • 查看配置文件package.json
          • 
        • 在node_modules中可以看到 element-ui的文件夹
          • 
      • main.js引入 element 组件
        • 样式文件需要单独引入。
      • 1.完整引入
        • 
      • 2.按需引入
        • 借助babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。 首先，安装babel-plugin-component：
        • npm install babel-plugin-component -D
        • .babelrc修改为：
          • 
        • 在main.js中写入以下内容
          • 
      • 全局配置
        • 
      • • 样式文件需要单独引入。
      • CDN
        • 
      • 修改element ui的样式
        • 先手直接说方法：在需要更改的组件里新增一个style标签【重点：不要加scoped】， 然后直接获取class设置样式就可以咯，class自己去浏览器里右键审查元素可得到。 
        • scoped使用
          • 
        • scope的原理
          • PostCSS给一个组件中的所有dom添加了一个独一无二的动态属性，的动态属性， 然后，给CSS选择器额外添加一个对应的属性选择器来选择该组件中dom，属性选择器来然后，给CSS选择器额外添加一个对应的属性选择器来选择该组件中dom， 这种做法使得样式只作用于含有该属性的dom——组件内部dom。