您的位置：首页 > Web前端 > Vue.js

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

2019-08-09 19:32 681 查看

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>