Vue的学习
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。
与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统:
<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
看起来这跟渲染一个字符串模板非常类似,但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联,所有东西都是响应式的。我们要怎么确认呢?打开你的浏览器的 JavaScript 控制台 (就在这个页面打开),并修改 app.message
的值,你将看到上例相应地更新。
在VS code上面编写Vue时需要注意一些问题,VS code无法在界面上面建一个工程,你需要打开一个文件夹,然后在文件管理器界面进行新建文件夹,然后将vue.js代码保存在其工作区(即vue代码保存的文件),方便以后工程的使用。
下面是一些实例代码:
index.html
<!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>FirstvueProject</title>
<script src ="../lib/vue(1).js"></script>
</head>
<body>
<div id = "app">
{{message}}
</div>
<script src ="js/main.js"></script>
</body>
</html>
我在index.html的工程下面也新建了一个main.jsp,来存放vue的框架
var app =new Vue({
el:'#app',
data:{
message: "hello vue project"
}
})
最后其HTML文件运行结果是
hello vue project
这里面我遇到了一些“坑”(主要是自己菜),像
<script src ="../lib/vue(1).js"></script>
我在写的时候其vue的路径总是设置错误,导致程序在浏览器上面一直显示{{message}},还有就是其js的文件是script标签的属性,而不是script的内容,也就是说
src ="../lib/vue(1).js
要放在<script>内。
还有就是vue上面的对象名和要绑定的标签相对应,才能够完成输出。