Vue 的基本使用及系统指令

最新推荐文章于 2024-05-07 08:31:46 发布

guotianxiu1234

最新推荐文章于 2024-05-07 08:31:46 发布

阅读量220

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/guotianxiu1234/article/details/97366864

版权

VUE 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

学习目标

1、掌握Vue的基本使用

2、掌握常用的系统指令

3、掌握使用指令系统完成用户信息展示案例

课程重点内容

1、Vue的基本使用

2、Vue系统指令

3、使用指令系统完成用户信息展示案例
一、Vue简介

[外链图片转存失败(img-pafsRLDS-1564101818292)(\img\为什么学习vue.png)]

二、Vue初体验

**<!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>Document</title>
    <!-- 引入vue文件 -->
    <script src="./vue.js"></script>
</head>

<body>
    <!-- 如果超出了vue的管辖范围，{{}}会失效 -->
    <div>{{msg}}</div>
    <div id="app">
        <!-- 通过插值表达式{{}},来渲染数据 -->
        {{msg}}
    </div>
    <script>
        // 创建vue的实例，监管对应的html代码
        var vm = new new Vue({
            // 通过el属性来指定vue对象监管的范围，后面跟一个Id
            el: '#app',
            // data表示要展示的数据，后面跟一个对象。
            data: {
                msg: 'hello world'
            }
        })
    </script>
</body>

</html>**

三、什么是MVVM

M => Model(数据模型)
V => View(视图模型,负责将数据模型转化成UI展现出来，就是那些DOM结构)
VM => ViewModel(一个同步View和Model的对象)

[外链图片转存失败(img-wii50AGI-1564101844871)(.\img\MVVM.png)]

四、Vue系统指令

1、v-html

在上一个案例中，我们展示了文本的内容，但是，如果想展示一下HTML的效果，就要用到v-html指令。

例如：现在想让’hello world’这块内容加上h1标签，变成标题效果。如果直接在上面的案例中添加h1标签，发现整个内容并没有展示出h1的效果，而是原样的展示出来了。

如果想展示h1的效果，那么可以使用v-html这个指令。代码如下：

<!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>Document</title>

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

<body>

    <div id="app">

        <div v-html="msg"></div>
    </div>
    <script>
        // 创建vue的实例，监管对应的html代码
        var vm = new new Vue({
            // 通过el属性来指定vue对象监管的范围，后面跟一个Id
            el: '#app',
            // data表示要展示的数据，后面跟一个对象。
            data: {
                msg: '<h1>hello world</h1>'
            }
        })
    </script>
</body>

</html>

2、v-for

1、展示数组中数据

如果想展示多条数据应该怎样进行处理呢？可以在data中定义数组，然后通过v-for这个指令来遍历数组，展示出对应的数据。

具体的使用如下：

<!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>Document</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <ul>
            <!-- users表示数组，item表示从数组中取出的对象,这个名字可以随意取 -->
            <!-- 注意 v-for必须结合key属性来使用，它会唯一标识数组中的每一项，未来当数组中的那一项改变的时候，它会只更新那一项，好处就是提升性能。注意key的值唯一，不能重复 -->
            <li v-for="item in users" :key="item.id">
                编号：{{item.id}} 姓名:{{item.name}}
            </li>
        </ul>

    </div>
    <script>
        var vm = new new Vue({
            el: "#app",
            data: {
                users: [{
                    id: 1,
                    name: '张三'
                }, {
                    id: 2,
                    name: '李四'
                }, {
                    id: 3,
                    name: '老王'
                }]

            }
        })
    </script>
</body>

</html>

如果想让数组的索引值也要展示出来，应该怎样进行处理呢？

<div id="app">
        <ul>
            <!-- users表示数组，item表示从数组中取出的对象,这个名字可以随意取 -->
            <!-- 注意 v-for必须结合key属性来使用，它会唯一标识数组中的每一项，未来当数组中的那一项改变的时候，它会只更新那一项，好处就是提升性能。注意key的值唯一，不能重复 -->
            <!-- index表示数组的索引值，该名字可以随意定义 -->
            <li v-for="(item,index) in users" :key="item.id">
                编号：{{item.id}} 姓名:{{item.name}}---索引:{{index}}

            </li>
        </ul>

    </div>

2、展示对象中的数据

对象中属性比较多，也可以通过v-for这个指令来循环对象，展示其属性的值，代码如下：

<!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>Document</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <ul>
            <!-- users表示数组，item表示从数组中取出的对象,这个名字可以随意取 -->
            <!-- 注意 v-for必须结合key属性来使用，它会唯一标识数组中的每一项，未来当数组中的那一项改变的时候，它会只更新那一项，好处就是提升性能。注意key的值唯一，不能重复 -->
            <!-- index表示数组的索引值，该名字可以随意定义 -->
            <li v-for="(item,index) in users" :key="item.id">
                编号：{{item.id}} 姓名:{{item.name}}---索引:{{index}}

            </li>
            <hr/>
            <!-- 展示对象中的数据(也就是值) -->
            <li v-for="stu in student" :key="stu">
                <!-- 表示对象中的值 -->
                {{stu}}
            </li>
            <!-- 展示对象的键和值 -->
            <li v-for="(stu,key) in student" :key="stu">
                {{key}}:{{stu}}
            </li>
            <!-- 展示出对象的键，值以及对应的索引 -->
            <li v-for="(stu,key,index) in student" :key="stu">
                {{key}}----{{stu}}----{{index}}
            </li>
        </ul>

    </div>
    <script>
        var vm = new new Vue({
            el: "#app",
            data: {
                users: [{
                    id: 1,
                    name: '张三'
                }, {
                    id: 2,
                    name: '李四'
                }, {
                    id: 3,
                    name: '老王'
                }],
                // 添加对象
                student: {
                    id: 3,
                    name: '马六',
                    age: 18
                }

            }
        })
    </script>
