Vue基本介绍-史上最详解

前言: Vue.js 是什么？为什么这么火？这么多人使用？优缺点有哪些？

Vue.js 是什么

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

• 然后可以通过如下方式引入 Vue：

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

或者：

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

vue指令

页面渲染

vue的指令都是v-这种格式，虽然v-xxx=“xxx"写的值是用”"包裹，但实际上是js，因此需要在双引号里再加层引号，否则会报错。

v-text : 用于替换插值表达式，如果有v-text，插值就不生效。

v-html: 输出转译过的不带HTML标签的HTML语句。富文本编辑器的内容直接渲染的话是被转译过的，那么HTML标签就会被渲染到页面上

v-cloak: 配合样式来使用，可以让样式在vue实例化之前生效

v-for: 用于循环渲染数据。v-for=“item in list”。可以直接遍历对象、数组、数字。

v-if: 直接是dom节点的移除和插入，来达到显示和隐藏元素的效果。通过判断true和false来实现

v-else:必须与v-if配合使用，而v-if不需要配合v-else

v-show: 是通过改变css样式style来显示或者隐藏元素，通过display。对于需要频繁切换显示和隐藏的节点特别实用，比如弹窗、手机注册和邮箱注册两个tab的切换。

v-bind:属性:用于动态绑定元素的属性 ，可以简写为:属性。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bITeb6hm-1604387364905)(https://i.loli.net/2020/09/30/9VniwYTtfkPOXqs.png)]

事件绑定

v-on:事件名: 绑定事件，可以直接操作data里的数据，v-on可以缩写为@事件名。
vue的事件可以加括号也可以不加，不加默认接收事件处理函数的事件对象；加了括号就可以任意传参。（可以继续在括号里通过$event获取当前事件对象）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b5XWWWo0-1604387364940)(https://i.loli.net/2020/09/30/JP5Vzti2HA8KjhW.png)]

v-on:click: 用于绑定点击事件

v-model:自动绑定input输入内容改变事件

@keyup.enter: .enter是按键修饰符，也可以用enter的对应码13代替。可以使用组合键如.ctrl.enter
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-p2xd8kzr-1604387364949)(https://i.loli.net/2020/09/30/gj5tFKepvoORPJQ.png)]

.stop:事件修饰符，阻止冒泡。

class绑定

计算属性

• methods和computed区别
  • methods用来绑定一些方法，每次有数据更改只要在模板里使用这个方法就会执行，没有缓存。
  • computed是计算属性，有依赖缓存，只有它所依赖的数据发生改变才会重新计算，计算出来的值可以当成data直接使用，不需要添加括号，必须要有一个return值。计算属性是基于它们的响应式依赖进行缓存的。

侦听器watch

一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch。然而，通常更好的做法是使用计算属性而不是命令式的 watch 回调。

• computed是生成一个新的数据，watch是观测已有的数据，当被观测的数据发生改变时，自动执行后面的方法。

filters过滤器

ajax-fetch

vue组件

• 组件是可复用的 Vue 实例(可以将组件进行任意次数的复用)，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。

Vue.compoent(“tagName”, options ):
tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件：

<tagName></tagName>

1. 全局注册一个组件，第一个参数就是要使用的标签的名字，不论使用大驼峰或者小写字母加中线的命名方式，在使用组件的时候都要使用小写字母加中线使用。
   
2. 第二个参数就是组件的配置项，全局注册的组件可以在任何地方使用

components: 局部注册一个组件，只有当前Vue实例中才可以使用这个组件

• 组件的data必须是一个方法(函数)，然后要return一个对象，为了保证组件的数据是独立的而不是共享

一个组件可以嵌套，但是一个组件的template只能有一个根元素

组件的props

Prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候，它就变成了那个组件实例的一个属性。

• 通过prop来接收调用的时候传过来的值，然后可以把prop当data使用，但是不能修改父组件传的值，这是基于单项数据流。