您的位置:首页 >> Vue >> 《和小米一起学Vue.js》— helloworld

《和小米一起学Vue.js》— helloworld

[ 孤狼 | 2022-07-28 23:25:56 | Vue | 1404°C | 0条评论 ]
声 明

本教程是作者(孤狼)在学习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?

目前所有的前端都自称为大前端时代。所以项目不用vue感觉低人一等。好吧,其实是随着时代的进步,前端不再是以前的简简单单的调调js,做个点击动画那么简单了,前端目前的发展是独立出来发展。后台提供接口,前端直接来处理数据并展示。这样有利于项目的模块化。web前端独立处理,app前端独立处理,小程序前端独立处理,后台只需要提供接口即可。以往后台攻城狮要把前端页面直接输出的方式慢慢的会消失。

而且随着小程序越来越多,越来越火,这种前后分离的开发将会是常态。


啥时候用Vue.js

不是任何时候都要用到vue.js的。

如果页面很简单,可以用十几行代码完成的,不要用vue.js

如果页面没有什么特别复杂的交互逻辑,业务逻辑很简单,也不要用vue.js

使用vue.js对于很小的项目来说作用是负面的,他会让你的页面变得庞大。

如果你的页面逻辑很多,交互很多,各种数据穿插,各种后台判断请求,这时候就可以用Vue.js

做小程序开发。虽然微信小程序修改了很多vue的代码,但是依然是vue.js,这个时候还是用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

万年的初始化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里的数据





转载请注明出处:http://gl.paea.cn/n.php?n=166
 
如您看得高兴,欢迎随意投喂,让我们坚持创作!
赞赏一个鸡腿
还没有人留下遗迹
综合 · 搜索