从Django后端(python)角度学习前端VUE框架基础-上(配置环境,绑定属性,条件判断,循环) ∠( °ω°)／前端知识

最新推荐文章于 2024-01-30 20:38:03 发布

寻_觅

最新推荐文章于 2024-01-30 20:38:03 发布

阅读量781

点赞数 2

分类专栏：前端知识文章标签： vue html 前端框架

本文链接：https://blog.csdn.net/qq_39611230/article/details/106580338

版权

前端知识专栏收录该内容

8 篇文章 7 订阅

订阅专栏

文章目录

VUE简介
引入VUE
开发环境
基本使用

VUE简介

如何你学习过Django的一些知识,这时候想学习一个前端的一些知识,我会推荐你学习vue,因为你在学习会发现vue在模板方面有一些和Django相似的地方,更容易上手VUE的一些语法,而且vue作者尤雨溪为一个中国人,所以他的的中文社区和文档都非常完善。
VUE官网, VUE网上的介绍很多,看此博客之前,最少有HTML和css的相关知识,和对js有一定了解,你要是对Python开发也有一定经验那更好,下面我会经常使用Python和Django和Vue做一些比较。

引入VUE

当前我们开始学习一些基础的Vue时只需要使用cdn进行引入即可,便捷高效
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
https://cdn.jsdelivr.net/npm/vue 中存放的是vue当前最新的版本,(如果是因为是学习阶段,推荐大家可以使用最新的版本)
但是CDN引入必须要在在线环境下才能正常运行,如果你需要一个可以离线运行的文件,可以去将上述连接中的js代码下载后引入(直接另存为即可)
在这里插入图片描述
当前开始学习,我们就不花费过多时间放在配置上,之后我会单独写一篇讲解单文件组件的Vue-CLI(创建单文件的Vue脚手架)环境配置文章和基本使用。

开发环境

我当前使用的是vscode进行前端开发,前端开发对环境要求并不高,你可以根据你的喜好选择开发工具,如果你想的话甚至可以使用记事本(￣ェ￣;),如果你和我一样使用的vscode,我推荐你下载一个插件vue-helper,这个插件可以补全一下vue常用的代码,下面学习vue的时候,我也会适当的教大家一些常用的简写命令。
在这里插入图片描述

基本使用

绑定元素( `{{}}` )

使用Vue,首先需要创建一个Vue对象,并在这个对象中传递el(element:元素)属性,用来找到一个给Vue渲染的根元素,并且我们可以传递一个data属性,data有点类似与Python类中的__init__,用于存放一些变量,data中的所有值都可以直接在根元素下使用{{}}来渲染使用! Vue的元素渲染和Django比较相似,都是采用的双大括号进行包裹,不同的是Vue渲染的元素只能在el绑定的根元素下使用,如果在el外使用则是无效的。

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Vue测试1</title>
</head>
<body>
    <!-- <div id="dome"></div> 简写-> div#dome -->
    <div id="dome">
        <p>{{name}}</p>
    </div>
    <p>{{name}}</p>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    // new Vue({}) 简写-> vnew
    new Vue({
        el: "#dome",
        data:{
            name: "这是一个测试项目"
        }  
    })
</script>
</html>

在这里插入图片描述

创建函数使用属性

创建函数需要用到methods属性, Vue中函数的格式为函数名:function(参数){}其中我们函数的内容是放入大括号中的,可以对比一下Python中的函数def 函数名(参数): 还是有较大区别的。在Python中的类里,如果我们想要引入一个属性,只需加上self.属性名即可,在vue中我们把self替换为this即可,比如this.name。

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Vue测试1</title>
</head>
<body>
    <!-- <div id="dome"></div> 简写-> div#dome -->
    <div id="dome">
        <p>{{fundemo()}}</p>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    // new Vue({}) 简写-> vnew
    new Vue({
        el: "#dome",
        data:{
            name: "这是一个测试项目"
        },
        methods: {
        	//fundemo:function()可以简写为fundemo()
            fundemo:function(){
                return this.name + "的一个函数"
            }
        }
    })
</script>
</html>

在这里插入图片描述

保持持久性

