Vue.js学习笔记一-CSDN博客

本文链接：https://blog.csdn.net/cqn9012/article/details/94628992

Vue.js是当下很火的一个JavaScript MVVM（Model-View-ViewModel）库，它是以数据驱动和组件化的思想构建的。

Hello World示例

**
了解一门语言，或者学习一门新技术，编写Hello World示例是我们的必经之路。
这段代码在画面上输出"Hello World!"。

<body>
    <!--这是我们的View-->
    <div id="app">
        {{ message }}
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    // 这是我们的Model
    var exampleData = {
        message: 'Hello World!'
    }

    // 创建一个 Vue 实例或 "ViewModel"
    // 它连接 View 与 Model
    new Vue({
        el: '#app',
        data: exampleData
    })
</script>

使用Vue的过程就是定义MVVM各个组成部分的过程的过程。

1、定义View
2、定义Model
3、创建一个Vue实例或"ViewModel"，它用于连接View和Model

双向绑定示例
MVVM模式本身是实现了双向绑定的，在Vue.js中可以使用v-model指令在表单元素上创建双向数据绑定。

<!--这是我们的View-->
<div id="app">
    <p>{{ message }}</p>
    <input type="text" v-model="message"/>
</div>

将message绑定到文本框，当更改文本框的值时，<p>{{ message }}</p> 中的内容也会被更新。