初学Vue

Vue介绍

初学Vue_第1张图片

概念

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">script>

但前提是在IDEA里面下载Vue插件
初学Vue_第2张图片
初学Vue_第3张图片
出现对应选项则成功安装!如若插件已经安装,则没有对应选项,要么重启IDEA,要么手动添加,详情请参考:关于 idea 安装 Vue 插件后新建文件不显示 Vue Component 的问题及解决方法

声明式渲染

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


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>

<div id="app">
{
  { message }}
div>

<script src="https://cdn.jsdelivr.net/npm/vue">script>
    <script>
        var app = new Vue({
    
        el: '#app',
        data: {
    
        message: 'Hello Vue!'
        }
        })
    script>

你可能感兴趣的:(Idea,vue)