Vue架构【基础篇-第02章】：介绍

介绍

一、Vue.js是什么

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

二、起步

尝试Vue.js最简单的方法是使用JSFiddle 上的 Hello World 例子。我们可以在浏览器新标签页中打开它，或者创建一个.html文件，然后通过如下方法引入Vue:

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

或者：

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

三、声明式渲染

1. Vue.js的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进DOM的系统：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="app">
    <!--模板语法-->
    <h2>{{ msg }}</h2>
    <h3>{{ 'hhahda' }}</h3>
    <h3>{{ 1+1 }}</h3>
    <h4>{{ {'name':'alex'} }}</h4>
    <h5>{{ person.name }}</h5>
    <h2>{{ 1>2? '真的': '假的' }}</h2>
    <p>{{ msg2.split('').reverse().join('') }}</p>
    <div>{{ text }}</div>
</div>
<!--1.引包-->
<script src='./vue.js'></script>
<script>
    //2.实例化对象
    new Vue({
        el:'#app', //绑定那块地
        data:{
            //数据属性  种子
            msg:'黄瓜',
            person:{
                name:'wusir'
            },
            msg2:'hello Vue',
            text:'<h2>日天</h2>'
        }
    });
</script>

</body>
</html>

----------------------- 结果 -----------------------------

黄瓜
hhahda
2
{ "name": "alex" }
wusir
假的
euV olleh

<h2>日天</h2>

上面就是我们创建的一个Vue应用，看起来这跟渲染一个字符串模板非常类似，但是Vue在背后做了大量工作。现在数据和DOM已经被建立了关联，所有的东西都是响应式的。要怎么确认呢，打开浏览器的JavaScript控制台，并修改app.message的值，我们将看到上例相应的更新。

2. 指令系统之 v-bind

作用：用来绑定元素特性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app-2">
    <span v-bind:title="message">
        鼠标悬停几秒钟查看此处动态绑定的提示信息!
    </span>
</div>

<script src="vue.js"></script>
<script>
    new Vue({
        el:"#app-2",
        data() {
            return {
                message:"页面加载于" + new Date().toLocaleString()
            }
    },
    })
</script>
</body>
</html>

v-bind 绑定元素特性

结果：

Vue架构【基础篇-第02章】：介绍

猜你喜欢