上面我们提到可以使用{{}}双层大括号直接将vue属性中的数据或者函数可以渲染到绑定的元素中,并且只要Vue对象中的数据发生变化,那么在绑定元素中渲染的值也立马会改变。

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Vue测试1</title>
</head>
<body>
    <!-- <div id="dome"></div> 简写-> div#dome -->
    <div id="dome">
        <p>{{name}}</p>
        <button v-on:click="change">按钮</button>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    // new Vue({}) 简写-> vnew
    new Vue({
        el: "#dome",
        data:{
            name: "这是一个测试项目"
        },
        methods: {
            change:function(){
                this.name = "这个测试项目被修改了"
            }
        }
    })
</script>
</html>

在这里插入图片描述
如果我们需要保证及时Vue中的数据发生改变,页面也不会被重新渲染,可以用到v-once属性(添加到需要保存不变的元素标签中即可),比如上方如果我需要p标签中的元素不发生改变,只需要把p标签改为<p v-once>{{name}}</p>即可。

显示原生HTML

如果我们vue中存储的是一个HTML标签,我们直接使用双层大括号渲染会发现,HTML标签并没有执行,而是被当成字符串渲染出来了,如果我们想要将其当成HTML标签执行,就需要借助v-html属性,在需要渲染的地方添加一个标签中使用v-html绑定需要渲染的属性即可,如下所示

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Vue测试1</title>
</head>
<body>
    <!-- <div id="dome"></div> 简写-> div#dome -->
    <div id="dome">
        <p>{{vdata}}</p>
        <p v-html='vdata'></p>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    // new Vue({}) 简写-> vnew
    new Vue({
        el: "#dome",
        data:{
            vdata: '<a href="https://www.baidu.com/">我是一个连接</a>', 
        }
    })
</script>
</html>

在这里插入图片描述

属性绑定(`v-bind:`或`:`)

这里我们使用class和style做演示进行绑定。

单值绑定

上述我们在渲染模板时都是在标签中进行渲染,而如果我们想将数据渲染进入标签内使用双大括号则无法识别{{}},需要在属性前加入v-bind: 或者简写为:

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <style>
        .color{
            color: burlywood;
        }
    </style>
    <title>Vue测试1</title>
</head>
<body>
    <!-- <div id="dome"></div> 简写-> div#dome -->
    <div id="dome">
        <!-- 使用大括号"{{vclass}}"无法渲染属性 -->
        <p class="{{vclass}}">{{vdata}}</p>
        <!-- 使用v-bind:进行绑定后,即可渲染无需添加大括号 -->
        <p v-bind:class="vclass">{{vdata}}</p>
        <!-- : 是 v-bind: 的简写 -->
        <p :class="vclass">{{vdata}}</p>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    // new Vue({}) 简写-> vnew
    new Vue({
        el: "#dome",
        data:{
            vdata: "我修改了字体颜色",
            vclass: "color"
        }
    })
</script>
</html>

在这里插入图片描述
除了单值绑定外,还有多值绑定等方法,如果想要详细了解v-bind以及v-modle和v-on请看我的另一篇博客中有详解 ,点击查看-> Vue中v-bind,v-modle,v-on都是干什么的

使用JavaScript表达式

使用vue模板的进行渲染的元素中我们可以直接使用JavaScript表达式,如下,我就在模板中直接使用了几个js的表达式

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Vue测试1</title>
</head>
<body>
    <div id="dome">
        <!-- p标签的style属性中,我使用了一个JS的三元表达式, vcolor?'red':'blue' 其中规则是,当vcolor值为真则执行:号前的内容,假这是后面的 -->
        <!-- 在元素中,我使用了JS的三个方法将字符串进行了反转(这三个方法Python中也有,且功能一致), split(" ")表示根据字符串中的空格拆分成列表,  .reverse()将列表反转, .join(" ")将列表根据合成使用空格隔开-->
        <p :style="{color:vcolor?'red':'blue'}">{{vdata.split(" ").reverse().join(" ")}}</p>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    new Vue({
        el: "#dome",
        data:{
            vdata: '索尼 大法好', 
            vcolor: 'true'
        }
    })
</script>
</html>

条件判断

v-if

vue有些比较好用的属性,条件判断就是其中之一,他的功能顾名思义,用if,else来做判断此标签是否执行,但是他的写法和python中的if语句写法不太一样,if在Vue中是v-if, elif是v-else-if,而else是v-else

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Vue测试1</title>
</head>

