JavaScript小知识（2）

最新推荐文章于 2023-12-23 11:09:23 发布

即将入土的羸弱老年人

最新推荐文章于 2023-12-23 11:09:23 发布

阅读量116

点赞数

本文链接：https://blog.csdn.net/qq_36823300/article/details/100664948

版权

Web 同时被 3 个专栏收录

23 篇文章 1 订阅

订阅专栏

Note

21 篇文章 0 订阅

订阅专栏

JavaScript

5 篇文章 0 订阅

订阅专栏

MVVM开发模式

MVVM是Model View ViewModel的缩写。其中，Model（模型）是指数据类型，如数据库记录。通常模型对象负责在数据库中存取数据；View（视图）是应用程序中处理数据显示的部分；ViewModel负责数据转换，将Model的变化反映到View上，如果View自身发生了变化，ViewModel也负责将此变化同步到Model。

MVVM的开发模式如下所示。

Vue.js的开发流程

Vue.js的开发流程很简单，如下所示。

1、定义视图

首先在网页中定义视图。视图中通常包含一个div元素作为显示数据的容器。例如：

<div id="app">
    {{message}}
</div>

在div元素中，通常可以使用{{属性名字}}接收模型中的数据。模型中对应属性的值会替换{{属性名字}}。

2、定义模型

模型实际上是一个JavaScript对象，对象有一个名称，用于被ViewModel引用。对象中可以包含属性，属性用于绑定到视图中的一个元素。模型的格式如下。

var 模型对象名 = {
    属性名: 属性值
}

3、定义ViewModel

在Vue.js程序中，ViewModel是一个Vue实例。定义ViewModel的方法如下。

new Vue({
    el: '#app',
    data: exampleData
})

Vue实例中包含以下两个属性。

el：用于指定视图。例如，el: '#app'表示Vue实例绑定到视图中id为app的HTML元素。
data：用于指定模型。例如，data: exampleData表示与视图绑定的模型是exampleData对象。

Vue.js有多种数据绑定的语法，最基础的形式是文本插值，使用一对大括号语法，在运行时，视图中的{{message}}会被模型对象的message属性替换。

基于Vue.js的简单实例。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
    </style>
</head>

<body>
    <!-- View -->
    <div id="app">
        {{message}}
    </div>

</body>

<script src="js/vue.min.js"></script>
<script>
    // Model
    var exampleData = {
        message: 'Hello World!'
    }
    // 创建一个Vue实例或“ViewModel”
    // 它连接View与Model
    new Vue({
        el: '#app',
        data: exampleData
    })
</script>

</html>

网页中定义了一个id为app的div元素，其中包含一个数据绑定的元素{{message}}。本例中的模型是exampleData对象，其中包含一个message属性。ViewModel是一个Vue对象，其中el属性指定#app，data属性指定exampleData。这样就可以用exampleData对象message属性的值替换{{message}}的位置。

Vue.js的常用指令

Vue.js的指令都以 v- 开头，它作用于HTML元素，可以为绑定的目标元素添加一些特殊的行为和特性。

1、v-if 指令

v-if 是条件渲染指令，其基本语法如下。

v-if = "expression"

expression是一个布尔表达式，当该表达式的值为true时，v-if 指令作用的视图元素将会渲染到网页中，否则该元素将被从网页中移除。

v-if 指令的应用。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
    </style>
</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 >= 100">Age: {{ age }}</h1>
        <h1 v-if="name.indexOf('jack') >= 0">Name: {{ name }}</h1>
    </div>

</body>

<script src="js/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            yes: true,
            no: false,
            age: 101,
            name: 'Johney'
        }
    })
</script>

</html>

2、v-show 指令

v-show 也是条件渲染指令，其基本语法如下。

v-show = "expression"

与 v-if 指令不同的是，使用 v-show 指令的元素始终都会被渲染到页面中。当 expression 的值为false时，使用 v-show 指令的元素将被设置为 CSS 的 display 属性，将其隐藏。也就是说，该元素定义中会增加下面的样式定义代码。

style = "display: none;"

3、v-else 指令

v-else 指令可以为 v-if 指令或 v-show 指令添加一个 else 块。使用 v-else 指令的元素必须跟在使用 v-if 指令或 v-show 指令的元素后面，否则不会被识别。当 v-if 指令为true时，其后面使用 v-else 指令的元素将不会被渲染到网页中；否则，其后面使用 v-else指令的元素都会被渲染到网页中。只不过如果 v-show 指令等于true，那么其后面使用 v-else 指令的元素会被隐藏，否则会显示在网页中。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
    </style>
</head>

<body>

    <div id="app">
        <h1 v-if="num >= 100">Num: {{ num }}</h1>
        <h1 v-else>Num小于100</h1>
    </div>

</body>

<script src="js/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            num: 99
        }
    })
</script>

</html>

4、v-for 指令

v-for 指令可以遍历一个列表，并将其中的元素渲染到网页中。其语法如下。

v-for = "item in items"

items的数据将在ViewModel中指定。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
    </style>
</head>

<body>

    <div id="app">
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Age</th>
                    <th>Sex</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="person in people">
                    <td>{{person.name}}</td>
                    <td>{{person.age}}</td>
                    <td>{{person.sex}}</td>
                </tr>
            </tbody>
        </table>
    </div>

</body>

<script src="js/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            people: [{
                name: '张三',
                age: 30,
                sex: '男'
            }, {
                name: '李四',
                age: 26,
                sex: '女'
            }, {
                name: '王五',
                age: 22,
                sex: '女'
            }, {
                name: '小明',
                age: 36,
                sex: '男'
            }]
        }
    })
</script>

</html>

5、v-bind 指令

v-bind 指令用于指定HTML元素的某个特性的值，语法如下。

v-bind: argument = "expression"

expression的值将应用于HTML元素的argument属性。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
        ul li {
            list-style-type: none;
            float: left;
            width: 30px;
            height: 30px;
            padding: 0px;
            border: 1px solid #B3EE3A;
            text-align: center;
        }
        ul li a {
            text-decoration: none;
            font-size: small;
            color: #B3EE3A;
            display: block;
            width: 100%;
            height: 100%;
            line-height: 30px;
        }
        .active {
            background-color: #B3EE3A;
            color: white;
            font-weight: bold;
        }
    </style>
</head>

<body>

    <div id="app">
        <ul class="pagination">
            <li v-for="n in pageCount">
                <a href="javascript:void(0)" v-bind:class="activeNumber === n ? 'active' : ''">{{ n }}</a>
            </li>
        </ul>
    </div>

</body>

<script src="js/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            activeNumber: 1,
            pageCount: 10
        }
    })
</script>

</html>

即将入土的羸弱老年人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript小知识（2）

MVVM开发模式MVVM是Model View ViewModel的缩写。其中，Model（模型）是指数据类型，如数据库记录。通常模型对象负责在数据库中存取数据；View（视图）是应用程序中处理数据显示的部分；ViewModel负责数据转换，将Model的变化反映到View上，如果View自身发生了变化，ViewModel也负责将此变化同步到Model。MVVM的开发模式如下所示。M...
复制链接

扫一扫