Vue(1)Vue安装与使用[通俗易懂]

Vue(1)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/165407.html原文链接:https://javaforall.cn

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

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

(0)


相关推荐

  • pandas之分组groupby()的使用整理与总结

    pandas之分组groupby()的使用整理与总结前言在使用pandas的时候,有些场景需要对数据内部进行分组处理,如一组全校学生成绩的数据,我们想通过班级进行分组,或者再对班级分组后的性别进行分组来进行分析,这时通过pandas下的groupby()函数就可以解决。在使用pandas进行数据分析时,groupby()函数将会是一个数据分析辅助的利器。groupby的作用可以参考超好用的pandas之groupby中作者的插图进行直…

  • python获取股票历史数据_量化交易之如何获取股票历史数据并存为csv

    python获取股票历史数据_量化交易之如何获取股票历史数据并存为csv量化研究尤其是进行基于价值投资的量化研究,需要上市公司的历史估值数据,如市盈率PE,市净率PB,或者市销率PS,市现率PCF。而有的人喜欢用exce或者csv文件的格式存放数据并且分析。我这里介绍一个网站,BaoStock,既支持直接下载历史数据为csv,也支持用程序下载数据并生成csv格式。网站地址是www.baostock.com,如果要下载历史估值数据,进入首页后,选择“沪深A股估值指标(日…

  • 四位数除以两位数的除法算式_4整除2

    四位数除以两位数的除法算式_4整除2原题链接这里所谓的“光棍”,并不是指单身汪啦~ 说的是全部由1组成的数字,比如1、11、111、1111等。传说任何一个光棍都能被一个不以5结尾的奇数整除。比如,111111就可以被13整除。 现在,你的程序要读入一个整数x,这个整数一定是奇数并且不以5结尾。然后,经过计算,输出两个数字:第一个数字s,表示x乘以s是一个光棍,第二个数字n是这个光棍的位数。这样的解当然不是唯一的,题目要求你输出最小的解。提示:一个显然的办法是逐渐增加光棍的位数,直到可以整除x为止。但难点在于,s可能是个非常大的数 ——

  • 插件8:拼写检查

    插件8:拼写检查&lt;?php//Plug-in8:SpellCheck//Thisisanexecutableexamplewithadditionalcodesupplie

  • labview车牌识别教学视频(车牌识别)

    OCR从本质上可看作是目标分类和识别的一种实际应用,因此它也包括训练和分类过程。

  • redis集群主从复制原理_主从关系紫音

    redis集群主从复制原理_主从关系紫音Redis主从复制主从复制简介主从复制的概念主从复制的作用主从复制工作流程阶段一:建立连接阶段主从连接(slave连接master)第一种方式第二种方式第三种方式授权访问阶段二:数据同步阶段工作流程数据同步阶段master说明数据同步阶段slave说明阶段三:命令传播阶段命令传播阶段的部分复制服务器的运行id复制缓冲区复制缓冲区内部工作原理复制缓冲区主从服务器复制偏移量(offset)数据同步+命令传播阶段工作流程心跳机制心跳阶段注意事项主从复制常见问题引发频繁的全量复制1引发频繁的全量复制2频繁的网络中

发表回复

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

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