Vue.js入门教程（适合初学者）

Vue.js入门教程

Vue官网网址：Vue.js

中文网 Vue.js

Vue.js是渐进式JavaScript 框架，是一套构建用户界面的渐进式框架。也可以说Vue.js 是一个用来构建网页界面的 JavaScript 库。

Vue的常用使用方式有两种：

一、使用<script>标签（标记）引入。可以使用CDN（Content Delivery Network，即内容交付网络）库（框架）。也可以下载到本地。

二、使用命令行界面（CLI，command-line interface）工具。使用CLI 工具需要用户对 Node.js 和相关构建工具有一定程度的了解。

先介绍第一种

尝试 Vue.js 最简单的方法是可以创建一个 .html 文件，然后通过如下方式引入 Vue：

<!– 开发环境版本，包含了有帮助的命令行警告 –>

或者：

<!– 生产环境版本，优化了尺寸和速度 –>

使用Vue 的网页源码，结构大致如下：

<!DOCTYPE html>

<html>

<head>

<!– 加载库 –>

</head>

<body>

<p>{
{ message }}</p>

</div>

// ** Our code goes here! **

</script>

</body>

</html>

下面给出几个例子。

例1：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>{
{ message }}</p>

</div>

var app = new Vue({

el: ‘#app’,

data: {

message: ‘Hello Vue.js!’

}

})

</script>

</body>

</html>

将上面代码，保存文件名为实例1.html，用浏览器打开运行结果如下图：

说明：

每个 Vue 应用都需要通过实例化 Vue 来实现。

语法格式如下：

var vm = new Vue({

// 选项

})

可以看到在 Vue 构造器中有一个el 参数，它是 DOM 元素中的 id。在上面实例中 id 为 vue_det，在 div 元素中：

data 用于定义属性，上面实例中有一个message。

进一步解释如下：

vue的用法:

1、引包例如 <script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>

2、启动 new Vue() 其中options（选项）参数有 el、template、data等，说的具体点：

new Vue({el:目的地，

template：模板内容，

data: {

……

methods: {

……

}

)

“el:” 之后双引号中的是目的地，

template（模板）标签后面是模板内容

插值表达式：格式 {
{表达式}}

支持字符串{
{”}}、对象{
{object.key}}、判断后的布尔值{
{true}}、三元表达式{
{a==b?’正确’:’错误’}}

v-text其实就是给元素的innerText属性赋值，只能用在双标签中。

v-html就是给元素的innerHTml赋值，它会替代显示对应的数据对象上的值。当绑定的数据对象上的值发生改变，插值处的内容也会随之更新。

常用的vue指令有v-model, v-show, v-if, v-for, v-on, v-bind等

Vue还提供了一些有用的实例属性与方法，它们都有前缀 $，以便与用户定义的属性区分开来。

可以使用methods定义的函数，可以通过 return 来返回函数值。上面例中未用到。可参见下面的例子：

例2

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>Title : {
{Title}}</h1>

<h1>Explain : {
{Explain}}</h1>

<h2>{
{details()}}</h2>

</div>

var vm = new Vue({

el: ‘#vue_det’,

data: {

Title: “简易教程”,

Explain: “这仅是一个简单说明”

methods: {

details: function() {

return this.Title + ” ——帮你用技术实现梦想！”;

}

})

</script>

</body>

</html>

将上面代码，保存文件名为实例2.html，用浏览器打开运行结果如下图：

例3

<head>

<title>Vue实例</title>

<!– <script src=”./vue.js”></script> –>

</head>

<body>

{
{message}}

</div>

var vm = new Vue({

el: ‘#root’,

data: {

message: ‘hello world’

methods: {

handleClick: function () {

alert(“hello”)

}

})

</script>

</body>

</html>

将上面代码，保存文件名为实例3.html，用浏览器打开运行结果如下图：

作为初学者，建议用第一种方法学习，因为较简便。推荐几个进一步学习网页：

vue入门示例

vue入门示例（一）_heroking-CSDN博客_vue实例

Vue实战项目开发–vue基础精讲

Vue实战项目开发–vue基础精讲_任性的wo的博客-CSDN博客

vue快速入门的三个小实例

vue快速入门的三个小实例_非假非空的博客-CSDN博客_vue快速入门的三个小实例

下面介绍第二种，又分为：命令行创建和可视化创建

使用CLI 工具需要用户对 Node.js 和相关构建工具有一定程度的了解。

准备条件，要下载安装vue首先得下载安装node.js。

检测是否安装node.js

在CMD中使用以下命令来查看当前的 Node 版本：

node -v

如果显示如下

说明没安装，Node.js 安装包及源码下载地址为：

Download | Node.js

双击下载后的安装包，比较简单就不多说了（需要留意的是安装路径，默认是C:\Program Files\nodejs）。

如果显示类似如下

说明OK。

Webpack 是一个前端资源的打包工具，它可以将js、image、css等资源当成一个模块进行打包。

CLI 服务需要 webpack，输入webpack -v检查是否已安装（如果出现版本号，则说明安装）。

【可能碰到的情况及处理措施，输入webpack -v ，若显示如下：

请输入“y”，等一会儿（等出现命令行提示符>），再次输入webpack -v

出现版本号，说明已安装Webpack，否则输入npm install -g webpack 安装，安装用时较长，请耐心等候。

】

安装 vue-cli

命令行中输入 npm install -g vue-cli

检验是否安装成功，输入 vue-V (注意：这里是大写的 “V”) 或vue –version，如果出现版本号，则说明安装成功。

【新版3.0的Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，可通过 npm uninstall vue-cli -g卸载它。使用如下列命令安装这个新的包：

npm install -g @vue/cli】

用第二中方法创建项目（project 工程，项目）实例，又分为：命令行创建和可视化创建：

参见vue 之创建工程项目的两种方法_代码小宝宝的博客-CSDN博客

一）命令行创建，大体过程

在计算机创建一个项目目录例如：d:\vueproject\，并进入该目录

cd d:\vue-project\

输入命令

vue create 项目名

或者， vue init webpack 项目名

vue create 和vue init webpack的区别：vue create 是vue-cli3.x的初始化方式，目前模板是固定的，模板选项可自由配置，创建出来的是vue-cli3的项目，与cue-cli2项目结构不同，配置方法不同。vue init 是vue-cli2.x的初始化方式，可以使用github上面的一些模板来初始化项目，webpack是官方推荐的标准模板名。

可参考

此文章正在二次审核中，即将跳转到首页 – 程序员大本营

vue create 和vue init webpack的区别 | 易学教程

对此，上述两个网页讲的很详细，就不多说了。

二）可视化创建

命令行输入：

vue ui

回车以后自行跳转到这样的一个界面