Vue简介和常用指令

最新推荐文章于 2024-07-19 10:30:06 发布

北岭山脚鼠鼠

最新推荐文章于 2024-07-19 10:30:06 发布

阅读量731

点赞数

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_62327332/article/details/130459732

版权

Vue 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

概述：

MVVM思想：视图层数据和数据模型里面的数据发生变化都会影响到另一边的数据，通过ViewModel自动实现。

Vue入门案例

步骤：

上面提到了数据模型和试图层的数据是关联的，此处数据模型里面el的值就是选择了哪一个视图层，el跟CSS里面的选择器差不多，#开头说明还是根据ID进行选择。因此需要有一个id标签与之对应。

视图层那里定义了一个文本输入框，有一个v-model标签绑定了数据区域里面的一个数据，message会在输入框展示出来。

v-开头的都是指令

{{message}} 表示获取数据模型的数据在界面上展示出来。

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model=message>
        {{message}}
    </div>

</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app",//Vue接管的区域
        data: {
            message: "Hello Vue"
        }
    })
</script>

</html>

用到的vue.js文件需要到官网自己下载引入。

Vue的常用指令

v-bind和v-model

此处v-bind服务对象是属性，v-model服务对象是表单元素，使用v-model可以快速获得输入数据。

v-on指令

代码:

下面代码就是按钮绑定了一个事件，事件内容是一个弹窗加上message值自增1，在methods里面访问data里面的数据时需要使用this.xxx访问，在插值表示里面就不用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <a :href="url" target="_blank">超链接</a>
        <input type="text" v-model="url">
        {{message}}
        <input type="button" value="按钮" @click="handle()">
    </div>

</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app",//Vue接管的区域
        data: {
            url: "https://www.taobao.com",
            message: -1
        },
        methods: {
            handle: function () {
                this.message = this.message + 1;
                alert("message加1")
            }
        }
    })
</script>

</html>

v-if和v-show

v-for

效果图:

上面的v-for有两种使用方法,其中一种可以获取元素在数组的下标

在这里，除了上面用到的东西，还增加了一个表格元素和v-for的结合使用。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <div v-for="addr in addrs">
            {{addr}}
        </div>
        <div v-for="(addr,index) in addrs">{{index+1}},{{addr}}</div>
        <table border="1px" cellspacing="0" width="200px">
            <tr>
                <th style="color: red">
                    城市
                </th>
            </tr>
            <tr v-for="addr in addrs">
                <th>{{addr}}</th>
            </tr>
        </table>
    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app",//Vue接管的区域
        data: {
            age: 10,
            addrs: ['北京', '上海', '广州', '深圳', '成都', '杭州']
        }
    })
</script>
<style>
    div {
        width: 100px;
    }
</style>

</html>

常用指令案例

需求:

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <table border="1" cellspacing="0" width="60%">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>成绩</th>
                <th>等级</th>
            </tr>
            <tr align="center" v-for="(user,index) in users">
                <td>{{index+1}}</td>
                <td>{{user.name}}</td>
                <td>{{user.age}}</td>
                <td v-show="user.gender==1">男</td>
                <td v-show="user.gender==2">女</td>
                <td>{{user.score}}</td>
                <td>
                    <span v-if="user.score>=85">优秀</span>
                    <span v-else-if="user.score>=60">及格</span>
                    <span v-else-if="user.score<60" style="color: red">不及格</span>
                </td>
            </tr>
        </table>

    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app",//Vue接管的区域
        data: {
            users: [{
                name: "TOm",
                age: 20,
                gender: 1,
                score: 78
            }, {
                name: "Rose",
                age: 18,
                gender: 2,
                score: 85
            }, {
                name: "Jerry",
                age: 26,
                gender: 1,
                score: 90
            }, {
                name: "Tony",
                age: 30,
                gender: 1,
                score: 52
            }
            ]
        }
    })
</script>
<style>
    td {
        width: 200px;
    }
</style>

</html>