Vue入门简介【第一篇】

这篇具有很好参考价值的文章主要介绍了Vue入门简介【第一篇】。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

大纲

Vue入门简介【第一篇】


一、Vue介绍

        🌴 1.1  什么是Vue

     vue是一个构建用户界面UI的渐进式javascript框架,渐进式的框架是指可以一步一步的由浅入深的去使用该框架。

     vue官网: https://cn.vuejs.org/

        🌴 1.2 Vue的优点 

⭐️ 1、体积小
    压缩后33k左右,体积小意味着下载速度很快

⭐️ 2、更高的运行效率
    基于虚拟dom,一种预先通过javascript进行各种计算,把最终的DOM操作计算出来并进行优化的技术

⭐️ 3、双向数据绑定

⭐️ 4、生态丰富,学习比较简单

         🌴 1.3 安装vue的方式 (使用一个框架,第一步 下载安装)

🌙 1、直接CDN引入(需要网络)
    <!-- 开发环境版本,包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 生产环境版本,优化了尺寸和速度 -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

🌙 2、手动下载和引入
    开发环境:https://vuejs.org/js/vue.js
    生产环境:https://vuejs.org/js/vue.min.js

  进入官网 下载vue.js Vue入门简介【第一篇】

 Vue入门简介【第一篇】

🌙 3、npm安装

 拓展(CDN加速)
    🌻 简介:CDN的全称是Content Delivery Network,即内容分发网络,CDN是构建在网络之上的内容分发网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡、内容分发、调度等功能模块,使用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度和命中率。

    🌻 CDN加速:主要是加速静态资源,如网站上面上传的图片、媒体,以及引入的一些Js、css等文件。CDN加速需依靠各个网络节点,例如:120台CDN服务器分布在全国范围,从北京访问,则会从最近的节点返回资源,这是核心。

    🌻 CDN服务器通过缓存或者主动抓取主服务器的内容来实现资源储备

    🌻 CDN基本原理:将源站内容分发至最接近用户的节点,使用户可就近取得所需内容,提高用户访问的响应速度和成功率。
    🌻 优势:可以让用户就近访问资源


二、库和框架的区别

      🌾  库:本质上是一些函数的集合

      🌾 框架
    框架是一套完整的解决方案,使用框架是需要遵循框架的规则,将代码放入框架的合适位置,框架在合适的时候调用代码。


三、Vue案例01

注意:vue有两种开发方式,一种是直接页面开发,一种是工程级开发,本示例使用的是直接页面开发方式。

运用工具:WebStorm        


🌷 1、创建Vue项目  (VueDay01)

Vue入门简介【第一篇】

 🌷 2、将从官网中下载的vue.js放到js目录下

Vue入门简介【第一篇】

 🌷 3、新建一个用来存放html文件的目录,创建 HelloVue.html 页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--{{}}:插值-->
<div id="app">{{message}}</div>
<!--未交给vue实例管理-->
<div>{{message}}</div>
<!--引入vue,即可以使用vue.js中相关的东西了-->
<script src="../js/vue.js"></script>
<script>
    //创建一个vue实例(new Vue在vue.js中定义了),可以有一个参数用于挂载元素
    const app = new Vue({
        el: '#app',  //用于挂载要管理的元素
        data:{       //定义数据
            message: '青山不改,绿水长流'
        }
    })
</script>

</body>
</html>

new Vue:来源于vue.js内部定义的,故可以new出来

Vue入门简介【第一篇】

let(变量):可重新赋值

const(常量):不可重新赋值

在ES6中一般不用Var,因为它的缺陷有点多,无变量作用域

  编程范式:

        🅰 声明式编程

                  优势:可以真正做到 数据(data:{})和界面(div) 完全分离 

        🅱 命令式编程

                  循序渐进的,一步一步来的,例如:若你要煮饭,必须有大米,然后放在电饭锅中清洗,再煮。

 原生js的写法(编程范式:命令式编程)
    1、创建div元素,设置id属性
    2、定义一个变量为message
    3、将定义的message变量放在前面的div元素中显示
    4、修改massage的数据
    5、将修改后的数据再次替换到div元素中 

展示:

Vue入门简介【第一篇】

不改变页面的结构,在控制台通过app.message ='XXX' 动态修改值

Vue入门简介【第一篇】文章来源地址https://www.toymoban.com/news/detail-436990.html

