Vue.js 框架是一个由我们国人开发的一个 Web 框架,尤雨溪 ,感兴趣的可以自己了解。
Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手,还便于与第三方库或既有项目整合。
Vue.js 下载地址:
打开网址 Ctrl + s
保存到桌面就好。
新建一个文件夹,把刚刚下载好的 vue.js
文件放到文件夹里,在文件夹里新建一个 html
文件。
创建好的目录大致如下:
通过 <script></script>
标签导入 vue.js
文件,如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello World</title>
<script src="vue.js"></script>
</head>
<body>
</body>
</html>
现在增加 html
文件里面的内容,如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello World</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
{{ msg }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
msg: 'Hello World'
}
})
</script>
</body>
</html>
浏览器打开 index.html
,Hello World
就显示在了网页上了。
虽然我们用 <div>Hello World</div>
能输出同样的结果,为什么还要用到 Vue.js 这个前端框架呢?
因为这样对网页上的数据可以更加方便的处理、渲染,更加容易扩展网页应用。可以减少很多 DOM
的操作,大型项目中可以减少很多重复代码。
关注
网友评论