vue的两个核心是什么（vue – vue基础/vue核心内容）
终于算是顺利进入vue了 ，确实也只有学了过后才知道 ，之前三过vue而不学 ，确实是对的 ，现在进来了一点都不后悔 ，ajax 、node.js 、promise 、webpack 、git等等确实是除了三大基础外还需要额外学的 。
终于能够一窥vue的真容了 ，学了这么久 ，说实话一直都忍着 ，不去触碰这一条线 ，就想留着保持浓厚的兴趣 ，来看看vue到底是个什么神奇的东西 ，能让代码如此简单 ，确实 ，至少到我现在学的阶段 ，其他大的感触没有 ，唯一的感触就是 ，很多功能的实现要简便的多了 ，那比原生js不是简单一星半点 。
这中间笔记还丢过 ，感觉可能typora都要让我来学两编加深下记忆吧 ，总是有这个bug ，明明占用的存储大小还在那里 ，打开就是一片空白 ，反正已经跟typora的制作团队联系过了 ，看能不能后续给解决掉这个bug 。这篇文章可谓是重量级 ，至少是我目前为止集格式 、含金量 、规模最大的！
一.Vue简介
1. Vue是什么
一套用于构建用户界面的渐进式（渐进式：自顶向下逐层的应用 ，由一个小巧的核心库 ，引入各式各样的vue插件）JavaScript框架 。
2. 特点
采用组件化模式 ，提高代码复用率 ，让代码更好维护：一个.vue后缀的文件包含html 、css 、js全部包在一起完成一个活动版块的内容这就是组件化；代码复用率：你既然都封装好了 ，我直接拿来用那就是代码复用率；代码更好维护：我直接在你的基础上修改一些功能 。
声明式编码
在了解什么是声明式编码之前先了解什么是命令式编码 ，我们以前要将一个数据对象渲染到页面上都是通过原生js这样一步一步往下做 ，像在一步一步完成别人命令一样这就是命令式代码 ，而我们声明式代码只需要声明一下即可 。
使用虚拟DOM+Diff算法 ，复用DOM节点
原来我们用原生js ，渲染数据通过模板字符串亦或者是模板引擎 ，如果这个时候又新增了几条数据上来 ，又要从头开始渲染然后生成一个完整的html ，那除去我们新增的是不是又生成了一些以前就有的字符串（以前那些数据） ，所以vue的做法就是运动虚拟dom ，再加上diff算法会去比较虚拟的dom如果有跟以前一样的直接复用 。
二.搭建vue开发环境
1.安装
打开vue官网安装开发版本 ，引入vue.js后log会有两个提示：一个是叫你要下载开发者工具 ，一个是提醒你在上线后不要引入这个vuejs
Vue代码提示插件：vue 3 Snippets
2.开发者工具
谷歌应用商店下载vue-devtools
注意修改vue谷歌插件
3.productionTip
也就是我们第二个提示 ，参照vue官网api
这个是我们vue的全局配置下的属性 ，也就是vue.config的属性字面意思就是生产环境提示 ，修改为false 。
自此所有提示消除 。
三.vue基础
1.hello小案例
进入这个案例前 ，先解决一个问题
首先要知道我们的vscode开启live server后 ，他是将整个vscode文件夹放在了这个服务器下面去了 ，所以他回去服务器的根目录上找这个小图标 ，在根目录添加一个这样的图标即可
怎么来使用vue ，开端需要创建一个vue的对象实例 ，然后主要的是 ，实例里面要传入的参数：
el ：‘’ el是固定写法 ，后面的值通常为css的选择器
data ：｛｝ data也是固定写法 ，后面暂时以对象进行书写 ，作用是向上面el也就是哪个容器传递参数
总结：
想让vue工作必须配置一个vue实例 ，并且里面的参数为一个对象 容器（div盒子）也被称为 vue模板 的作用一个是插入vue语法 ，二个是当运行js的时候看到vue这个实例 ，那么vue.js就回去扫描有没有这个容器 ，扫到后还有一个vue语法 ，就去看数据有没有这个键 ，从而完成一个转换的过程 。其实这个原理有点类似于前面说过的模板引擎！1.1.注意事项
我们的容器（vue模板）和实例之间是一一对应的关系 ，你写两个vue模板都以同样的class命名 ，实例写一个 ，并不会两个都渲染上 ，只有第一个模板有数据；你写一个模板 ，但是实例有两个 ，都对应的这个模板 ，分别传入了两条数据 ，也并不会都把数据渲染上来 ，只有第一个实例有数据 。真实开发中只会有一个容器和一个实例（数据这里将会进行组件化开发）
在我们容器中的vue语法｛｛｝｝里的内容只能是表达式
表达式：就是带有值的式子 ，如一个变量 、函数 、三元表达式 、算术运算等
js代码：if 、for循环这些
要区分这两个：
修改数据可在开发者工具中修改
2.模板语法
插值语法 ，即上面所用的插入进去的值
指令语法： v-bind：可简写为：注意（它是专门给标签属性里面的字符串让他变为一个表示式的 ，就相当于有值了 ，是个变量了 ，要去实例里面找值了）
所以我们一般用插值语法应用标签体上面 ，而v-bind用于标签属性
3.数据绑定
数据绑定分为两种：
单向绑定 v-bind 只会让属性受数据影响 ，但是数据的修改影响不了属性 。
双向绑定：v-model 值在变 ，同时数据data也在变
v-model：value可以直接简写为：v-model没有冒号 ，因为它本身就是用来收集value值的
注意：双向绑定一般只用在表单类元素上（input 、单选 、复选 、文本域等）
4.el 、data两种写法
首先要知道我们的vue实例对象上面有很多$开头的方法 ，这些方法都是给我们用的 ，但是非$开头的就是vue自己用的了我们用不了 ，el的第二种写法正是用到了实例对象的proto原型上的一个$mount的方法（理解性记忆 ，mount有挂载的意思 ，而我们vue本身就是把这个实例挂载到这个容器上） ，原来那种和这一种都可以 ，面对不同的情况有不同的用法
data的简写方法就是值为一个函数 ，但是函数的返回值只能为一个对象
缩写为
注意：vue所管理的函数（比如data函数） ，不能写箭头函数 ，不然this乱了不再是vue对象实例了
5.MVVM模型
首先是M可以看成我们的数据 ，V看成我们的模板 ，最后一个VM就是可以将我们的数据渲染到模板 ，将模板的value保存到数据 ，在中间起到一个转换的工作 ，这个就是VM ，整个系统就为MVVM模型
所以我们一般把对象实例取名为vm,中间的一个转换的过程 ，就需要我们去学习vue的各种语法了
总结：回顾一下我们前面所说的｛｛｝｝vue方法这里面都能写些什么的问题 ，前面是说的表达式吧 ，其实这里面能写的远不止于此 ，我们vm是一个实例对象 ，｛｛｝｝里面放的东西其实是我们vm实例对象里面的任何东西 ，包括我们数据里面写的name 、age等都是因为他有所以我们才能用到 。
不仅如此 ，就连原型上的 、非$开头的都可以拿到 ，而且不用带前缀 ，以为都是vm里面的 ，之所以要这么说 ，只是为了要记住 ，我们的模板里面的vue语法都是拿的vm实例里面的属性方法 。
6.数据代理
需要用到之前学过的一个es6语法Object.defineProperty（字面意思看得出定义属性 ，那就是定义对象的属性的） ，这个方法有三个参数 ，第一个为对象名 ，第二个为对象属性名 ，第三个参数为一个配置对象 ，里面有四个值可以对这个属性做约束 枚举表示是否可以被遍历
上面只是这个方法的普通用法 ，真正要用的是配置对象的两个方法
如果我们是这样定义的：
可以看到值并不会被更改 ，为什么？因为我们都知道js代码的一个执行顺序加上我们时间循环的一个机制 ，当我们第一次定义玩number ，同时跟着主栈道把data也一起定义完了 ，这个时候我再去修改number的值 ，那就只是修改number的值 ，并不会重新再执行一次data的重新赋值 ，他的修改也影响不了他 。
所以这个时候在我们的defineProperty配置对象里面就出现了两种方法
get函数（getter）当有人一访问age这个值时就会立马去调用getter
set函数（setter）当有人一修改age这个值时我的value形参就会接收到这个值 ，从而可以拿来对我的里面的数据修改值
数据代理
通过一个对象代理对另一个对象属性的操作（读写）
vue中的数据代理
首先我们定义的data会被vue转化成他下面的_data这个对象 ，其实vue做到这一步就已经够了 ，我们传数据的时候只需要_ data.name即可 ，但是有没有想过我们没传一个数据 ，前面都要加一个 _data是不是很麻烦 ，所以vue接着才做了一个数据代理的事情 ，在vm实例上新增了两个属性name和age ，其实就是用defineproperty这个方法新增的 ，同时里面getter返回 data.name的值 ，setter又把值修改到他 ，这里就存在了一个数据代理 ，用了vm实例对象代理了 _data这个对象
7.事件处理
7.1 事件基本使用
事件的指令语法v-on:click（指令语法都是v-开头）
vm实例对象属性为methods 它是时间处理函数的属性名
我们事件怎么来传参？前面说过指令语法会把字符串变为表达式 ，所以这里的字符串不再是看成字符串这么简单 ，是一个函数 ，是函数就可以给他实参
事件要使用event这个内置对象的话 ，也需要传参进去$event
注意：
v-on:xxx xxx为事件名这是vue的事件声明方式 ，可以简写为@xxx 我们的这几个事件处理函数也会变成vm实例上的函数 这些函数也是属于vue所管理的函数所以不要使用箭头函数 如果指令语法没有传参 ，处理函数又有一个形参 ，这个参数默认为e内置对象7.2 事件修饰符
就是无需通过e.~~来执行一些操作 ，直接可以在指令语法处使用 ，看以下案例注意这个事件修饰符是加在哪里得
（前三个熟记）（可以像链式编程一样连写）
prevent：阻止默认行为
stop：阻止冒泡
once：事件只触发一次
capture：使用捕获模式
怎么来理解 ，因为我们默认事件是要先经过捕获才冒泡 ，但是事件处理是在冒泡进行的 ，也就是父子都有一个打印信息 ，我点子 ，其实是先读取了父再来读取子的因为先经过捕获事件 ，但是我们事件处理程序是在冒泡进行 ，所以冒泡回去的时候才会开始打印子再打印父 ，这个时候如果给父添加了一个capture ，那就代表着从事件捕获就开始处理程序 ，本身事件流就是先捕获 ，我点子 ，事件流来了 ，由于是捕获阶段触发事件 ，所以会先打印父再打印子
正常逻辑我点div2会按照冒泡执行2 1
加了capture之后
self：只有e.target是当前操作元素的时候才会触发（可以拿来阻止冒泡）
很明显这个又会出发冒泡 ，但是我给父元素加了个.self事件修饰符 ，意思就是只有e.target是自己的时候才会触发他那个点击事件 ，我们知道e.target谁触发就是谁 ，点击div4虽然触发两次 ，但是两次都是div4这个元素
passive：
两个扩展的知识 ：我们的滚动事件有两种 ，一个是scroll在我们滚动滚动条的时候触发的 ，一个是wheel当我们滚动鼠标滚轮的时候触发
这个时候会发现 ，当我们鼠标滚轮一动 ，需要先把回调函数执行完了 ，才会去执行默认行为向下滚动的操作 ，这个时候passive就派上用场了 。
7.3 键盘事件
注意用在哪里 ，怎么个用法
特殊按键
tab：必须配合keydown使用 ，因为一按下就会切换 ，keyup等你抬起按键时 ，已经切走了 ，就无法实现按这个键要实现的功能 系统修饰键如上图第三点 ，扩展：@keyup.ctrl.y = xxx表示只能ctrl + y才触发如果想要用的按键在定义之外 ，可以先通过e.key去查看这个键叫什么名字 ，一般就是叫键盘上的名字有些不一样 ，如ctrl=control ，得到名字后 如果是两个单词及以上也就是驼峰命名的（CapsLock） ，需要将大写转为小写 ，同时单词之间用-分割 ，如：caps-lock即可正确使用该键
8. 计算属性
姓名案例：
输入姓 ，输入名 ，展示出来并且是动态展示 。
插值语法实现：methods方法实现
我们的vue语法是可以为一个函数的 ，而且只要是函数都要写在methods里面
这方法实现关键点在于 ，首先我们事件处理函数确实可以省略括号 ，但是vue语法里面不可省略 ，然后要知道我们的data是在vm实例里面的 ，而我们的vue管理的函数this又是vm实例 ，所以就可以拿了
计算属性
将已经写好的属性去加工计算形成全新的属性 ，需要写在computed属性里面
firstname 、lastname都是我们vm的属性 ，而fullname也是vm的属性（所以用也是直接vue语法来用） ，但是他是计算属性 ，需要将已有属性用来操作的属性
计算属性里面的每一个属性跟obj定义属性的方法一样需要一个getter和setter ，当有人一访问到这个属性（fullname）就会调用getter ，且它的返回值就是fullname的值
get什么时候调用？
computed里面的getter有缓存机制 ，也就是说一个vue模板里面如果多处用到了fullname那么 ，getter只会被调用一次 。
什么时候被调用分为两种情况：一是初次读取这个计算属性的时候 ，二是这个计算属性依赖数据发生变化的时候（依赖数据也就是里面的this.xxx的数据）
所以他跟上面的methods最本质的区别就是他有缓存机制 ，多次使用这个值只要依赖数据没发生变化那么只会调用一次 ，而methods里面的函数方法 ，用一次调一次
同时这里要注意一下不要把它看的太复杂了 ，就是一个属性而已 ，vue语法调用的时候也是正常按照属性来调用 ，里面的函数只是对这个属性修饰 ，可以理解为模板引擎里面的fileterName
setter
他同样也有setter ，如果这个属性只是算来给别人读取的就不用写这个setter ，如果这个计算属性还会被修改的话 ，就需要setter
简写：前提只读不写（没有setter）
这里还是个属性 ，只是简写了 ，不要在vue语法里面去像函数一样调用
9.监视属性
监视是用来监测属性（一般属性 、计算属性）是否发生变化
天气案例
首先如果事件的代码很简单一句话可以直接指令语法处
监视方法一：通过一个全新的配置 watch里面写上你要监视的属性也是一个对象 ，再在里面写上配置项handler函数他有两个参数 ，一个是改变后最新的值 ，一个是变化前的值；第二个配置项immediate为布尔值 ，表示让hanlder一开始就执行还是发生变化在执行
监视方法二：通过vm实例里面的提供的方法$watch
注意对象里面的属性名其本质是字符串所以这里需要传字符串
深度监视
Vue的watch默认不检测对象里面的值 ，需要配置deep在watch里面才可检测到对象是否改变
监视简写
跟计算属性类似 ，没有其他配置项 ，只有handler时可简写
方法二同样可以简写 ，前提条件是一样的
总结：目前vue所管理的函数（不能写箭头函数）=> methods里面的 、计算属性里面的getter 、setter（包括简写形式） 、监视属性handler包括简写
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！