<body>
    <div id="vclass">
        <p :style="{color:vcolor}" v-if = '"vcolor"=="black"'>我是黑色字体</p>
        <p :style="{color:vcolor}" v-if-else = '"vcolor"=="red"'>我是红色字体</p>
        <p v-else>当前显示的不知道是什么花里胡哨的颜色</p>
    </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<script>
    new Vue({
        el: "#vclass",
        data: {
            vcolor : "red"
        }
    })
</script>

</html>

在这里插入图片描述

加载多个元素

有时候我们可能会想在一个条件中加载多个HTML元素,那么我们可以通过template元素实现,如下。

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Vue测试1</title>
</head>

<body>
    <div id="vclass">
        <template v-if="level < 18">
            <p>你当前的等级是{{level}}</p>
            <p>你现在还是个连史莱姆都干不掉的家伙</p>
        </template>
        <template v-else-if="level == 18">
            <p>你当前的等级是{{level}}</p>
            <p>你可以转职去去干史莱姆了</p>
        </template>
        <!-- 注意,这里不能直接用18 < level < 85 或者像python中使用and也不行,只能是&&表示与和||表示或 -->
        <template v-else-if="18 < level && level < 85">
            <p>你当前的等级是{{level}}</p>
            <p>你为啥都{{level}}级了还在干史莱姆!!!</p>
        </template>
        <template v-else>
            <p>你当前的等级是{{level}}???</p>
            <p>你这个等级"{{level}}"有点东西啊。</p>
        </template>
    </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<script>
    new Vue({
        el: "#vclass",
        data: {
            level : "80"
        }
    })
</script>

</html>

注:

使用template只是一种规范,并非强制性,你也可以使用其他标签比如div将其包含,可以达到相同效果
上述注释出我也提过,vue中的范围不支持连写,需要使用&&或者||做判断!!

更新状态

在模板中,Vue会尽量重用已有的元素,而不是重新渲染(页面中如果已经有你条件中的标签,这时候如果需要跟进判断更新局部更新,已有的标签并不会重新渲染),这样的好处树可以变得更加高效,但也会凸显出一些问题。比如用户在切换登陆方式时,输入框中的内容不会被自动清除!比如下列代码中,我们切换邮箱和手机号输入,输入框中的内容会残留。

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>dome2</title>
</head>

<body>
    <div id="vdome">
        <template v-if="login == 'email'">
            <label for="email">邮箱:</label>
            <input type="text" name="email" id="email" placeholder="邮箱">
        </template>
        <template v-else-if="login == 'phone'">
            <label for="phone">电话:</label>
            <input type="text" name="phone" id="phone" placeholder="电话">
        </template>
        <!-- 这里v-on是事件绑定,后面会详细讲解,这里为了体现出Vue的一个效果 -->
        <button v-on:click="cutLongin">切换登陆方式</button>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    new Vue({
        el:'#vdome',
        data:{
            login : 'email',
        },
        methods:{
            cutLongin:function(){
                this.login = this.login=='email'?'phone':'email';
            }
        }

    })
</script>
</html>

在这里插入图片描述
解决这个问题其实也很简单,用key绑定即可解决,我们在想要他重新渲染的标签内绑定一个key值即可解决,比如我们当前想要重新渲染输入框,即可在input中加入key属性

    <div id="vdome">
        <template v-if="login == 'email'">
            <label for="email">邮箱:</label>
            <!-- 这里加入了key="emali" -->
            <input type="text" name="email" id="email" key="emali" placeholder="邮箱">
        </template>
        <template v-else-if="login == 'phone'">
            <label for="phone">电话:</label>
            <!-- 这里加入了key="phone" -->
            <input type="text" name="phone" id="phone" key="phone" placeholder="电话">
        </template>
        <!-- 这里v-on是事件绑定,后面会详细讲解,这里为了体现出Vue的一个效果 -->
        <button v-on:click="cutLongin">切换登陆方式</button>
    </div>

在这里插入图片描述

v-show

除了v-if能进行判断外,v-show也能进行判断
v-if和v-show的区别

v-if是惰性的,v-if在值为真的时候才开始渲染,假的时候并不会进行渲染,而v-show会在页面加载的时候就进行渲染,如果有值为假的元素,会将其在标签中使用style="display: none;"元素进行隐藏
根据上述可以推出,v-if有着更大的切换开销(适合在一些切换频率较低的地方), 而v-show有着更大的初始渲染开销(适合在一些切换频率较高的地方)。

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>dome3</title>
</head>

