vue的安装和使用_如何正确使用

vue的安装和使用_如何正确使用前言Vue(读音/vjuː/,类似于view)是一套用于构建前后端分离的框架。刚开始是由国内优秀选手尤雨溪开发出来的,目前是全球“最”流行的前端框架。使用vue开发网页很简单,并且技术生态环境完善

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

前言

Vue(读音/vjuː/,类似于view) 是一套用于构建前后端分离的框架。刚开始是由国内优秀选手尤雨溪开发出来的,目前是全球“最”流行的前端框架。使用vue开发网页很简单,并且技术生态环境完善,社区活跃,是前后端找工作必备技能!
 

Vue安装

vue的安装大体上分成三种方式
 

方式1:CDN引入

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

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

 

方式2:直接下载引入

开发环境:https://vuejs.org/js/vue.js
生产环境:https://vuejs.org/js/vue.min.js
 

方式3:npm安装

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

# 最新稳定版
$ npm install vue

 

基本使用

  要使用Vue,首先需要创建一个Vue对象,并且在这个对象中传递el参数,el参数全称是element,用来找到一个给vue渲染的根元素。并且我们可以传递一个data参数,data中的所有值都可以直接在根元素下使用{{}}来使用。示例代码如下:

<div id="app">
  {{message}}
</div>
</body>
<script>
    const app = new Vue({
      el: "#app",
      data: {
        message: "初学vue"
      }
    })
</script>

其中data中的数据,只能在vue的根元素下使用,在其他地方是不能被vue识别和渲染的。比如:

<!--这里无法渲染-->
<p>{{message}}</p>
</body>
<script>
    const app = new Vue({
      el: "#app",
      data: {
        message: "初学vue"
      }
    })
</script>

另外也可以在vue对象中添加methods,这个属性中专门用来存储自己的函数。methods中的函数也可以在模板中使用,并且在methods中的函数来访问data中的值,只需要通过this.属性名就可以访问到了,不需要额外加this.data.属性名来访问。示例代码如下:

<div id="app">
    <p>{{greet()}}</p>
</div>
</body>
<script>
    const app = new Vue({
      el: "#app",
      data: {
        message: "初学vue"
      },
      methods: {
        greet: function () {
          return "hello" + this.message
        }
      }
    })
</script>
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/165752.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 第五章 面向切面编程(AOP)之二

    第五章 面向切面编程(AOP)之二

  • DSP开发,使用CCS软件建立工程以及烧录

    DSP开发,使用CCS软件建立工程1概述1.1资源概述2工程建立步骤1概述实验的代码已经上传。1.1资源概述开发板:普中DSP开发板CCS版本:6.1.3主控芯片型号:TMS320F283352工程建立步骤1,在需要建立的工程的文件夹内新建一个工程文件夹。2,打开CCS软件,在弹出的Workspace内指向刚才建立的文件夹。3,建立新工程4,填入工程的相关信息5,新建后的工程,只包含两个文件以及一个文件夹,系统必须的头文件,RAM连接的配置文件6,在工程文件

  • 什么是QT[通俗易懂]

    什么是QT[通俗易懂]QT是什么?它能做什么?Qt是一个1991年由QtCompany开发的跨平台C++图形用户界面应用程序开发框架。它既可以开发GUI程序,也可用于开发非GUI程序,比如控制台工具和服务器。简单来说,QT可以很轻松的帮你做带界面的软件,甚至不需要你投入很大精力。QT学习需要避免的坑QT分为4.0版本和5.0版本他们之间的差别很大,不通用!!!不通用!!!不通用!!!所以要么你学习4.0要么你学习5….

  • Vue图片加载错误、图片加载失败的处理

    Vue图片加载错误、图片加载失败的处理比如后台返回的一个图片字段pic,我们通常在代码里,会做一个检验图片,通常会像下面这样写<img:src=”pic?pic:’../../assets/img/load.png'”alt=””>这个判断只能判断pic是否存在,只有pic=”的情况下,才回显示设置的默认图片,但是如果pic这个字段是有值的呢,并且是一个错误的值,或者一个找不到的404的图片呢?这个时候就要…

  • csgo开箱网站可以取回的_csgo官方开箱网站在哪里

    csgo开箱网站可以取回的_csgo官方开箱网站在哪里Incsgo,能取回的开箱网.我们为Incsgo爱好者们倾力打造品质卓越的Incsgo开箱平台,Incsgo抽奖网站,安全可靠,玩法多样。立即注册领取奖金,库存充足,全新箱子,一秒取回。Incsgo官方网站-能够取回的csgo开箱子网站官方链接:www.incsgo.gg注册登录自动免费获得$1.00美金优惠码:csgogo(充值使用csgogo可增加5%充值金额)支付:微信支付宝状态:直接取回…

  • 模电总结(一)「建议收藏」

    模电总结(一)「建议收藏」本总结用于个人复习、考研需要,也可供其他小伙伴学习、借鉴。基于GAY电期末引导,先粗略基于gay电期末写五篇。所以只为建立系统,对细节并没有深挖。第一章半导体及其器件个人概述——这一章我们学什么呢?学半导体的基本知识,pn结是什么,二极管的构造与特性,如何分析二极管的基本电路。(具体如下)但是,因为这里是现初步建立体系,我们在这讨论的是一些枝干,对部分知识忽略。gay电在此考的是半导体的基本知识和pn结和二极管基本电路。这一章我们就讲这个。首先,我们要了解半导体器件是什么?..

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号