vue.js入门学习笔记整理

最新推荐文章于 2024-09-23 22:03:38 发布

起風了

最新推荐文章于 2024-09-23 22:03:38 发布

阅读量459

点赞数 2

分类专栏：前端文章标签： vue-js mvvm

本文链接：https://blog.csdn.net/qq_36460397/article/details/55260364

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文属于学习摘抄，在学习的过程中慢慢完善。
学习地址：
vue.js 60分钟快速入门

MVVM模式

vue.js的模式理解：下图不仅概括了MVVM模式（Model-View-ViewModel），还描述了在Vue.js中ViewModel是如何和View以及Model进行交互的。

ViewModel是Vue.js的核心，它是一个Vue实例。Vue实例是作用于某一个HTML元素上的，这个元素可以是HTML的body元素，也可以是指定了id的某个元素。

当创建了ViewModel后，双向绑定是如何达成的呢？

首先，我们将上图中的DOM Listeners和Data Bindings看作两个工具，它们是实现双向绑定的关键。
从View侧看，ViewModel中的DOM Listeners工具会帮我们监测页面上DOM元素的变化，如果有变化，则更改Model中的数据；
从Model侧看，当我们更新Model中的数据时，Data Bindings工具会帮我们更新页面中的DOM元素。

Hello World示例

这段代码在画面上输出”Hello World!”。
Vue.js有多种数据绑定的语法，最基础的形式是文本插值，使用一对大括号语法，在运行时{{ message }}会被数据对象的message属性替换，所以页面上会输出”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
        //"#app"指ID为“app”
        new Vue({
            el: '#app',
            data: exampleData
        })
    </script>

双向绑定示例

v-model指令在表单元素上创建双向数据绑定(script模块需要放在body后面，否则不生效)
此处代码块省略了script模块，与helloWorld的相似：

    <div id="app">
        <p>{{ message }}</p>
        <input type="text" v-model="message"/>
    </div>

效果：（改变任意一方的值，另一方的值也会发生改变）
效果图

Vue.js的常用指令

v-if指令

v-if是条件渲染指令，它根据表达式的真假来删除和插入元素，它的基本语法如下：

    v-if="expression"

expression是一个返回bool值的表达式，表达式可以是一个bool属性，也可以是一个返回bool的运算式。例如：

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <div id="app">
                <h1>Hello, Vue.js!</h1>
                <h1 v-if="yes">Yes!</h1>
                <h1 v-if="no">No!</h1>
                <h1 v-if="age >= 25">Age: {{ age }}</h1>
                <h1 v-if="name.indexOf('jack') >= 0">Name: {{ name }}</h1>
            </div>
        </body>
        <script src="js/vue.js"></script>
        <script>

            var vm = new Vue({
                el: '#app',
                data: {
                    yes: true,
                    no: false,
                    age: 28,
                    name: 'keepfool'
                }
            })
        </script>
    </html>