【Vue.javascript】一、Vue介绍和安装如何使用

百度百科中对Vue的解释如下: Vue (读音 vjuː ,类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的

百度百科中对Vue的解释如下:

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,方便与第三方库或既有项目整合。

注意:下面的内容需要有html、css、js的基础。

官网地址:https://cn.vuejs.org/(里面带有视频讲解,可以看看)如图:

 

 

Vue的使用

 

首先点击安装按钮

直接用script标签引入

1. 下载js文件并在项目里引入

这里要注意:开发的时候要引入开发版本,生产版本会少了很多提示。点击开发版本按钮后,会提示现在一个js文件,如图:

2. CDN的方式

按照网站上的提示直接在html页面通过引入script标签的方式引入即可。如图:

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

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

<script type="module">
  import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.esm.browser.js'
</script>

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Vue学习</title>
<!--这里使用CDN的方式引入Vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>
<body>
<!--这个效果的显示主要是分为两步:
1. 给div指定id,并在下面的js中通过el来绑定这个id,也叫做挂载点
2. 通过两个花括号的方式引入挂载vue对象中的msg的内容
-->
<div id="testvue">{{msg}}</div>

<script type="text/javascript">
    new Vue({
        el:"#testvue",
        data:{
            msg:"你好"
        }
    })
</script>

</body>
</html>

3. NPM方式

适用于大型应用,这里暂时不多介绍,以后再来补全。

 

 

 

 

 

 

参考:

1. 慕课网视频

注意:本文章仅用于个人学习,如有侵权,联系删除!!

您可能有感兴趣的文章
vue 快速入门 系列 —— 初步认识 vue

Vue全家桶(Vue

什么是VUE?

Vue组件(.vue文件)

vue简介、入门、模板语法