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/166113.html原文链接:https://javaforall.cn

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

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

(0)


相关推荐

  • 什么是差分数组?「建议收藏」

    什么是差分数组?「建议收藏」问题背景如果给你一个包含5000万个元素的数组,然后会有频繁区间修改操作,那什么是频繁的区间修改操作呢?比如让第1个数到第1000万个数每个数都加上1,而且这种操作时频繁的。此时你应该怎么做?很容易想到的是,从第1个数开始遍历,一直遍历到第1000万个数,然后每个数都加上1,如果这种操作很频繁的话,那这种暴力的方法在一些实时的系统中可能就拉跨了。因此,今天的主角就出现了——差分数组。…

  • ntp时间同步端口_网络客户端协议没有了

    ntp时间同步端口_网络客户端协议没有了用Java实现的一个简单的NTP客户端

  • py2exe用法_py import

    py2exe用法_py import使用pyinstaller,真是受够了,各种bug,各种莫名其妙的情况,也是够了使用py2exe,学习的时候麻烦,但是打包时候真的太方便了安装py2exe,网址http://www.py2exe.org/选择对应的版本下载;撰写setup.py文件`#–coding:utf-8–importpy2exefromdistutils.coreimportsetupsetu

  • iphone android换机助手下载,腾讯换机助手手机最新版 目前最好用的安卓/苹果一键换机工具…

    iphone android换机助手下载,腾讯换机助手手机最新版 目前最好用的安卓/苹果一键换机工具…换机助手软件介绍换机助手是腾讯开发的一款跨平台手机资料迁移工具,它可以在安卓与安卓,苹果与苹果,安卓与苹果手机之间进行数据迁移,安卓手机可以直接在下面下载APP,而苹果手机则需要在自带的APPSTORE中搜索“换机助手”下载安装,这也是非常实用的一款程序了!换机助手软件功能:该软件可以通过调用手机创建热点,进行两部手机匹配互联,零消耗网络流量传输手机资料。目前已支持安卓Android与苹果iOS…

  • pycharm许可证过期_当前系统license过期

    pycharm许可证过期_当前系统license过期问题描述今天打开PyCharm的时候弹出提示框Yourlicensehasexpired,表示证书到期了,无法继续使用软件。之前使用的证书是在学校的时候注册的学生账号,也就是以.edu.cn结尾的账号。现在需要寻找一种新的认证方式。解决方案PyCharm属于JetBrains的一员,这个系列的软件的认证方式有三种,分别是账号登录、激活码和授权服务器。对于在校的学生用户,…

  • linux扩容VBoxManage

    linux扩容VBoxManage//查看虚拟磁盘空间信息,确认确实是需要扩容的虚拟硬盘。VBoxManageshowhdinfo”F:\oracleVirtualBox\workspace\centos1\centos1.vdi”//计算要扩容的空间大小,我这里是要扩展到100G(1024*1024*1024*100)。set/a1024*1024*1024//扩展虚拟硬盘空间,最后的数字替换成上面计算出的硬盘空…

发表回复

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

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