Vue的基础认知一---构建环境/v指令的使用

最新推荐文章于 2024-05-08 00:45:20 发布

TimePawnshop.

最新推荐文章于 2024-05-08 00:45:20 发布

阅读量580

点赞数

分类专栏： Vue Vue的学习文章标签： Vue v指令构建vue环境 vue的事件/属性绑定

本文链接：https://blog.csdn.net/MYTLJP/article/details/79326373

版权

Vue 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

Vue的学习

8 篇文章 0 订阅

订阅专栏

大家新年好啊，不对，今天是情人节呢，哈哈哈，祝大家节日快乐，你们是不是都出去约约约了啊，好吧，你们都去玩吧，我在家码代码，汗~讲真，这大过年的实在是不愿意学习啊，可是眼看着好久没写博文了，心里有点过意不去了，赶快看了两眼代码，过来更新一篇，呼呼~那我开始码代码了啊，闪开闪开，哈哈哈~~~
OK，从今天开始我们大家一起来看看Vue的使用，然后就是呢，我们今天就先来稍微认识一下，打个照面，看看这货到底是何方神圣搞得我们程序猿们如此难过……

一、vue.js是什么？

这一点vue官方有给出的解释：Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。Vue 只关注视图层，采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
讲真我也没有搞太明白，但是其实我觉得吧，其实它最大的功能肯定还是精简代码，然后就是给我们省力气的，只不过学习它还是得花费很大的劲，哈哈。

二、基础认知

构建vue操作环境

使用vue.js有很多种方法，我们今天不先去构建vue环境，我们就先用script引入来认识一下vue的基础知识。
就像官方文档说的，vue只关注视图层，那既然这样的话，我们就应该要知道我们需要给vue定义一个操作的空间，需要注意的是这个空间有且仅能有一个哦。好了，说了好多有的没的了，开始上代码说明一下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
</head>
<body>
    <!--以下id名为APP的div就是我们定义的vue唯一的操作空间，记住有且仅有一个哦-->
    <div id="app"></div>
</body>
<script src="../vue.js"></script>
<script>
    //构造vue实例，对上面定义的空间进行操作
    new Vue({
        el:"#app",//绑定操作的DOM节点
    })
</script>
</html>

有了上述操作，我们就为vue的操作搭好了基础，接下来我们就一起来看一些简单的基础操作吧。

vue的基础操作

对DOM节点的渲染

对DOM节点的基础渲染有两种方法，一种是{{}}，一种是v指令的方法。
（1）{{}}渲染

<div id="app">
    <div>
        {{message1}}
        <br/>
        {{message2}}
    </div>
</div>
new Vue({
        el:"#app",
        data:function(){
            return {
                message1:"测试数据",
                message2:"<h1>测试数据</h1>",
            }
        }
    })

这样写，html页面运行出来就会显示测试数据的字样：
这里写图片描述
就这样，我们在vue实例中定义的message就在vue的操作空间中展示了出来。但是细心的小伙伴一定也注意到了，我们写的h1标签肯定目的不是让它直接显示在视图当中的啊，这也不符合常理啊，对不对，好吧，接下来，我们就来说第二种渲染方式，来解读标签要怎么解析完之后再进行展示。
（2）v指令渲染
在以上代码的基础上，我们再加入一个div，来展示h1标签的代码，这里用到的是v-html的指令

<div v-html="message2"></div>

这里写图片描述
Duang，h1标签解析出来了哦。
但是这还不算晚，我们都知道带有html字样的指令肯定是会解析h5标签的，但是我们也都知道有html就会有text呀，所以这里我们也会有一个v-text指令，也是不会解析标签的，效果跟{{}}是一样的：

<div v-text="message2"></div>

这里写图片描述

常用的v指令

好了，既然提到了v指令，我们就索性多说几个常用的v指令好了。
（1）v-if/v-else和v-show条件语句
①v-if/v-else

<div id="app">
    <p v-if="num==1">num等于1</p>
    <p v-if="num==2">num等于2</p>
    <p v-else>num等于其他值</p>
</div>

new vue({
    el:"app",
    data:function(){
        return {
            num:2,
        }
    }
})

以上代码执行完后，显示在页面的就是：num等于2，这是毋庸置疑的。
这里写图片描述
②v-show

<div id="app">
    <p v-show="is_show">v-show指令1</p>
    <p v-show="!is_show">v-show指令2</p>
</div>

