Vue基础

    该内容为《Spring Boot + Vue 开发实战（电子工业出版社）》第9章内容

9.1 Vue介绍

直接看Vue官方网站：cn.vuejs.org/

9.1.1 MVVM思想

MVVM思想把每个页面丰城M（Model）、V（View）、VM（ViewModel），其中VM是核心，是M和V之间的调度者。通过ViewModel，View和Model可以实现数据的相互影响。

9.1.2 前端三大框架介绍

AngularJS、React、Vue。

9.2 DOM编程与MVVM编程对比

9.2.1 改变元素内容案例

点击按钮，讲div中的“你好”改为“Hello”.本小节会通过JavaScript，jQuery和Vue三种技术将其完成。

使用JavaScript操作DOM元素，首先通过document对象提供的getElementById(),getElementByName(), getElementByTagName(), getElementByClassName()等方法获得HTML元素，然后通过改元素对应的属性获得值，再通过给该属性值来改变值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function change(){
            let obj = document.getElementById("mse");
            obj.innerText="Hello";
        }
    </script>
</head>
<body>
    <div id="mes">
        你好
    </div>
    <button id="btn" onclick="change()">点击</button>
</body>
</html>

JQuery实现：

# 略

Vue实现：

<head>
    <script src="js/vue.js"></script>
</head>

<body>
    <div id="container">
        <div v-text="mes"></div>
        <button v-on:click="change">点击</button>
    </div>
<body>

<scrit>
    let vue = new Vue({
        el:"#container",
        data:{
            mes:"你好"
        },
        methods:{
            change:function(){
                this.mes="Hello";
            }
        }
    })
</script>

9.2.2 表单与表格案例

案例：首先在右侧表单区域的两个文本框中任意输入值，然后单击【增加】按钮，就能讲数据动态添加到左侧表格中并显示出来；当单击右侧的【删除】按钮时，则能讲表格的最后一条数据删除。

使用Vue来实现，首先通过v-for指令讲Table和Vue对象中的roles绑定，由于roles是数组类型的对象，因此v-for指令可以将数据循环渲染到Table中。然后通过v-model指令将表单元素和属性变量进行双向绑定，作为是当用户向文本框中输入数据时，可以直接改变Vue对象的属性值。当增加按钮触发时，将name和code的值装成一个对象，并通过JavaScript数组的push()函数将对象添加到roles数组中，实现新增数据在表格中显示。删除则通过数组的pop()函数移除数组中的组后一个元组即可。代码如下：

<div id="main">
    <div style="float: left;margin-right: 20px;">
        <table id="table">
            <!--省略表头-->
            <tr v-for="role in roles">
                <td>{{role.code}}</td>
                <td>{{role.name}}</td>
            </tr>
        </table>
    </div>
    <div style="float:left">
        <div>
            <form>
                <input type="text" v-model="code"/><br/>
                <input type="text" v-model="name"/>
            </form>
            <input type="button" value="增加" style="margin-left: 30px" @click="add"/>
            <input type="button" value="删除" @click="deleteThis"
        </div>
    </div>
</div>

<script src="../js/vue.js"></script>
<script>
    let vm = new Vue({
        el:"#main",
        data:{
            name:"",
            code:"",
            roles:[],
        },
        method:{
            add(){
                let role = new Object();
                role.name = this.name;
                role.code = this.code;
                this.roles.push(role);
            },
            deleteThis(){
                this.roles.pop()
            }
        }
    })
</script>

9.3 Vue语法

9.3.1 Vue对象和文本渲染

Vue的指令都以“v-”开头，其中v-html和v-text与{{}}语法一样，都是在闭合标签中添加数据，但两者又有以下不同。

v-html指令可以在页面上显示文本及html标签。
v-text指令会对html标签进行转义操作，并将标签以文本的形式显示出来。

在闭合标签内部添加数据是项目开发中最常见的操作，Vue还提供一种简洁的模板形式的语法。

<div>{{mes}}</div>

{{}}语法，由于其形似胡须，因此也被成为“胡子语法”或“胡子表达式”。{{}}语法有个好处是当不想替换标签中的所有内容时，可以用它在特定位置显示，比如：

<div>显示的信息是：{{mes}}</div>

以下代码的功能是在页面div中显示“Hello”。

<div id = container>
    <div v-html="mes"></div>
</div>
<script>
    new Vue({
        el:"#container",
        data:{
            mes: '<h1>Hello</h1>'
        }
    })
</script>

new Vue()通过View()函数创建Vue对象，改对象的构造函数可以接受JavaScript对象。JavaScript对象一般包含三个属性：

el是element1的缩写，其值为根元素的id选择器。
data属性定义数据，即和视图进行绑定的数据。
methods属性定义方法，一般是在按钮等人机交互的控件上绑定事件。

……

9.3.2 选择分支（未写出的代码可以查阅官网文档，下同）

v-if指令可以控制内容的显示，当它绑定的值是true时则显示对应的内容，当是false时则不显示。

使用v-else指令可以做出else的效果，

v-else-if指令提供多重选择分支的功能，

9.3.3 循环

v-for是循环指令，其格式为“自定义循环变量in数组”。如果要遍历的数组是names,则定义的循环变量为name。如下:

<div id="container">
    <ul v-for="name in names">
        <li> {{names}} </li>
    </ul>
</div>
<script>
    new Vue({
        el:"#container",
        data:{
            names:['张三', '李四', '王五']
        }
    })
</script>

也可以通过v-for遍历一个对象的属性，

v-for指令还提供让开发者获取属性名（key）和索引的方式。

也可以通过v-for命令进行有限次循环的构建。

9.3.4 CSS处理

v-bind指令可以处理class和style，……

可以绑定多个属性，

9.3.5 事件

v-on:指令可以绑定事件，如v-on:click。

9.3.6 表单

v-model指令可以进行双向表单元素与数据之间的双向绑定，……

9.4 Vue项目实战

9.4.1 Vue环境搭建

这里我没按书上来，我选择Vite：vitejs.cn/

9.4.2-9.4.7项目实战内容涉及一些后端内容，学过再写……

Vue基础 ｜ 青训营