vue.js的安装应用及基础常用指令

最新推荐文章于 2023-03-07 01:09:17 发布

置顶日常挂机中

最新推荐文章于 2023-03-07 01:09:17 发布

阅读量273

点赞数 1

分类专栏： vue 文章标签： vue基础

本文链接：https://blog.csdn.net/weixin_43895402/article/details/98869427

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

vue.js （二）

楼主不易，转载声明

首先，前面的博客我们了解了vue的出身以及它的一些概念性的东西
这次我们先来看一下这次博客的分类吧？如下： vue.js的引用及安装在HTML文件中构建一个vue.js的模板 vue.js的基础指令（属性）及其应用 vue.js的指令语法糖那么让我们一起进入vue.js 的世界吧

vue.js的引用及安装

我们已经知道并了解了vue的一些特点，那么到底怎么使用呢？
现在我们就来引用一下吧！！！
vue的引用有：

通过项目模块化安装使用（AMD，CMD，es6）（这种方式我还不熟悉,这里就不提了）
通过非模块化安装使用（通过script标签引用）

通过script标签引用vue.js

直接引用远程CDN

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

去vue的官网下载文件
点击我跳转vue官网下载页面
通过npm(cnpm,yarn)安装vue

npm安装命令

npm install vue

cnpm安装命令

cnpm i vue -D

yarn安装命令

yarn add vue -D

安装成功之后再dist文件夹中找到vue.js引用即可。

在HTML文件中构建一个vue.js的模板

总所周知，使用插件或者框架时，我们需要先引入他的必须文件，这里为了方便好看我就临时引入远程CDN。

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

需要放到head标签里，在title标签下面。因为页面是从上往下加载的，浏览器需要先读取vue.js文件才能渲染页面。

然后在body标签里给vue弄一个容器，id可随便定义。

 <div id="rongqi"></div>

然后写js文件，添加vue的基础数据模板(vue的实例)。

     var app=new Vue({      //这里的变量名可随意取，然后后面的vue首字母必须是大写。
          el:"#rongqi"              //el代表当前变量的vue的容器属性名，
                                           //id，class都可以,但是class同名属性只第一个生效。
          data:{                     //data可以在里面定义一些变量，后面会详细讲解。
          
          },
           methods:{        //methods是vue框架专门用来定义函数，写js的地方。平时没有函数可不用写。

         }
     })

上诉就是一个基础的vue模板啦。
为了你们好看，我在这里综合一下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue基础网页模板</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="rongqi">

    </div>
    <script>
      var app=new Vue({
          el:"#rongqi",
          data:{

          },
          methods: {
              
          }
      })
    </script>
</body>
</html>