</body>

</html>

3、v-model

在前面讲解vue简介的时候，我们说过，如果model中的数据发生了改变，会通过ViewModel通知View更新数据，这个效果前面我们也已经演示了，现在演示一下当view中的数据发生了变化后，怎样通过ViewModel来通知model来完成数据的更新。

其实这就是我们常说的，“双向数据绑定”

怎样实现这种效果呢？可以通过v-model来实现。

  <!-- v-model指令用来双向数据绑定：就是model和view中的值进行同步变化 -->
  <!-- v-model只能在input/textarea/selet  也就是表单元素-->

<!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>Document</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="text" v-model="userName">
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                userName: 'zhangsan'
            }
        })
    </script>
</body>

</html>

怎样验证v-model实现了双向数据绑定呢？

可以打开控制台，然后输入：vm.userName 发现输出的值为"zhangsan", 取的是模型中的数据。

当在文本框中输入新的值后，在敲一下vm.userName发现对应的数据发生了变化，也就是视图中的数据发生了变化，模型中的数据也会发生变化。

那么在控制台中直接给vm.userName=“lisi”,发现文本框中的值也发生了变化。

4、v-on

怎样监听dom的事件呢？可以通过v-on指令完成，具体的代码如下：

```html
<!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>Document</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <span>{{name}}</span>
        <!-- 通过v-on来指定对应的事件，然后后面跟上对应的方法名，方法的定义在methods完成 -->
        <button v-on:click="changeName">更换姓名</button>
    </div>
    <script>
        var vm = new new Vue({
            el: '#app',
            data: {
                name: 'zhangsan'
            },
            // 通过methods完成函数或方法的定义
            methods: {
                changeName() {
                    // 在methods中要获取data中的属性，需要通过this来完成，this表示的是vue实例。
                    this.name = "itcast"
                }
            }
        })
    </script>
</body>
</html>

还可以通过简写的形式。建议以后都使用简写的形式

<button @click="changeName">更换姓名</button>

带参数的形式如下：

    <button @click="changeNameByArg('laowang')">带参数的情况</button>


<script>
        var vm = new new Vue({
            el: '#app',
            data: {
                name: 'zhangsan'
            },
            // 通过methods完成函数或方法的定义
            methods: {
                changeName() {
                    // 在methods中要获取data中的属性，需要通过this来完成，this表示的是vue实例。
                    this.name = "itcast"
                },
                changeNameByArg(userName) {
                    this.name = userName
                }
            }
        })
    </script>

5、v-if 与 v-show

### 4、删除用户信息

删除数据的时候，要明确具体删除数组中的哪一项内容，可以通过数组的下标来进行确定。

```html
<body>
    <div id="app">
        <div class="add">
            用户编号:<input type="text"> 用户姓名:
            <input type="text">
            <input type="button" value="添加">
        </div>

        <div class="add">
            用户姓名:<input type="text" placeholder="请输入搜索条件">
        </div>

        <div>
            <table class="tb">
                <tr>
                    <th>编号</th>
                    <th>用户名</th>
                    <th>添加时间</th>
                    <th>操作</th>
                </tr>
                <tr v-for="(item,index) in userList" :key="item.id">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>
                        {{item.addDateTime}}
                    </td>
                    <td>
                        <a href="#" @click='deleteUserData(index)'>删除</a>
                    </td>
                </tr>
                <tr v-if="userList.length===0">
                    <td colspan="4">没有用户数据</td>
                </tr>
                <!-- 动态生成内容tr -->
            </table>
        </div>
    </div>
</body>
<script>
    var vm = new new Vue({
        el: '#app',
        data: {
            userList: [{
                id: 1,
                name: '张三',
                addDateTime: new Date()
            }, {
                id: 2,
                name: '李四',
                addDateTime: new Date()
            }, {
                id: 3,
                name: '王五',
                addDateTime: new Date()
            }, ]
        },
        methods: {
            deleteUserData(i) {
                // 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,
                // 并以数组形式返回被修改的内容。 此方法会改变原数组。
                // 参数1：指定修改的开始位置（从0计数）
                // 参数2：表示要移除的数组元素的个数。
                this.userList.splice(i, 1)
            }
        }
    })
</script>

guotianxiu1234

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue 的基本使用及系统指令

学习目标1、掌握Vue的基本使用2、掌握常用的系统指令3、掌握使用指令系统完成用户信息展示案例课程重点内容1、Vue的基本使用2、Vue系统指令3、使用指令系统完成用户信息展示案例一、Vue简介[外链图片转存失败(img-pafsRLDS-1564101818292)(\img\为什么学习vue.png)]二、Vue初体验**<!DOCTYPE html>&lt...
复制链接

扫一扫