到了这里,关于Vue入门简介【第一篇】的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Unidbg补环境实战第一篇:补环境入门

    Unidbg补环境实战第一篇:补环境入门 为什么要补环境 Unidbg补环境的案例情景复现 模拟执行so 参数获取 unidbg 代码初始化 目标函数的调用 补环境说明 实战补环境 本章小节 Unidbg 是一个基于 unicorn 的逆向工具,可以黑盒调用安卓和iOS中的so文件。这使得逆向人员可以在无需了解

    2024年02月05日
    浏览(40)
  • C#从入门到精通之第一篇: C#概述与入门

    1.1 C#概述 C#语言及特点 C#是微软公司发布的一种面向对象的、运行于.NET Framework和 .Net Core(完全开源,跨平台能够在Windows/Linux上运行)之上的高级程序设计语言。 C#是一种安全的、稳定的、简单的、优雅的,由C和C++衍生出来的面向对象的编程语言。它在继承C和C++强大功能的

    2024年02月04日
    浏览(51)
  • 【C语言必知必会 | 第一篇】C语言入门,这一篇就够了

    引言 C语言是一门面向过程的、抽象化的通用程序设计语言,广泛应用于底层开发。它在编程语言中具有举足轻重的地位。 此文为【C语言必知必会】系列第一篇,带你初步了解C语言,为之后的学习打下基础 C语言起源于美国贝尔实验室的贝尔实验室,由丹尼斯·里奇和肯尼斯

    2024年02月08日
    浏览(37)
  • Docker从入门到上天系列第一篇:Docker开篇介绍

    😉😉 欢迎加入我们的学习交流群呀! ✅✅1:这是 孙哥suns 给大家的福利! ✨✨2:我们 免费分享Netty、Dubbo、k8s、Mybatis、Spring、Security、Docker、Grpc、消息中间件、Rpc、SpringCloud等等很多应用和源码级别高质量视频和笔记资料 ,你想学的我们这里都有! 🥭🥭3:QQ群: 5837

    2024年02月21日
    浏览(39)
  • Android端MVVM从入门到实战(第一篇) - MVVM和四大官方组件

    MVVM是相对于MVC和MVP的一个概念,是一种架构模式。 1.1 MVC 传统的MVC中,View改变通知Controller进行处理,Controller处理结束后通知Model层更新,Model层更新以后通知View层渲染,指令单项流动,角色分工明确。但是MVC有三个缺点,1、三个角色互相持有对方依赖,因此很难复用其中任

    2024年02月04日
    浏览(39)
  • 【大数据开发 Spark】第一篇:Spark 简介、Spark 的核心组成(5大模块)、Spark 的主要特征(4大特征)、Spark 对比 MapReduce

    初步了解一项技术,最好的方式就是去它的官网首页,一般首页都会有十分官方且准确的介绍,学习 Spark 也不例外, 官方介绍:Apache Spark ™是一种多语言引擎,用于在单节点机器或集群上执行数据工程、数据科学和机器学习。 我们可以得知,Spark 可以单节点运行,也可以搭

    2024年02月05日
    浏览(46)
  • 无人机自主飞行实战入门-第一课(简介)

    研究的意义:对人类操作的严重依赖,严重阻碍了泛无人机行业的发展。 飞行汽车(UAM)即将到来,不论是从成本还是安全考虑都需要自主飞行。 传统飞控基于STM32架构设计,无法满足更智能功能所需的计算量,飞控是为了无人机位姿控制所设计,人类操控依然in the loop。

    2024年02月11日
    浏览(34)
  • 【Love2d从青铜到王者】第一篇:Love2d入门以及安装教程

    Love2D 是一款让开发者可以使用Lua语言进行开发的 2D游戏框架,免费且开源。其官网上有详细的介绍与手册,但需要科学上网且为全英文。Love2D 国外的开发者社区比较活跃,但国内的资料就比较少了,可能会有语言障碍。但Lua语言本身的简洁性加上框架的轻量级,英文的社区

    2024年02月11日
    浏览(40)
  • k8s实战从入门到上天系列第一篇:K8s微服务实战内容开篇介绍

            我们使用开源ruoyi微服务基本使用,基于基本的微服务实践。我们来讲解k8s的实战内容。         第一章:开源ruoyi微服务简介基本使用         第二章:k8s基本知识回顾、k3s集群搭建和基本使用         第三章:微服务镜像构建         第四章:中间件镜像构建

    2024年02月01日
    浏览(43)
  • 【Nginx】入门看这一篇就够啦,nginx 简介、安装、工作原理、工作方式、详解配置文件

    目录 1、nginx 简介 2、nginx的工作原理 3、nginx 工作方式 4、nginx 安装 命令行安装 卸载命令 从源码构建 查看版本 测试启动 5、详解nginx配置文件 第一部分:全局块 第二部分:events块 第三部分:http 6、hosts 文件简介 nginx [engine x] 是 HTTP 和反向代理服务器、邮件代理服务器和通

    2024年02月19日
    浏览(71)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包