Vue安装与使用

目录
  • 1、Vue安装
    • 方式1：CDN引入
    • 方式2：直接下载引入
    • 方式3：npm安装
  • 2、基本使用

前言：

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

1、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 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。

# 最新稳定版
$ npm install vue

2、基本使用

要使用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>

到此这篇关于Vue安装与使用的文章就介绍到这了,更多相关Vue安装与使用 内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue-resource安装过程及使用方法解析

    1.安装 npm install vue-resource --save 2.在main.js中添加 import VueResource from 'vue-resource' //全局注册 Vue.use(VueResource) 3.vue-resource发送请求 a)对象参数,post请求 this.$http.post('http://127.0.0.1:8081/getUserByParam', { userName: this.username, sex:this.sex }).

  • Vue router安装及使用方法解析

    对于单页应用,官方提供了vue-router进行路由跳转的处理,本篇主要也是基于其官方文档写作而成. 安装 基于传统,我更喜欢采用npm包的形式进行安装. npm install vue-router --save 当然,官方采用了多种方式进行安装,包括bower,cdn等. 基本用法 在HTML文档中使用,只需要利用v-link这个directive就行了,如: <a v-link="{path: '/view-a'}">Go to view-a</a> ps

  • VUE安装使用教程详解

    如果是简单实用vue的话,可以直接引用js文件. https://vuejs.org/js/vue.js 但是在构建大型项目的时候推荐使用NPM安装,NPM能够很好的和诸如webpack或Browserify模块打包器配合使用,同时Vue也提供配套工具来开发单文件组件. 1. 安装nodejs 由于npm(nodejs package manager)是nodejs的包管理器,所以要首先安装nodejs,从官网下载相应版本安装即可https://nodejs.org/en/download/.

  • 全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作

    官方链接:https://cli.vuejs.org/zh/guide/installation.html 1.安装Vue cli3 关于旧版本 Vue CLI 的包名称由 vue-cli 改成了 @vue/cli. 如果你已经全局安装了旧版本的 vue-cli(1.x 或 2.x),你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它. Node 版本要求 Vue CLI 需要 Node.js8.9 或更高版本 (推荐

  • 使用淘宝镜像cnpm安装Vue.js的图文教程

    前言 Vue.js是前端一个比较火的MVVM框架,要使用它,我们必须提前配置,其中有一种安装方式是使用npm,比较适合比较大型的应用.今天就来看看这种方式如何操作,由于npm是国外的,使用起来比较慢,我们这里使用淘宝的cnpm镜像来安装vue. 步骤 首先我们需要下载npm,因为我已经提前安装了node.js,安装包里面集成了npm,然后我们就可以利用npm命令从获取淘宝镜像的cnpm了. 1.打开命令行窗口,输入 npm install -g cnpm --registry=https://r

  • vue基础入门之vuex安装与使用

    vue基础入门之vuex安装与使用

    目录 1.什么是vuex 2.安装和引入 3.vuex的使用 4.流程介绍 5.mutation 6.getters过滤 7.Action--异步处理 8.Module 总结 本教程为入门教程,如有错误,请各位前端大佬指出. 1.什么是vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.详细介绍可以参照官网文档vuex.vuejs.org/zh/ 下面简单介绍vuex 2.安装和引入

  • 详解Vue-Router的安装与使用

    目录 安装 路由的基础配置 将Router安装到Vue中 Router的相关配置 Router.routes 的相关配置 实现一个简单的路由 1.配置路由 2. 在组件中实现路由 1. router-link 用于实现路由的跳转组件:该组件支持的属性 2. router-view 根据当前VueRouter的配置,当路由路由路径发生改变时渲染对应的路由视图组件 安装 1.在已有Vue项目中手动安装vue-router npm install --save vue-router 2.使用vue-c

  • vue安装和使用scss及sass与scss的区别详解

    vue安装和使用scss及sass与scss的区别详解

    1. 安装依赖:npm install node-sass sass-loader -D 2. webpack.base.conf.js文件 module: { { //手动添加这一条,相当于是编译识别sass! test: /\.scss$/, loaders: ["style", "css", "sass"]} } 3. 在.vue文件中使用 <style scoped lang="scss"> .box{ w

  • Vue安装浏览器开发工具的步骤详解

    开发vue时,浏览器有一个好的开发调试工具能让开发事半功倍,磨刀不误砍柴工. 步骤 1.下载工具 地址:  https://github.com/vuejs/vue-devtools 2.安装依赖 cmd进入vue-devtools文件夹,安装相关依赖,依次执行npm install,再执行npm run build. 3.修改配置 打开shells>chrome>src>manifest.json,修改"persistent":false为true. 4.浏览器安装

  • vue安装遇到的5个报错及解决方法

    前言 这篇博文不会教你怎么安装vue,但会告知安装过程中可能遇到的5个问题 5个报错 ①:若使用vue -V查询是否安装vue时提示没有找到指令,可能是你没有安装vue-cli脚手架(vue-cli可快速创建vue项目)          ②:vue安装淘宝镜像时报错,提示无效的配置,必须是完整合法的http地址,原因是我在url前面加了1个空格,这里不要有空格 注:安装淘宝镜像后,需要用到npm的地方都可以用cnpm替换,但建议安装模块和插件用cnpm,打包和启动vue用npm (cnpm是国

  • 解决vue安装less报错Failed to compile with 1 errors的问题

    1.创建vue项目后安装less,执行 npm install less less-loader --save-dev 下载版本为:less-loader@6.1.0 , less@3.11.3,重启服务报错,报错信息如下: 2.报错原因 less 本版太高需要降低版本,执行代码 先移除之前版本: npm uninstall less-loader 下载指定版本: npm install less-loader@5.0.0 -D 3.重启代码就可以了,若还是报错可移除文件node_modules

  • Vue安装与使用

    目录 1.Vue安装 方式1:CDN引入 方式2:直接下载引入 方式3:npm安装 2.基本使用 前言: Vue(读音/vjuː/,类似于view) 是一套用于构建前后端分离的框架.刚开始是由国内优秀选手尤雨溪开发出来的,目前是全球"最"流行的前端框架.使用vue开发网页很简单,并且技术生态环境完善,社区活跃,是前后端找工作必备技能! 1.Vue安装 vue的安装大体上分成三种方式 方式1:CDN引入 <!--开发环境版本,包含了又帮助的警告命令--> <script

  • 超级详细的Vue安装与配置教程

    超级详细的Vue安装与配置教程

    目录 一.下载和安装Vue 二.创建全局安装目录和缓存日志目录 三.配置环境变量 1. 环境变量---用户变量---选中Path---点编辑 2. 环境变量---系统变量---新建 三.安装vue 1. 安装vue.js 2. 安装webpack模板 3. 安装脚手架vue-cli 4. 安装vue-router 四.我的第一个的 vue-cli应用程序 总结 一.下载和安装Vue 官网下载地址Download | Node.js 选择适合自己的版本,推荐LTS,长久稳定版本. 我这里选择的是W

  • vue安装less-loader依赖失败问题及解决方案

    vue安装less-loader依赖失败问题及解决方案

    目录 vue安装less-loader依赖失败 安装less-loader报错 unable to resolve dependency tree 降低 less-loader 版本 vue安装less-loader依赖失败 vue可视化面板中提供的less-loader依赖安装失败,导致以下代码识别不了,出现错误信息 因为该项目开发用的脚手架是3.11.0版本的,不能用vue可视化面板中提供的less-loader10.1.0,所以要另外要下载低版本的less-loader,比如5.0.0的.

  • vue安装node-sass和sass-loader报错问题的解决办法

    目录 可行版本(针对 node 16+ 版本) 问题描述 解决方法 补充知识:解决启动VUE项目时报node-sass不能运行问题 总结 可行版本(针对 node 16+ 版本) 不想浪费时间看的,可直接去尝试 npm install node-sass@6.0.1 -D npm install sass-loader@10.2.0 -D 问题描述 问题描述:在进行一个vue项目练习时需要导入node-sass.sass-loader这两个依赖,书本提供代码是npm install sass-l

  • Vue安装与环境配置步骤详解

    目录 1.安装node.js 2.查看npm 3.安装npm的国内镜像—cnpm 4.安装webpack(一款开源的前端打包工具) 5.查看webpack是否安装成功 6.安装vue-cli脚手架构建工具 7.创建Vue项目 补充:vue-cli Failed to download repo vuejs-templates/webpack连接超时解决办法 总结 1.安装node.js 从node.js官网下载并安装node,安装过程很简单,一路“下一步”就可以了(傻瓜式安装).安装完成之后,打

随机推荐