初学Vue

VIP文章秀温丸

于 2021-04-23 11:49:42 发布

阅读量289

点赞数 1

分类专栏： Idea 文章标签： vue

本文链接：https://blog.csdn.net/weixin_46656819/article/details/116043467

版权

Vue介绍

在这里插入图片描述

概念

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库(如：vue-router，vue-resource，vuex)或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
详情请看官网：Vue.js.

MVVM模式的实现者

Model：模型层，在这里表示JavaScript对象
View:视图层，在这里表示DOM
ViewModel：连接视图和数据的中间件，Vue.js即使MVVM中ViewModel层的实现者
在MVVM架构中，是不允许数据和视图直接通信的，只能通过ViewModel来通信，而ViewModel就是定义了一个Observer 观察者
ViewModel 能够观察到数据的变化，并对视图对应的内容进行更新
ViewModel 能够以监听到视图的变化，并能够通知数据发生变化
Vue.js就是一个MVVM 的实现者，他的核心就是实现了DOM 监听与数据绑定

Vue.js的优点

轻量级，体积小是一个重要指标
移动优先。更适合移动端，比如移动端的Touch事件
易上手，学习曲线平稳
吸取了Angular (模块化)和React(虚拟DOM)的长处，并拥有自己独特的功能，如：计算属性
开源，社区活动性高
等等…

Vue程序

第一个Vue程序

尝试 Vue.js 最简单的方法是使用 Hello World 例子。你可以在浏览器新标签页中打开它，跟着例子学习一些基础用法。或者你也可以创建一个 .html 文件，然后通过如下方式引入 Vue：

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

或

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

但前提是在IDEA里面下载Vue插件
在这里插入图片描述

出现对应选项则成功安装！如若插件已经安装，则没有对应选项，要么重启IDEA，要么手动添加，详情请参考：关于 idea 安装 Vue 插件后新建文件不显示 Vue Component 的问题及解决方法

声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层  模板-->
<div id="app">
{
  { message }}
</div>
<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var app = new Vue({
    
        el: '#app',
        data: {
    
        message: 'Hello Vue!'
        }
        })
    </script>

最低0.47元/天解锁文章

秀温丸

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初学Vue

Vue介绍概念Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库(如：vue-router，vue-resource，vuex)或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。详情请看官网：Vue.js.MVVM模式的实现者Model：模型层，在这里表示JavaScrip
复制链接

扫一扫