学习笔记：vue2.0-1

山树与羊

已于 2022-03-24 22:14:04 修改

阅读量844

点赞数

分类专栏： vue 文章标签： vue.js

于 2022-03-24 22:04:24 首次发布

本文链接：https://blog.csdn.net/ywy124578/article/details/123722913

版权

Vue2.0

vue.js devtools

vue 调试插件，安装添加到 chrome 插件后，需要进行配置

Vue简介

官方给出的概念: Vue 是一套用于构建用户界面的前端框架。

使用Vue往html页面中填充数据会非常的方便
框架是一套现成的解决方案
程序员必须遵守框架开发的规范，这样才能更好的维护我们的项目
我们要学习Vue的指令，组件，路由，Vuex

Vue特性

数据驱动视图

vue框架中数据永远是最重要的，数据的变化会驱动页面的变化

在使用了vue的页面中，vue会监听数据的变化，从而自动重新渲染页面的结构。

好处:当页面数据发生变化时，页面会自动重新渲染

注意:数据驱动视图是单向的数据绑定（数据的变化导致页面发送变化）

程序员不需要手动操作DOM元素，而是让vue来操作DOM元素

双向数据绑定

在网页中，form表单负责采集数据，ajax负责提交数据

在填写表单时,双向数据绑定可以辅助开发者在不操作DOM的前提下，自动把用户填写的内容同步到数据源中。

js数据的变化会被自动渲染到页面上
页面上表单采集的数据，会被vue自动获取，并提交到js数据中

好处:开发者不再需要手动操作DOM元素，来获取表单元素最新的值!

MVVM

MVVM是vue实现数据驱动视图和双向数据绑定的核心原理。

MVVM 指的是Modiel、View 和ViewModel,它把每个HTML页面都拆分成了这三个部分,如图所示:

在MVVM概念中:

Model表示当前页面渲染时所依赖的数据源（使用Ajax拿到的数据）。
View表示当前页面所渲染的DOM结构。
ViewModel表示vue的实例，它是MVVM的核心。

工作原理

ViewModel作为MVVM的核心,是它把当前页面的数据源(Model)和页面的结构(View) 连接在了一起。

当数据源发生变化时，会被ViewModel监听到，VM会根据最新的数据源自动更新页面的结构

当表单元素的值发生变化时，也会被VM监听到，VM会把变化过后最新的值自动同步到Model数据源中

Vue版本

当前，vue共有3个大版本，其中:

2.x版本的vue是目前企业级项目开发中的主流版本
3.x版本的vue于2020-09-19发布，生态还不完善，尚未在企业级项目开发中普及和推广
1.x版本的vue几乎被淘汰，不再建议学习与使用

总结:

3.x版本的vue是未来企业级项目开发的趋势;
2.x版本的vue在未来(1 ~ 2年内)会被逐渐淘汰;

Vue初体验

我们需要 vue.js 这个文件

直接去官网下载 Vue.js

<!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>
    <!-- 我们希望vue控制下面这个div，自动填充数据到div中 -->
    <!-- 使用 {
  {}} 填写要渲染的数据 -->
    <div id="app">{
  { username }}</div>
    <!-- 导入 vue.js 库文件 -->
    <script src="./vue.js/vue.js"></script>
    <script>
        // 创建vue实例
        const vm = new Vue({
            // el属性是固定写法，表示当前 vm 实例要控制页面的哪个区域
            el: '#app',
            // 该 data 对象就是要渲染的数据
            data: {
                username: 'zs'
            }
        })
    </script>
</body>

</html>