Vue-01-HelloVue

阿国GG在学习

已于 2022-03-21 16:25:16 修改

阅读量59

点赞数

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

于 2022-03-11 15:53:50 首次发布

本文链接：https://blog.csdn.net/weixin_46147113/article/details/123426287

版权

Vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一、简介

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

二、安装使用

1、可以本地直接在官网下载并用 <script> 标签引入。：https://cn.vuejs.org/

2、使用 CDN 方法

Staticfile CDN（国内） : https://cdn.staticfile.org/vue/2.2.2/vue.min.js
unpkg：https://unpkg.com/vue@2.6.14/dist/vue.min.js。
cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

导入：

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

三、Hello Vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  使用CDN的方式引入Vue.js  -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>
<!--创建一个id为App的div标签-->
<div id="app">
<!--  用来输出Vue对象中的message的值，如果message内容改变，这里的输出结果也会改变  -->
    {{message}}
</div>
<script>
<!--  在script标签内创建了Vue实例对象，该对象有两个属性：el和data。  -->
    // el：将Vue实例对象绑定到id为App的Dom种
    // data：用于数据存储
    var app=new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue'
        }
    })
</script>
</body>
</html>

阿国GG在学习

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue-01-HelloVue

一、简介Vue (读音 /vjuː/，类似于view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。二、安装使用1、可以本地直接在官网下载并用<script>标签引入。：https://cn.vuejs.org/2、使用 CDN 方法 Sta...
复制链接

扫一扫