Vue

菜鸟_渣渣辉
99 阅读3分钟

在谷歌浏览器中安装vue-devtools调试工具

学习网址：blog.csdn.net/weixin_4520…

目录 P32

  • 1.vue简介
  • 2.vue的基本使用
  • 3.vue的调试工具
  • 4.vue的指令与过滤器
  • 5.品牌列表案例

vue简介

1.什么是vue

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

2.vue的特性

  • vue框架的特性，主要体现在如下两方面：
    • 1.数据驱动视图
      • 数据的变化会驱动视图自动更新。
      • 好处：程序员只管把数据维护好，那么页面结构会被vue自动渲染出来。
    • 2.双向数据绑定
      • 在网页中，form表单负责采集数据，ajax负责提交数据。
      • js数据的变化，会被自动渲染到页面上
      • 页面上表单采集的数据发生变化的时候，会被vue自动获取到，并更新到js数据中。
  • 2-1.数据驱动视图
    • 在使用了vue的页面中，vue会监听数据的变化，从而自动重新渲染页面的结构。示意图如下： b8630385cfdc2728b945ac86a74a4a2.png
      • 好处：当页面数据发生变化时，页面会自动重新渲染
      • 注意：数据驱动视图是单向的数据绑定
  • 2-2.双向数据绑定
    • 在填写表单时，双向数据绑定可以辅助开发者在不操作DOM的前提下，自动把用户填写的内容同步到数据源中。示意图如下： ce4da1bb8053c7efaccfed4261c3312.png
      • 好处：开发者不再需要手动操作DOM元素，来获取表单元素最新的值。
  • 2-3.MVVM
    • MVVM 是 vue 实现数据驱动视图和双向数据绑定的核心原理。MVVM指的是Model、View和ViewModel，它把每个HTML页面都拆分成了这三个部分，如图所示： 8b67dec1da2e5b77605cc24874e8e09.png
      • 在MVVM概念中：
        • Model表示当前页面渲染时所依赖的数据源。
        • View表示当前页面所渲染的DOM结构。
        • ViewModel表示vue的实例，它是MVVM的核心。
  • 2-4.MVVM的工作原理
    • ViewModel作为MVVM的核心，是它把当前页面的数据源(Model)和页面的结构(View)连接在了一起。 f7a2dc9b15b1aa583bd77f30bc5b4f5.png
    • 当数据源发生变化时，会被ViewModel监听到，ViewModel会根据最新的数据源自动更新页面的结构。
    • 当表单元素的值发生变化时，也会被ViewModel监听到，ViewModel会把变化过后最新的值自动同步到Model数据源中。
    • 注意：数据驱动视图和双向数据绑定的底层原理是MVVM。(Model数据源、View视图、ViewModel是vue的实例)
  • 3.vue的版本
    • 当前，vue共有3个大版本，其中：
      • 2.x版本的vue是目前企业级项目开发中的主流版本。
      • 3.x版本的vue于2020-9-19发布，生态还不完善，尚未在企业级项目开发中普及和推广
      • 1.x版本的vue几乎被淘汰，不在建议学习和使用
    • 总结：
      • 3.x版本的vue是未来企业级项目开发的趋势
      • 2.x版本的vue在未来(1-2年内)会被逐渐边缘化

vue的基本使用

  • 1.基本使用步骤

    • 1.导入vue.js的script脚本文件
    • 2.在页面中声明一个将要被vue所控制的DOM区域
    • 3.创建ViewModel实例对象(vue实例对象)
        <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <!-- 2.在页面中声明一个将要被vue所控制的DOM区域 -->
        <div id="app">{{usename}}</div>

        <!-- 1.导入vue.js的script脚本文件 -->
        <script src="./lib/vue-2.6.12.js"></script>
        <script>
            // 3.创建vm实例对象(vue实例对象)
            const vm = new Vue({
                // 3-1.指定当前vm实例要控制页面的哪个区域
                el:'#app',

                // 3-2.指定Model数据源
                data:{
                    usename:'xyh'
                }
            })
        </script>
    </body>
    </html>

  • 2.基本代码与MVVM的对应关系 cc9725f7fafb2418ecf97868f0e1816.png

vue的调试工具 P36

avatar
文章
阅读
粉丝