Vue 实例,创建一个 Vue 实例,声明式渲染

Vue / 724人浏览 / 0人评论

Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

Vue.js 是什么?

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就成功部署到项目中。
window
所以上面的代码中: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 的值,你将看到上例相应地更新。
更新前:
vuejs教程
更新后:
vuejs教程

注意我们不再和 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 已经进行了更新。

转载注明:

扩展查找

0 条评论

还没有人发表评论

发表评论 取消回复

记住我的信息,方便下次评论
有人回复时邮件通知我