Vue基础知识与MVVM、Vue调试工具

1. vue简介

推荐大家安装的 VScode 中的 Vue 插件

  1. Vue 3 Snippets https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippets
  2. Vetur https://marketplace.visualstudio.com/items?itemName=octref.vetur

什么是 vue

vue.js是一套用于构建用户界面的前端框架。

  1. 构建用户界面
    • 用 vue 往 html 页面中填充数据,非常的方便
  2. 框架
    • 框架是一*成的解决方案,程序员只能遵守框架的规范,去编写自己的业务功能!
    • 要学习 vue,就是在学习 vue 框架中规定的用法!
    • vue 的指令、组件(是对 UI 结构的复用)、路由、Vuex、vue 组件库
    • 只有把上面老师罗列的内容掌握以后,才有开发 vue 项目的能力!

组件是对UI和样式的复用

vue 的两个特性

  1. 数据驱动视图:
    Vue基础知识与MVVM、Vue调试工具

    • 数据的变化会驱动视图自动更新
    • 好处:程序员只管把数据维护好,那么页面结构会被 vue 自动渲染出来!
    • 注意:数据驱动视图是单向的数据绑定。[数据变化→页面渲染 不能反过来]

    程序员不用手动操纵元素,数据和页面中间多了vue,vue的作用是监听数据变化、自动渲染页面结构。

  2. 双向数据绑定:

Vue基础知识与MVVM、Vue调试工具

图示的意思是js中定义了name和email,html页面里也会显示name和email。红色箭头表示两次DOM操作。

在网页中,form 表单负责采集数据,Ajax 负责提交数据

  • js 数据的变化,会被自动渲染到页面上
  • 页面上表单采集的数据发生变化的时候,会被 vue 自动获取到,并更新到 js 数据中

注意:数据驱动视图和双向数据绑定的底层原理是 MVVM(Mode 数据源、View 视图、ViewModel 就是 vue 的实例)

MVVM

MVVM是一种思想,工作原理:
Vue基础知识与MVVM、Vue调试工具
Vue基础知识与MVVM、Vue调试工具

3. vue的调试工具

1. 安装 vue-devtools 调试工具

vue 官方提供的 vue-devtools 调试工具,能够方便开发者对 vue 项目进行调试与开发。

Chrome 浏览器在线安装 vue-devtools : https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

FireFox 浏览器在线安装 vue-devtools : https://addons.mozilla.org/zh-CN/firefox/addon/vue-js-devtools/

2. 配置 Chrome 浏览器中的 vue-devtools

点击 Chrome 浏览器右上角,选择更多工具 -> 扩展程序 -> Vue.js devtools 详细信息,并勾选如下 的两个选项:

注意:修改完配置项,须重启浏览器才能生效!
上一篇:关于chrome dev tools


下一篇:报错:同一个类 不能强制转换:cannot be cast to