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

介绍

一、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 绑定元素特性

结果：

说明：

我们看到的 v-bind 特性被称为指令。指令带有前缀 v- ,以表示它们是Vue提供的特殊特性。可能已经猜到，它们会在渲染的DOM上应用特殊的响应式行为。在这里，该指令的意思是：将这个元素节点的 title 特性和 Vue实例的 message 属性保持一致。

如果我们再次打开浏览器的JavaScript控制台，输入 app2.message = '新消息' ,就会再一次看到这个绑定了 title 特性的HTML已经进行了更新。

四、条件与循环

1. 指令系统 v-if

作用：用于判断，返回值为布尔值

例如：

控制切换一个元素是否显示也相当简单：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app-3">
    <p v-if="seen">
       现在你看到我了
    </p>
</div>

<script src="vue.js"></script>
<script>
    var app3 = new Vue({
        el:"#app-3",
        data() {
            return {
                seen:true,
            }
        },
    })
</script>
</body>
</html>


----------------------- 结果 -----------------------------
现在你看到我了

继续在控制台输入 app3.seen = false，就会发现之前显示的消息消失了。

这个例子演示了我们不仅可以把数据绑定到DOM文本或特性，还可以绑定到DOM结构。此外，Vue也提供了一个强大的过度效果系统，可以在Vue插入、更新、移除元素时自动应用过渡效果。

2. 指令系统之 v-for

作用：v-for指令可以绑定数组的数据来渲染一个项目列表。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app-4">
    <ol>
        <li v-for="todo in todos">
            {{ todo.text }}
        </li>
    </ol>
</div>

<script src="vue.js"></script>
<script>
    var app4 = new Vue({
        el:"#app-4",
        data() {
            return {
                todos:[
                    { text:"linux" },
                    { text:"python" },
                    { text:"go" },
                ]
            }
        },
    })
</script>
</body>
</html>

v-for 循环绑定数组的数据来渲染项目列表

结果：

1.linux
2.python
3.go

在控制台里，输入 app4.todos.push({ text: '新项目' })，你会发现列表最后添加了一个新项目。

五、处理用户输入

为了让用户和我们的应用进行交互，我们可以用 v-on 指令添加一个事件监听器。

1. 指令系统之 v-on

作用：添加一个事件监听器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app-5">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">反转该消息</button>
</div>

<script src="vue.js"></script>
<script>
    var app5 = new Vue({
        el:"#app-5",
        data() {
            return {
                message:"Holle world"
            }
        },
        methods:{
            reverseMessage:function () {
                this.message = this.message.split("").reverse().join("")
            }
        }
    })
</script>
</body>
</html>

v-on 添加一个事件监听器

结果：

Holle world

反转该消息

dlrow elloH

反转该消息

注意在 reverseMessage 方法中，我们更新了应用的状态，但没有触碰 DOM——所有的 DOM 操作都由 Vue 来处理，我们编写的代码只需要关注逻辑层面即可。

Vue还提供了 v-model 指令，它能够轻松实现表单输入和应用状态之间的双向绑定。

2. 指令系统之 v-model

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app-6">
    <p>{{ message }}</p>
    <input v-model="message">
</div>

<script src="vue.js"></script>
<script>
    var app5 = new Vue({
        el:"#app-6",
        data() {
            return {
                message:"Holle world"
            }
        },
    })
</script>
</body>
</html>