初识Vue

最新推荐文章于 2024-11-10 15:10:09 发布

望眼欲穿i

最新推荐文章于 2024-11-10 15:10:09 发布

阅读量1.1k

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_45775897/article/details/123468290

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了Vue 3.x作为渐进式前端框架的基本概念，包括MVVM模式的工作原理，数据绑定的自动更新，以及如何通过CDN、下载或NPM方式引入。还提供了Vue2和Vue3的简单应用示例，带你快速上手这两者。

摘要由CSDN通过智能技术生成

初识Vue

Vue是一套用于构建用户界面的渐进式框架。与其他大型框架不同的是，Vue被这几位可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库进行项目整合。采用的是MVVM模式。

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

Vue3.x Githtub地址: https://github.com/vuejs/vue-next

Vue3.x 文档地址: https://v3.vuejs.org/

Vue3.x 中文文档地址：https://v3.cn.vuejs.org/

什么是MVVM模式

在这里插入图片描述

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZoXcgaWM-1647182706103)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220313222136953.png)]$

数据的变化会驱动视图自动更新单向数据绑定

好处：程序员只管把数据维护好，那么页面结构会被vue自动渲染出来

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

如何引入Vue

方式一 : 直接CDN引入

你可以直接引入开发环境版本或生产环境版本

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>

方式二：下载引入

开发环境版本，包含了有帮助命令行和警告
https://cdn.jsdelivr.net/npm/vue/dist/vue.js

生产环境版本，删除了警告，优化了大小和速度
https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.esm.browser.js

注意：我们开发的时候可以使用开发版本，但是具体发布的时候我们使用第二个，第二个优化了大小和速度，有利于加载。

方式三 : NPM安装

使用vue-cli安装

编辑器的设置

Vscode

安装Vetur
安装JavaScript(ES6) code snippets —— ES6语法智能提示以及快速输入，除js外还持.ts，.jsx，.tsx，.html，.vue，省去了配置其支持各种包含js代码文件的时间
Live Server—— 修改文件浏览器自动刷新；浏览器自动打开项目；本地开发搭建临时的服务
Auto Rename Tag —— 自动完成另一侧标签的同步修改

Vue2，Vue3简单应用

Vue2

<div id="root" class="test">
        <!-- 插值表达式 -->
        {{msg}}{{numa+numb}}{{flag ?'真的':'假的'}}
        <h1>
            {{newObj.name}}是一个{{newObj.vue}}岁的{{newObj.job}}
        </h1>
        <h2>
            {{newArry[0]}}
            {{newArry[1]}}
            {{newArry[2]}}
        </h2>
        <input type="text" v-model="value">
        {{value}}
    </div>
    <script>
        var vm = new Vue({//mv管理层
            el:"#root",//定位
            data:{//数据源
                msg:"hello world!",
                numa:1,
                numb:'2',
                flag:true,
                newObj:{
                    name:'test',
                    age:20,
                    job:'程序员'
                },
                newArry:['hello','world',2],
                value:''
            }
        })
    </script>

效果：
在这里插入图片描述

Vue3

<div id=".demo">
        {{msg}}
    </div>

    <script>
        const app = Vue.createApp({//创建一个vue的应用
            data(){
                return {
                    msg:'hello world!'
                }
            }
        })
        const vm = app.mount('.demo')//定位,也可以通过id来获取
    </script>