VUE 框架

image.png
Vue官网：https://cn.vuejs.org/

原前端逻辑：
image.png
三层架构MVC：
image.pngimage.png
MVVM(Model-View -ViewModel)双向绑定：
image.pngimage.png

VUE 使用

image.png

Vue 核心属性

el 绑定选择器

image.png

data 双向绑定数据

image.png

{{xxx}} 插值表达式

image.png
代码实现:
image.png

Vue 常用指令

image.png

v-bind & v-model

image.png
image.pngimage.png
image.pngimage.png
image.png
image.png

v-on

image.pngimage.png

v-on可以绑定很多事件
image.png
v-on :click 绑定点击事件
image.png
v-on： 简版 @click
image.png
代码实现:

v-if

image.png
image.png
代码实现:
image.png
image.pngimage.pngimage.png

v-show

image.png
image.png
image.png
image.pngimage.pngimage.png
v-if 与 v-show 的区别
image.pngimage.png
v-if 对于在控制台HTML源码是只显示判断后的div
v-show 在控制台是控制标签的display属性

v-for

image.png
代码实现：
image.png
image.pngimage.png
image.png image.png
image.pngimage.pngimage.png

Vue 生命周期

image.png
image.png
image.png

mounted

image.pngimage.png
代码实现：
image.pngimage.png

Vue 案例

查询所有

image.png

  1. 页面加载使用vue的mounted生命周期加载后异步请求
  2. 页面加载数据，使用v-for展示

代码实现：
image.png
TIPS：

  1. mounted的处于页面异步阶段所以在axios的this是服务器的值

  2. 如果需要将服务器的值传递给vue需要提高作用域在mounted定义变量接收axios的值

    新增品牌

    image.png

  3. 之前使用HTML+Axios 频繁使用dom层获取数据方法给自定义动态数据进行绑定

  4. 使用vue的v-model双向绑定，dom的值和模型值可以同时获取

image.png