Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
如果你已经是有经验的前端开发者,想知道 Vue 与其它库/框架有哪些区别,请查看对比其它框架。
以下代码是保存至一个index.html的文档(文件后缀名是.html)中,并非是.vue的文件,当今后学会了一些更vue复杂的应用的时候,比如CLI创建了更复杂的vue应用,并支持单文件组件,那在项目下创建的文件可能就是以.vue为后缀的文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue 实例,创建一个 Vue 实例,声明式渲染</title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<p>{{ sitename }}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
sitename: '编程之吧',
}
});
</script>
</body>
</html>
Vuejs的引入
Vue.js的引入有多种方式,初学者使用<script>标签的方式引入,官网介绍还可以使用命令行工具 (CLI)的方式引入,我们这里使用的是前一种的方式引入。
从上面代码中可以找到如下引入vue.js的代码,vue.js下载到本地(或者CDN的方式引入),采用直接用 <script> 引入vue.js的方式,引入vue.js之后会在dom中声明一个全局变量Vue(可以在上面的代码末尾加入:console.log(window);),打印看看,如下图,如果不知道window,请查阅 Browser对象:window对象),这样vue.js就成功部署到项目中。
所以上面的代码中:new Vue 还可以这样用:new window.Vue,是一样!
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
Vue.js的应用可以分为两个重要的组成部分,一个是视图,另一个是脚本。
那如何创建Vue.js的应用
试图部分:在页面上创建id为app的div标签,标签中用左右双大括号的方式声明了两个变量,message和sitename,这就是vue最常见的文本插值。
vue应用视图部分
<div id="app">
<p>{{ message }}</p>
<p>{{ sitename }}</p>
</div>
vue应用脚本部分
脚本部分会包裹在<scrip>脚本标签之中,当引入vue.js之后会在dom中声明全局变量Vue,通过new Vue的方式可以或的Vue的应用,它会返回一个对象,如下代码中的var app。在new Vue的时候需要传递一个对象作为参数,这个对象有两个中要的属性,一个是el(element:元素),我们利用id选择器的方式,选中试图部分的div,另一个属性是data,data用与保存数据,我们在试图中声明的变量(message、sitename)就要在data中注册,并初始化变量的值。
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
sitename: '编程之吧',
}
});
</script>
以上就是创建的一个 Vue 简单应用!当我们 new Vue 的时候, Vue 其实做了大量工作,现在数据和 DOM 已经被建立了关联,所有东西都是响应式的。我们要怎么确认呢?
打开你的浏览器的 JavaScript 控制台 (就在这个页面打开),并修改 app.message 的值,你将看到上例相应地更新。
更新前:
更新后:
注意我们不再和 HTML 直接交互了。一个 Vue 应用会将其挂载到一个 DOM 元素上 (对于这个例子是 #vm) 然后对其进行完全控制。那个 HTML 是我们的入口,但其余都会发生在新创建的 Vue 实例内部。
除了文本插值,我们还可以像这样来绑定元素 attribute:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue 实例,创建一个 Vue 实例,声明式渲染</title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<style>
span{
border: 1px solid #EEE;
padding: 5px 10px;
border-color: #ff9595;
cursor: pointer;
}
</style>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<p>{{ sitename }}</p>
<span v-bind:title="message">鼠标悬停在此,将会显示:{{ message }}!</span>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
message: '页面加载于 ' + new Date().toLocaleString(),
sitename: '编程之吧',
}
});
</script>
</body>
</html>
这里我们遇到了一点新东西。你看到的 v-bind attribute 被称为指令。指令带有前缀 v-,以表示它们是 Vue 提供的特殊 attribute。可能你已经猜到了,它们会在渲染的 DOM 上应用特殊的响应式行为。在这里,该指令的意思是:“将这个元素节点的 title attribute 和 Vue 实例的 message property 保持一致”。
如果你再次打开浏览器的 JavaScript 控制台,输入 vm.message = '新消息',就会再一次看到这个绑定了 title attribute 的 HTML 已经进行了更新。
转载注明:
感谢博主,喝杯咖啡~
感谢博主,喝杯咖啡~
还没有人发表评论