<body>
    <div id="vdome">

        <p v-show='6>5'>我是人类懂王</p>
        <p v-show='5>6'>没有人比我更懂show</p>
        <p v-show='!know'>人类登日第一人</p>
        <div v-show='know'>
            <p>🙌没有人</p>
            <p>👐比我</p>
            <p>👌更懂</p>
            <p>☝show</p>
        </div>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    new Vue({
        el:'#vdome',
        data:{
            know : true
        }
    })
</script>
</html>

在这里插入图片描述

注意，v-show 不支持元素，也不支持 v-else。

循环

在模板中,我们可以使用v-for进行循环,vue中的也可以依靠循环遍历可迭代对象。vue中的v-for和Python中的for循环是有一定相似的,特别都是在遍历字典或者列表数组时很方便。vue循环还一个很好用的功能是可以在循环的时候直接获取索引值(当前循环的次数),只需要多给一个变量接收索引即可。不过索引值从0开始计算,如果需要从1开始计算,可以在引入的时候+1即可。

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>dome4</title>
</head>

<body>
    <div id="vdome">
        <h1>'{{name}}'的称号:</h1>
        <div>
            <!-- 接收多个值时,一定要记得加括号!(i,index)  index接收的是索引!需要注意的是这里接收变量的名字叫什么都可以,主要是索引值一定在最后一个变量!!! -->
            <span v-for="(i,index) in vfor_list">
                {{index}}. {{i}}
            </span>
        </div>
        <h2>for循环还能循环字典</h2>
        <div>
            <p v-for="(key,value,index) in vfor_dict">
            	<!-- 索引从0开始计算,如果需要从1开始,手动加1即可 -->
                {{index+1}}. {{key}}的称号是:{{value}}
            </p>
        </div>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    new Vue({
        el : '#vdome',
        data : {
            vfor_list: ['美国药水哥', '推特罗永浩', '油管老八', '纽约王境泽', '人类登日第一人', '人类登日返地第一人', '人类登日返地又登日第一人', '人类登日返地又登日,又返地第一人', '太阳之子', '宇宙学大师', '病毒学天王', '辩论鬼才', '美利坚救星', '间谍之王（主）', '朋克商人', '因果律派大星', '经济学海绵宝宝', '千层饼特级厨师'],
            name: '川  人类之光  普老师',
            vfor_dict: {
                人类懂王 : '川建国',
                祖传百万 : '孙宇晨',
                这饭真香 : '王境泽',
                直播带货 : '罗老师'
            }
        }
    })
</script>
</html>

在这里插入图片描述

保持状态

假设我们有多个元素遍历出来需要渲染,每个渲染的元素都会跟随一个输入框,这里就会造成和上述v-if类似的情况,输入框不会跟着改变!效果如下:

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>dome5</title>
</head>

<body>
    <div id="app">
        <div v-for="i in language">
            <input type="text" v-bind:placeholder="i">
        </div>
         <button v-on:click="change_language">更换图书</button>
    </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            language: ['python','vue','Django','html']
        },
        methods: {
            change_language: function(){
                // 下列函数用于随机排序(sort进行排序, parseInt装换为整数, Math.random()生成随机数)
                this.language.sort((x,y) => {
                    return 5 - parseInt(Math.random()*10)
            });
        }}
    });
</script>
</html>

在这里插入图片描述
如果我们想要输入框能跟随元素一起变动,这时候还是需要用到key绑定,但是这里的key,不过这里的key一定要和v-for放在同一个标签中才行,并且因为这里我们想要输入框跟随着元素一起启动,所以我们需要key和元素绑定上,所以就需要v-bind:,例如:<div v-for="i in language" v-bind:key="i">
在这里插入图片描述

寻_觅

关注

2
点赞
踩
12

收藏

觉得还不错? 一键收藏
打赏
0
评论
从Django后端(python)角度学习前端VUE框架基础-上(配置环境,绑定属性,条件判断,循环) ∠( °ω°)／前端知识

文章目录简介VUE简介作为一名使用Python的开发,想学习一下前端vue框架,本博客主要已Python的角度去和vue的一些功能进行对比,让学过Python的开发人员更容易上手vue框架!VUEVUE官网, VUE网上的介绍很多,这里就不在就不做过多介绍了,我们直入主题...
复制链接

扫一扫