声 明本教程是作者(孤狼)在学习Vue.js过程中总结笔记而来。编写过程中使用的Vue版本为Vue.js2.6.14。本教程可以随意转载,但请保留出处。
好了,好久没有更新过一起学系列教程了,这次一起来学习的课程是Vue.js V2版本。估计很多人很纳闷,不是已经发布V3版本了,为啥要学习V2的版本。虽然Vue3已经发布了一段时间,但是还有很多项目停留在V2版本,而且学习了V2之后有利于理解V3版本。后续学习V3会很容易。所以,开始吧。
Vue.js官网 https://cn.vuejs.org
TIP:在学习Vue.js的过程中,默认你会html+css+js整套代码,如果不会,可能无法看懂部分代码。
目前所有的前端都自称为大前端时代。所以项目不用vue感觉低人一等。好吧,其实是随着时代的进步,前端不再是以前的简简单单的调调js,做个点击动画那么简单了,前端目前的发展是独立出来发展。后台提供接口,前端直接来处理数据并展示。这样有利于项目的模块化。web前端独立处理,app前端独立处理,小程序前端独立处理,后台只需要提供接口即可。以往后台攻城狮要把前端页面直接输出的方式慢慢的会消失。
而且随着小程序越来越多,越来越火,这种前后分离的开发将会是常态。
不是任何时候都要用到vue.js的。
如果页面很简单,可以用十几行代码完成的,不要用vue.js
如果页面没有什么特别复杂的交互逻辑,业务逻辑很简单,也不要用vue.js
使用vue.js对于很小的项目来说作用是负面的,他会让你的页面变得庞大。
如果你的页面逻辑很多,交互很多,各种数据穿插,各种后台判断请求,这时候就可以用Vue.js
做小程序开发。虽然微信小程序修改了很多vue的代码,但是依然是vue.js,这个时候还是用vue.js
方法一:独立使用
vue.js可以独立加载使用,即单页面使用。如果你项目只是其中一部分使用vue.js,那么就可以采用这个方式。
在官网下载vue.js文件,本地应用一下即可。也可以通过cdn来引用,不过还是建议本地引用比较安全。
<script src="../vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.8"></script>
方法二:使用脚手架
如果你是一个新项目,确定要使用vue.js来构建整个项目。那么就可以使用Vue CLI(脚手架)来生成一个全新的Vue项目。
这里可以查看后面Vue CLI章节。
万年的初始化HelloWorld环节。
1.下载好一个vue.js本地文件
2.新建一个 index.html 文件,并编写以下代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue helloworld</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="msg">{{text}}</div>
<script>
const v=new Vue({
el:"#msg",
data:{
text:"123",
}
});
</script>
</body>
</html>
保存后用浏览器运行一下,就可以看到
创建一个Vue实例:
Vue应用都是通过Vue函数创建一个新的Vue实例开始的
let vm=new Vue({});
数据与方法:
当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时,视图将会更新为新的值。
let data{name:'张三'}
let vm=new Vue({
el:xxx,
data:data
})
参数意义:
el:
类型:string | HTMLElement
作用:指定响应代码的元素
data:
类型:Object | Function
作用:指定响应的数据对象
methods:
类型:{[key:string]:Function}
作用:定义方法函数
{{text}}
作用:对应绑定的data里的数据