Vue(21) —— vue学习小结

在我们学习vue的整个过程中，我们始终是按照上面这张图中的内容在进行学习逻辑：v-if、v-for事件：v-on、v-bind、自定义事件分发、v-model实现双向数据绑定视图：组件的定义和使用，主要还是用于显式的视图组件的模板的设置和数据模板的使用通信：axios实现vue中的异步通信在写第一个vue程序之前，我们学习了什么是MVVM模式，现在应该就已经知道了M：model，就是指的后端传递数

原来是小别扇

155人浏览 · 2020-09-26 16:06:52

原来是小别扇 · 2020-09-26 16:06:52 发布

一些常用的vue的指令

v-bind：将标签的属性值和数据模板对应的值绑定，这里可以启动双向数据绑定，这样数据模板和data中属性值哪一个发生变化了，马上就会在另一个对应的身上体现出来【可以缩写为" : "】
v-if：条件显示标签，配合使用的还有v-else和 v-else-if
v-for：用于遍历集合数据
v-on：v-on:触发事件=“methods中的函数名称”【可以缩写为" @ "】
v-model：v-model:{{变量名}}，开启变量名对应的变量的数据双向绑定
Vue(4) —— Vue基本语法.
Vue(5) —— Vue绑定事件.
Vue(6) —— Vue中数据的双向绑定.

vue对象的属性

el：用于绑定标签，但是在vue工程中它就是用来绑定index.html中的div的
data：对象属性，用于存储{{ }}中可以使用的变量，并为其赋值
methods：定义可以直接在{{ }}中使用的方法，注意使用时带上()
computed：计算属性，这是vue的特色，用于存储某些不常用的网站数据，存储之后只要不刷新页面，这些数据就不会发生变化，在vue这样的组件拔插的开发中，页面基本很少刷新，所以计算属性用处很大，它节约了浏览器的内存开销

vue的异步通信 | Vue(8) —— Axios异步通信. + Vue(20) —— 404和路由钩子.

由于vue严格遵守SOC关注度分离原则，所以它只有视图功能，对于网络通信它必须借助其他的东西来实现；vue官方推荐使用axios实现vue的异步通信
使用步骤和jquery.ajax相似，但是原理有很大不同

方式1

 axios.get("请求的数据的地址").then(response=>this.data = response.data);

方式2(这种方式和jquery.ajax使用方式相似)

this.axios({
        method:"get",
        url:"http://localhost:8080/static/mock/data.json"
      }).then(response=>console.log(response))

自定义组件为vue带来分布式开发：Vue(7) —— Vue组件讲解. + Vue(15) —— vue-cli项目文件解析.
vue的插槽为vue视图带来无限可能性：Vue(10) —— 插槽slot.

vue自定义事件分发，使得组件可以调用vue对象中的方法，从而修改data对象属性中注册的变量的数据
Vue(11) —— 自定义事件内容分发.

vue前端工程其实需要很多依赖的开发包(1w多个)，需要进行许多的配置文件的配置，需要建立项目对应的文件结构，还有很多很繁琐的设置，经过这些，一个vue前端项目的框架才算搭建完成，如果这些全部都是我们手动进行配置的话，搭建一个前端项目我们就需要划分很大的精力，所以出现了vue-cli ，一个官方提供的一个项目搭建的脚手架，用于快速生成一个 vue 的项目模板，它的使用步骤是固定的
Vue(13) —— 第一个Vue-cli项目.