对任何开发者来说,学习一个新的框架如Vue.js都是非常乏味的过程,特别是对于那些仍然需要学习基本开发语言的开发,例如JavaScript或TypeScript,本教程主要讨论Vue.js入门级的内容,本文假设你已经会HTML、CSS和JavaScript的基本知识。
有几种方式可以将Vue.js加入你的web项目中,这里使用最简单的一种方式,即CDN,大多数教程或文件可能使用npm或webpack部署项目环境,但是这里仍然是使用最简单的CDN方式,你只需要加入<
script>
标签即可。
1、创建Web项目进入开发,可以选择你个人喜欢的编辑器创建一个简单的Web项目,常见的有WebStorm和VS
Code,这里使用VS Code,先创建Vue.js项目的基本骨架,代码如下:
<
!DOCTYPE html>
<
html lang="zh_CN">
<
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.js<
/title>
<
/head>
<
body>
<
h1>Hello, Vue.js!<
/h1>
<
div id="app"><
/div><
script><
/script>
<
/body>
<
/html>
2、加入Vue.js的CDN库链接该script链接在body标签关闭前加入,或者在head标签中加入,Vue调用代码需要在该链接下方进行调用,否则调用不了,代码如下:
<
script src="http://img.readke.com/220411/05555a4K-0.jpg"><
/script>
此时我们的web项目成功加入了Vue,我们可以开始使用Vue了。
3、使用Vue加入Vue的CDN链接我们就可以使用Vue了,此时可以使用new操作符创建一个Vue实例,new Vue实例需要传入需要渲染的元素的选择器,该属性为el,在这里我们可以创建id为app对应的元素,使用语法如下:
<
script>
var app = new Vue({
el: "#app",
data: {
localProperty: "property value"
},
methods: {
methodName: function(){
// code
}
}
});
<
/script>
我们要首先简单分析一下,new Vue表示创建一个Vue实例,每个Vue应用都需要实例化Vue来实现,实例化Vue的时候需要传入一个对象,该对象就是{}中的内容了,对象的主要成员如下:
- el:它的值一般是DOM元素的ID选择器,指定需要被Vue渲染的DOM元素对象;
- data:每个Vue实例都有一个本地存储数据,用于为Vue实例中对应的属性绑定值,data的值是一个对象,对象的每个属性是我们自定义的属性,属性对应的值也是自定义的;
- methods:用于定义函数,同样是通过一个对象来定义,该对象可以定义多个函数;
- {{}}:绑定数据,用于输出对象属性和函数返回值。
<
!DOCTYPE html>
<
html lang="zh_CN">
<
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.js<
/title>
<
script src="http://img.readke.com/220411/05555a4K-0.jpg"><
/script>
<
/head>
<
body>
<
div id="app">
<
h1>{{title}}<
/h1>
<
div>{{content}}<
/div>
<
div>{{like}}<
/div>
<
div>{{share()}}<
/div>
<
/div><
script>
var app = new Vue({
el: "#app",
data: {
title: "Vue App",
content: "The Vue.js Tutorial for the Beginners",
like: 12,
},
methods: {
share: function(){
return "sharing the article...";
}
}
});
<
/script><
/body>
<
/html>
【很简单!Vue.js入门教程手把手教你学会Vue.js开发】显示效果图如下:
文章图片
推荐阅读
- 如何学习ReactJS(初学者完整指南)
- 经典排序算法之选择排序(Selection Sort)实现原理和代码实现及其应用详解
- 数据库快速索引原理!B树和B+树的实现原理和实例代码全解
- 你真的懂树吗(二叉树、AVL平衡二叉树、伸展树、B-树和B+树原理和实现代码详解)
- 经典线性结构之线性表、栈和队列数据结构详解和实例分析
- 码农进阶!数据结构、算法分析、算法复杂度、大O符号和算法分析实例详解
- 10道精选JavaScript面试题——前端面试必备
- 4种不同环境中引用公共模版的方式方法——vue和微信小程序
- 微信小程序如何动态修改页面标题——已解决