Vue的学习（一）

最新推荐文章于 2023-08-01 23:19:13 发布

zzwi

最新推荐文章于 2023-08-01 23:19:13 发布

阅读量135

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/zyyyy20/article/details/114598713

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

初识Vue框架

首先，先进入vue官网，在上方菜单栏的学习下拉框中找到教程，跟着指引下载vue.js文件，再自选一个编译软件，我是使用的Visual Studio Code，便可以跟着官方教程或者自己找其他资源正式开始学习vue框架了！

创建一个Vue实例

每个Vue应用都是通过用Vue函数创建一个新的Vue实例开始的

下面将介绍Vue实例的创建以及常用的三个Vue内置api

el— 与css与原生js一样id绑#、class绑.

data— 可存放所有数据，其内存放的数据变动时视图也会即时发生变化，但注意，只有在其内存放的原始数据有该效果，通过DOM添加的并不具备

// 这里的代码需要引入前面下载好的vue.js文件才能运行
var vm = new Vue({
    // 选项	在这里可以放置vue中内置的api
    el:"#app",// 绑定目标
    data:{
        nextText:"",
        one:"111"
    },// 存放所有的数据
    methods:{
        methodName:function(){
            
        }
    }// 存放所有的方法和函数
})

特殊符号：{{}}

可以直接打印绑定的Vue实例中data保存的数据

<body>
    <div id="app">
		{{one}}    
	</div>
</body>

视图显示如下:

Vue中的条件判断

Vue中的v-if,v-else-if,v-else是放在标签中使用的

分别对应着原生js代码的if,else if,else

简单的Vue实例演示（显示日期）

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="/vue课程/vue/vue.js"></script>
    <title>今天周几</title>
</head>
<body>
    <div class="out">
        <h1 v-if="day==1">今天周一</h1>
        <h1 v-else-if="day==2">今天周二</h1>
        <h1 v-else-if="day==3">今天周三</h1>
        <h1 v-else-if="day==4">今天周四</h1>
        <h1 v-else-if="day==5">今天周五</h1>
        <h1 v-else-if="day==6">今天周六</h1>
        <h1 v-else-if="day==0">今天周日</h1>
        <h1 v-else>格式错误</h1>
    </div>

    <script>
        new Vue({
            el:".out",
            data:{
                day:new Date().getDay()   // Date对象的getDay() 方法可返回表示星期的某一天的数字。
            }
        });
        </script>
</body>
</html>

运行结果如下:

今天周一

今天是2021/3/1，确实是周一没错

template标签

标签可以用来包裹内容，标签内若有id或class属性或v-if等都能正常使用，但该标签不会在网页中的元素（Elements）中展示(就是我们在网页中看自己源代码的地方)

值得注意的是，v-show不支持，也不支持v-else

<div id="app">
        <template v-if="choice">
            <h1>姓名：孙悟空</h1>
            <p>年龄：未知</p>
            <b>目标：学本领</b>
        </template>
</div>

<script>
	new Vue({
            el:"#app",
            data:{
                choice:true
            }
        });            
</script>

网页中的显示如下:

<div id="app">
        <h1>姓名：孙悟空</h1>
        <p>年龄：未知</p>
        <b>目标：学本领</b>
</div>

<script>
	new Vue({
            el:"#app",
            data:{
                choice:true
            }
        });            
</script>

v-show

v-show与v-if一样是个根据条件展示元素的指令，用法大致一样

<div id="app">
    <h1 v-show="choice">Hello Vue!</h1>
</div>

<script>
        var example = new Vue({
            el:"#app",
            data:{
                choice:true
            }
        });
</script>

不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。如下:

<h1 v-show="true">
            好好学习
</h1>
<h1 v-show="false">
            天天向上
</h1>

在网页中显示如下:

<h1>
            好好学习
</h1>
<h1 style="display:none;">
            天天向上
</h1>

v-if 与 v-show的区别

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。