vue初级

周途

已于 2022-11-15 17:18:19 修改

阅读量99

点赞数

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

于 2022-11-05 15:57:11 首次发布

本文链接：https://blog.csdn.net/zhoutao_88/article/details/127704576

版权

vue初级专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.1、导入vue的js库

<script src="assets/vue.min-v2.5.16.js"></script>

1.2、创建js代码段写vue代码

1.3、添加网页内容，并把管理权交给vue

1.4、完整代码

1.5、案例

按要求实现需求：

源代码：

<!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>Document</title>
    <script src="assets/vue.min-v2.5.16.js"></script>
</head>
<body>
    <h1>用户登录</h1>
    <div id="app">
        <b>用户名:<input type="text" v-model="msg"><br/></b>
        <b>密码:<input type="password" v-model="mmsg"><br/></b>
        <button @click="doLogin()">登录</button>
        <hr>
        <b><p>用户名:{{msg}},密码:{{mmsg}}</p></b>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                msg:null,
                mmsg:null
            }

        })
    </script>
    
</body>
</html>

二、事件绑定

我们通过v-on属性绑定事件，比如按钮点击事件可以用v-on:click表示 v-on可以用@来代替，所以按钮点击事件也可以用@click来表示。扩展上一个案例，如果用户输入的用户名是admin，密码是123则提示登录成功，否则弹出对话框提示登录失败，这里我们就需要给按钮绑定点击事件

2.1、绑定事件案例

源代码:

三、循环指令v-for

我们可以在html中使用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>Document</title>
    <script src="assets/vue.min-v2.5.16.js"></script>
</head>
<body>
    <div id="app">
        <table border="1px" cellpadding="10" cellspacing="0">
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
            <tr v-for="u in users">
                <td>{{u.userName}}</td>
                <td>{{u.age}}</td>
                <td>{{u.sex}}</td>
            </tr>
        </table>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                users:[
                    {userName:'张三',age:18,sex:男},
                    {userName:'李四',age:28,sex:女},
                    {userName:'王五',age:38,sex:男},
                ]
            }
        })
    </script>
    
</body>
</html>

结合插值表达式的应用三元运算符实现性别的判断