初学Vue.js--创建Vue实例

﹏ヽ暗。殇╰゛Y 2021-12-03 21:57 271阅读 0赞

昨天刚开始学习Vue.js(读音 /vjuː/, 类似于 view)想记录一下,Vue.js是一种渐进式前端框架，所谓渐进式就是你可以一步一步、有阶段性的来使用Vue.js不必一开始就使用所有的东西

**(一)引用Vue.js**

引用Vue.js是通过<script>标签引用的并且有两个版本，一个是开发版本一个是生产版本，区别就在于代码的压缩与否，开发环境版本包括完整的警告信息与调试模式，而生产环境版本就相当于对这些功能进行了阉割，但同时失去一些东西往往也带来一些东西，比如说速度，压缩后的vue.js速度要比压缩前的快。因为刚开始接触vue.js。所以我使用的是开发版本，当出现错误时会提醒哪里出错了，有助于更正。引用时有两种方式

(1)直接引用，此时每当运行HTML文件时电脑都是需要连接互联网的，引用方式如下：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

(2)在官网[https://cn.vuejs.org/v2/guide/installation.html][https_cn.vuejs.org_v2_guide_installation.html] 下载Vue.js通过相对路径来引用，这时只需要下载时电脑需要上网，而在使用的使用就不需要电脑联网了。

<script src="xx/vue.js"></script>

**(二)创建Vue.js实例**

当引用vue.js后就可以创建vue实例了，创建实例的方法很简单，使用框架内嵌的构造方法Vue就可以创建一个Vue实例，并启动Vue应用，创建过程如下：

var myVue=new Vue(\{

//选项

\})

变量 myVue就代表这个Vue实例，事实上，几乎所有代码都是一个对象，写入Vue实例的选项内的；

（1）选项的格式是一个一个的类似于key：value的格式，选项中的el是必不可少的，是element（节点）的前两个字母，用于指定一个页面中已经存在的DOM元素来挂载Vue实例，他可以是HTMLelement，也可以是是CSS选择器，比如：

var myVue=new Vue(\{

el:document.getElementById('myvue')  //或者是‘\#myvue’

\})

转载于:https://www.cnblogs.com/gulugulul/p/11200479.html

[https_cn.vuejs.org_v2_guide_installation.html]: https://cn.vuejs.org/v2/guide/installation.html

发表评论取消回复

表情：

评论列表（有 0 条评论，271人围观）

还没有评论，来说两句吧...

相关阅读

相关初学vue，vue cli 问题

一、我所遇到的指定路径可以出现版本号，直接输入vue -V，显示错误 ![5b2accd0bfcd4847b1178f5447626b28.png][] 解决方法

谁践踏了优雅/ 2024年03月17日 15:21/ 0 赞/ 112 阅读

相关【Vuejs】887- 深入浅出 Vue Mixin

![1745288bca3b2c242f8b84e72c766ead.png][] 作者：flyyang https://flyyang.me/2019/01/24/vue

淩亂°似流年/ 2022年11月05日 05:17/ 0 赞/ 194 阅读

相关 vue01-helloWorld创建vue实例

首先打开vue官网，打开教程，根据下面连接把js文件下载下来，也可以用网址不下载。 ![70][] ![70 1][] <!DOCTYPE html> <

待我称王封你为后i/ 2022年05月09日 23:03/ 0 赞/ 197 阅读

相关 vuejs入门实例讲解

vuejs是一个前端javascript框架，集各种操作和方法于一身的框架，可以取代jQuery在项目中使用，个人感觉，vue和angular框架很像，都有双向绑定的属性，也是

淩亂°似流年/ 2022年04月11日 13:54/ 0 赞/ 386 阅读

相关初学vue.js

1. 什么是vue？ “vue.js兼具angular.js和react.js的优点，并剔除了它们的缺点”。授予了这么高的评价的vue.js，也是开源世界华人的骄

超、凢脫俗/ 2021年12月20日 12:59/ 0 赞/ 231 阅读

相关初学Vue.js--创建Vue实例

昨天刚开始学习Vue.js(读音 /vjuː/, 类似于 view)想记录一下,Vue.js是一种渐进式前端框架，所谓渐进式就是你可以一步一步、有阶段性的来使用Vue.js不必

﹏ヽ暗。殇╰゛Y/ 2021年12月03日 21:57/ 0 赞/ 272 阅读

相关 Vue实例创建

Vue实例创建每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的： var vm = new Vue({ // 选项

电玩女神/ 2021年10月19日 23:58/ 0 赞/ 371 阅读

相关【Vue 学习】- VueJS 生命周期

一、概述 Vue 的生命周期可以分为 8 个生命周期的执行点，从 new 创建 Vue 对象到对象的销毁，其中 4 个基本的，4 个特殊的，在下图中，红色标注的就是 8

向右看齐/ 2021年09月21日 01:16/ 0 赞/ 451 阅读

相关【Vue 学习】- VueJS 简单入门

目录一、概述 1、Vue 介绍 2、MVVM 模式二、Vue 入门 1、使用 IDEA 开发 Vue 2、插值表达式 --------------------

末蓝、/ 2021年09月21日 00:52/ 0 赞/ 754 阅读

相关 Vue.js初学

Vue.js从零开始 1、简单认识Vue.js Vue (读音 `/vjuː/`，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue

迷南。/ 2021年09月03日 03:58/ 0 赞/ 417 阅读