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>

</head>

<body>

</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

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

如果没反应

原因：版本太低

版本低于3时没有ui功能

查看版本号

vue -V

查看是否有ui功能

vue -h

看是否有

若没有，说明没有ui功能，解决方法：

卸载老版本：

npm uninstall vue-cli -g

安装新版本，vue-cli的3.0+以后使用的不是vue-cli了，如果用以上的安装命令安装的并不是最新版的3.0+的，而如果安装3.0的话就需要使用新的

npm install @vue/cli -g

就不给出具体的实例了，因为上面给出的链接就有。

附录、vue学习资源：

Vue.js 介绍 — Vue.js 中文文档

https://blog.csdn.net/qingmingqingxin/category_6868061.html

Vue.js入门教程（适合初学者）相关推荐

Vue.js入门教程-组件注册
一.组件创建 1.1 创建步骤创建Vue的组件都有三个基本步骤是 [①创建组件构造器.②注册组件和③使用组件]. 1.2 基本示例比如,我们创建一个Button组件. // 1. 创建一个组件构造 ...
【前端实例代码】Html5+css3创建拟物风格昏昏欲睡的云朵动画网页效果~前端开发网页设计基础入门教程~适合初学者~超简单~
b站视频演示效果: [前端实例代码]Html5+css3创建拟物风格昏昏欲睡的云朵动画网页效果!前端开发网页设计基础入门教程!适合初学者~超简单~ 效果图: 完整代码: <!DOCTYPE ht ...
Vue.js 入门教程
Vue.js 教程 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架. Vue 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽可能简单的 A ...
【转】Vue.js入门教程（二）在页面中引入vue的方式
第二章:安装和基础效果展示页面中引入vue 因为我们的目标是在最短的时间之内学会vue的使用方法,所以我们不一定需要通过npm工程化进行安装,你直接用script在页面中引用也完全没有问题. 第一种 ...
【转】Vue.js入门教程（一）从静态页面到前后端分离开发
第一章:基础知识我能看懂吗? 只要你现在能用html+css+js制作一个静态页面,相信我,你100%可以读懂这篇文章. 本文尤其适合那些想要了解前后端分离开发技术,或者刚刚脱离传统MVC开发模式的 ...
Vue.js入学教程
Vue.js是什么 Vue.js 是用于构建交互式的 Web 界面的库. Vue.js 提供了 MVVM 数据绑定和一个可组合的组件系统,具有简单.灵活的 API. Vue.js(类似于view)是一 ...
js模板字符串自定义类名_【Vue.js 入门到实战教程】07Vue 组件注册 | 基本使用和组件嵌套...
来源 | https://xueyuanjun.com/post/21929除了前面介绍的基本语法之外,Vue.js 还支持通过组件构建复杂的功能模块,组件可以称得上是 Vue.js 的灵魂,是 Vu ...
vue设置cookie的domain无效_【Vue.js入门到实战教程】16Tailwind 与 Bootstrap 的区别和使用入门...
来源 | https://xueyuanjun.com/post/22065我们知道,从 Laravel 8 开始,自带前端脚手架代码默认兼容 Tailwind CSS 框架,取代了之前的 Boots ...
js读取http chunk流_极简 Node.js入门教程双工流
点击上方蓝字关注我们小编提示: 本文是由 ICBU 的谦行小哥哥出品,我们会持续发出极简 Node.js入门教程,敬请期待哦,文中有比较多的演示代码建议横屏阅读双工流就是同时实现了 Readab ...

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

Vue.js入门教程

Vue.js入门教程（适合初学者）相关推荐

最新文章

热门文章