Vue相关

基本用法 场景 最基本双向绑定 当修改内存中的message，页面会自动变化 当用户修改页面中的内容（input）,内存会发生变化 多行文本 同理上，将input改为texarea标签,双向绑定机制同

一、Directives指令 内置指令 v-if v-for v-show v-html等 自定义指令 声明全局指令:Vue.directive('x',directiveOptions) 例 局部声

模板语法 展示内容 表达式 {{object.a}} 表达式，构造选项中data内的object中的a显示出来 - {{n+1}} 可以写任何运算，但不知支持逻辑判断（if/else） {{fn(n)

computed 名词解释： 计算属性 作用：计算出值 特点: 由于本身计算出了值，所以在调用的时候直接作为属性调用，不需要像调用函数那样加括号 根据依赖会自动缓存，如果依赖不变，computed的值

扩展一：getter和setter 例一 例二 getter 例三 setter Object.defineProperty实现若干需求 基本原理 场景：obj对象已经声明，在对象中添加虚拟属性 需求

props:外部数据、属性 语法 message="n"传入字符串 :message="n"传入vue实例的this.n数据 :fn="add"传入vue实例的this.add函数 示例一 示例二

用法一：模块化引入挂载组件 用法二：全局组件（vue完整版场景） mian.js文件 用法三：以上两种方法结合（vue完整版场景）

以页面<div v-if>{{n}}</div>中n的变化为例 完整版渲染机制 <div v-if>{{n}}</div>为字符串,不能直接转化成html，因为含有复杂语法，占位符等，html不能识别

Vue实例概览...........................................

参考文档 vue官方文档 vue@cli官方文档 项目搭建 方法一：vue官方cli 安装vue cli: yarn global add @vue/cli 进入项目根目录:cd /项目路径 创建Vu