Vue基本操作（第一个Vue程序、常用指令、双向数据绑定、v-for）

最新推荐文章于 2021-12-09 16:22:52 发布

Marvellous丶

最新推荐文章于 2021-12-09 16:22:52 发布

阅读量199

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/baolingye/article/details/98800017

版权

前端专栏收录该内容

12 篇文章 5 订阅

订阅专栏

一、引入Vue

将下载好的Vuei相关的文件粘贴到项目的lib目录即可直接使用如下：
在这里插入图片描述
然后我们还需要在IDEA中下载Vue插件，重启IDEA即可使用

二、第一个Vue程序

在写第一个Vue程序前，我们首先要了解几个概念

插值表达式

格式：{{要插入的值}}，这里的值只相当于一个占位符，也可理解为数据的引用（名字）,通过这个引用，Vue可以找到对应的值

v-cloak指令

它可以直接当作HTML的一个属性来使用，即直接在标签内使用，例如<p v-cloak>{{msg1}}</p>,该指令用于解决网速较慢时Vue初始化未完成，插值表达式不能被解析，会直接显示出来，加载完毕之后又会被替换成真实结果，造成闪烁的问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--在css中选择样式-->
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>

<div id="app">
    <p v-cloak="">{{msg}}</p>
</div>

<script src="../lib/vue.js" type="text/javascript"></script>

<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            msg:"hello Vue"
        }
    });

</script>
</body>
</html>

运行结果：
在这里插入图片描述

三、其他常用指令

v-text指令

该指令和插值表达式一样，用于给HTML元素添加文本，但v-text不会存在闪烁问题，其会将Model中的数据完全替换到HTML元素中（覆盖），而插值表达式只会将Model中的数据替换到插值表达式中（占位符内容的替换），相同点是插值表达式和v-text都不会解析要添加文本中的HTML标签（原样显示),具体使用如下，使用该指令不再需要css设置样式
```
<div id="app">
    <p v-text="msg"></p>
</div>
```
v-html指令

该指令也可用于给HTML元素添加文本，和v-text的唯一区别：给HTML添加内容时会解析内容中的HTML
v-bind指令

在HTML元素的属性目前加上绑定标识，此时HTML的该属性的值就会根据属性值的名字从Model中获取数据

v-on指令

在HTML的事件属性（不带on）前加上绑定标识，此时HTML触发此事件时，会执行事件中绑定的代码,v-on指令可以用@事件=代替

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>v-bind、v-on指令的学习</title>
    <script src="../lib/vue.js" type="text/javascript"></script>
</head>
<body>
    <h1>v-bind、v-on指令的学习</h1>
    <div id="app">
        <label>用户名：<input type="text" name="username" v-bind:value="msg" /></label>
        <hr/>
        <!--这是上面这种写法的简写-->
        <label>用户名：<input type="text" name="username" :value="msg" /></label>
        <hr/>
        <label>用户名：<input type="text" name="username" :value="msg+'你好'"></label>
        <hr/>
        <label>用户名：<input type="text" name="username" :value="msg+name"></label>
        <button v-on:click="sayHello(name)">点击下显示你好</button>
        <button @click="sayHello(name)">点击下显示你好</button>
    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el:"#app",
            data:{
                msg:"我是来自Model中的内容！",
                name:"张三"
            },
            methods:{
                sayHello:function (name) {
                    alert("你好！"+name);
                }
            }
        });
    </script>
</body>
</html>

运行结果：

在这里插入图片描述

四、双向数据绑定

v-model而可以实现数据和视图层双向绑定

使用双向相互据绑定实现一个建议计算器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    num1: <input type="text" v-model="num1">
    <select v-model="opr">
        <option value="+" selected disabled>+</option>
        <option value="-">-</option>
        <option value="-">*</option>
        <option value="-">/</option>
    </select>
    num2: <input type="text" v-model="num2">
    <button @click="calc()">=</button>
    <span v-text="result"></span>

</div>


<script src="../lib/vue.js" type="text/javascript"></script>

<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            num1:0,
            num2:0,
            result:0,
            opr:'+'
        },
        methods:{
            calc(){
                var flag = this.opr;
                switch (flag) {
                    case '+':
                        this.result = parseInt(this.num1) + parseInt(this.num2);
                        break;
                    case '-':
                        this.result = parseInt(this.num1) - parseInt(this.num2);
                        break;
                    case '*':
                        this.result = parseInt(this.num1) * parseInt(this.num2);
                        break;
                    case '/':
                        this.result = parseInt(this.num1) / parseInt(this.num2);
                        break;
                }
            }
        }
    })
</script>
</body>
</html>

运行结果：
在这里插入图片描述

五、v-for指令

使用v-for实现遍历

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <!--1.使用v-for指令遍历简单数组-->
    <p v-for="name in names">{{name}}</p>
    <hr/>
    <!--这里的index表示元素在数组中的索引，从0开始-->
    <p v-for="name,index in names" v-text="name+'---'+index"></p>
    <hr/>

    <!--2.使用v-for指令遍历对象数组-->
    <p v-for="user in users">id:{{user.id}}---name:{{user.name}}---age:{{user.age}}</p>
    <hr/>

    <!--3.使用v-for指令遍历对象属性值-->
    <p v-for="value,key in city">{{key+'---'+value}}</p>

    <!--4.使用v-for指令遍历数字（作用就是标准的for循环次数遍历）-->
    <p v-for="index,num in 5" v-text="index+'---'+num"></p>
</div>

<script src="../lib/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            names:["张三","李四","王五","赵六"],
            users:[
                {id:1,name:"张三",age:13},
                {id:2,name:"李四",age:18},
                {id:3,name:"王五",age:29}
            ],
            city:{
                province:"陕西省",
                level:"西安市",
                area:["雁塔区","长安区","未央区","莲湖区"]
            }
        }
    });
</script>

</body>
</html>

测试结果：
在这里插入图片描述

v-for指令实现数据绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <!--v-for指令实现数据绑定-->
    <label>id:<input type="text" v-model="id"/></label>
    <label>name：<input type="text" v-model="name"/></label>
    <label>age：<input type="text" v-model="age"/></label>
    <label><button @click="add()">添加人员信息</button></label>
    <p v-for="user in users" :key="user.id">
        <label><input type="checkbox"/>{{user.id}}---{{user.name}}---{{user.age}}</label>
    </p>
</div>

<script src="../lib/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            users:[
                {id:1,name:"张三",age:13},
                {id:2,name:"李四",age:18},
                {id:3,name:"王五",age:29}
            ],
            id:'',
            name:'',
            age:''
        },
        methods:{
            add(){
                this.users.unshift({id:this.id,name:this.name,age:this.age})
            }
        }
    });

</script>

</body>
</html>

测试结果：
在这里插入图片描述

Marvellous丶

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue基本操作（第一个Vue程序、常用指令、双向数据绑定、v-for）

一、引入Vue将下载好的Vuei相关的文件粘贴到项目的lib目录即可直接使用如下：然后我们还需要在IDEA中下载Vue插件，重启IDEA即可使用二、第一个Vue程序在写第一个Vue程序前，我们首先要了解几个概念插值表达式格式：{{要插入的值}}，这里的值只相当于一个占位符，也可理解为数据的引用（名字）,通过这个引用，Vue可以找到对应的值v-cloak指令它可以直接当作...
复制链接

扫一扫