VUE学习笔记-入门

最新推荐文章于 2024-07-06 20:33:25 发布

宇柯

最新推荐文章于 2024-07-06 20:33:25 发布

阅读量131

点赞数 1

本文链接：https://blog.csdn.net/qq_60078280/article/details/119683032

版权

一、初识Vue

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。Vue 只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

二、安装

1、兼容性

Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。

2、直接在官网下载

https://cn.vuejs.org (下载完成后,用script标签将vue.js文件引入)

<script src="./js/vue.js"></script>

3、直接使用 <script>引入

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

4、npm

在用 Vue 构建大型应用时推荐使用 NPM 安装。NPM 能很好地如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。

$ npm install vue

三、第一个Vue程序

写一个程序输出 Hello vue

代码如下：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>第一个Vue程序</title>
    <!-- 
       输出  Hello Vue
        1、首先 引入vue文件
        2、创建一个Vue实例
        3、输出  Hello Vue
     -->
     <!-- 引入Vue文件 -->
    <script src="./js/vue-2.6.12-min.js"></script>
</head>

<body>
    <!-- 写一个DOM元素用来承载Vue -->
    <div id="app">
        <!-- {{变量名}} 是插值表达式 将数据对象内的变量取出 输出的为纯文本-->

        <!-- 将名为 msg的变量取出 -->
        {{msg}}
    </div>
    <script>
        // 创建 Vue实例
        let vm = new Vue({
            //  设置挂载点 el 
            // 将这个vue实例挂载到id为app的DOM元素上
            el: "#app",
            // Vue 实例的数据对象
            data: {
                // 设置数据内容
               msg:"Hello Vue"
            }
        })
    </script>
</body>

</html>

浏览器中显示为：

宇柯

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE学习笔记-入门

一、初识Vue Vue (读音 /vjuː/，类似于view) 是一套用于构建用户界面的渐进式框架。Vue 只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。二、安装1、兼容性Vue不支持IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。 2、直接在官网下载 https://cn.vuejs.org (下载完成...
复制链接

扫一扫