new vue({
    el:"app",
    data:function(){
        return {
            is_show:true,
        }
    }
})

同样的，毋庸置疑的，这里视图上展示的将是v-show指令1：
这里写图片描述
这就是条件语句的基础使用，当然了三元运算符等等也同样适用。
③v-if和v-show的不同：
就像我们以上看到的，我们想要的结果这两者都可以实现，那我们为什么要学习这两种呢，这就要从性能的角度来看了。
这里写图片描述
我们在运用的过程中，需要哪个就用哪个就好了。
（3）v-for循环语句
循环我们有对数组的循环和对对象的循环。
①数组循环

<div id="app">
    <!--for-in循环-->
    <!--不带索引-->
    <li v-for="v in arr">姓名是：{{v.name}},年龄是：{{v.age}}</li>
    <!--带索引-->
    <li v-for="(v,k) in arr">姓名是：{{v.name}}，年龄是：{{v.age}}，索引是：{{k}}</li>
</div>

new Vue({
    el:"#app",
    data:function(){
        return {
            arr:[{name:"张三",age:19},{name:"李四",age:20},{name:"王五",age:21}],
        }
    }
})

这里写图片描述
数组的循环除了有for-in还有for-of的循环：

<li v-for="(v,k) of arr">姓名是：{{v.name}}，年龄是：{{v.age}}</li>

这里写图片描述
②对象的循环

<div id="app">
    <!--for-in循环-->
    <!--不带索引-->
    <li v-for="(v,k) in obj">键名是：{{k}}，键值是：{{v}}</li>
    <!--带索引-->
    <li v-for="(v,k,index) in obj">键名是：{{k}}，键值是：{{v}}，索引是：{{index}}</li>
</div>

new Vue({
    el:"#app",
    data:function(){
        return {
            obj:{name:"哈哈",age:18,height:"178cm"},
        }
    }
})

这里写图片描述
（4）v-on事件绑定
同样的，类似js的，vue也会有事件，那事件的绑定就是通过v-on来实现的，可简写为@。
如下例，两个div，一个红色一个蓝色，点击切换展示状态。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        .div1{
            width: 100px;
            height: 100px;
            background-color: red;
            display: inline-block;
        }
        .div2{
            width: 100px;
            height: 100px;
            background-color: blue;
            display: inline-block;
        }
    </style>
</head>
<body>
<div id="app">
    <button @click="change">点击切换div</button>
    <div class="div1" v-show="show"></div>
    <div class="div2" v-show="!show"></div>
</div>
</body>
<script src="../vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data:function(){
          return {
              show:true,
          }
        },
        methods:{
            change:function(){
                this.show = !this.show;
            }
        }
    })
</script>
</html>

效果图在此我就不展示了，想要看效果的小伙伴，可以自行粘贴代码去试一下，见谅哦。
然后需要注意的就是事件的绑定有几个修饰符。

prevent：用于阻止默认事件
stop：阻止冒泡
once：事件只触发一次

用法：@click.prevent="事件函数名"

（5）v-bind属性绑定
有事件的绑定，相应的就会有属性的绑定，例如class的绑定呀等等。
v-bind可简写为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        .active1{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .active2{
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div id="app">
    <!--点击按钮，就会切换div的颜色-->
     <button @click="judge=!judge">点击切换</button>
    <div :class="show?'active1':'active2'"></div>
</div>
</body>
<script src="../vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data:function(){
          return {
              show:true,
          }
        },
    })
</script>
</html>

除了加类名以外，也可以通过v-bind添加样式属性，又叫动态属性。

<div :style="{width:'100px',height:'100px',background:'yellow'}"></div>

OK，这篇的基础认知就说到这里，一会我们继续来说其他的基础知识。

TimePawnshop.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue的基础认知一---构建环境/v指令的使用

大家新年好啊，不对，今天是情人节呢，哈哈哈，祝大家节日快乐，你们是不是都出去约约约了啊，好吧，你们都去玩吧，我在家码代码，汗~讲真，这大过年的实在是不愿意学习啊，可是眼看着好久没写博文了，心里有点过意不去了，赶快看了两眼代码，过来更新一篇，呼呼~那我开始码代码了啊，闪开闪开，哈哈哈~~~ OK，从今天开始我们大家一起来看看Vue的使用，然后就是呢，我们今天就先来稍微认识一下，打个照面，看看这货到...
复制链接

扫一扫

专栏目录