查看vue3项目对应的python版本

转载

智能开发先锋 2024-11-29 14:48:33

文章标签 查看vue3项目对应的python版本 vue.js vue html Vue 文章分类 Python 后端开发

VUE指令

回顾

HTML：

html+html5 语义化标签（header,footer）

css+css3

动画：过渡（transition），动画(animate), flex布局 , less

Java Script：

数据类型

变量

运算

数学运算

比较运算

逻辑运算

流程控制

switch

for

while

do while

函数

DOM （document object model）

BOM （browser object model）

nodejs

node基础

fs模块

path路径处理模块

http模块

express框架

ejs模板引擎

mysql数据库

框架：

VUE(3)

vue-router: 路由模块
element-ui: 基于vue框架的一个PC端的组件库
iview: 基于vue框架的一个PC端的组件库
vant: 基于vue框架的一个移动端的组件库
axios: 基于ES6中promise封装的一个http类库
vuex: 基于vue的一个状态管理工具
小优商城移动端
小优商城后端管理系统(PC端)

React(2)

react-router-dom: 路由模块
ant-design: 基于react框架的PC端组件库
redux: react的状态管理工具
社区团购项目

Vue框架介绍

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

渐进式，自底向上逐层应用，

视图层（M(model)V(view)C(controler)）

MVVM(视图模型)

VM 视图模型层, 连接数据层和视图的一个中间纽带, 可以将视图层的更新同步到数据层, 也可以将数据层的更新同步到视图层

双向绑定，数据劫持

查看vue3项目对应的python版本_vue.js

单页

单页面应用

var string = "<a =href='+"baidu.com"+'>"

vue的缺点

1、首屏加载过慢

因为vue页面的渲染是在客户端浏览器上完成的

2、vue不兼容IE8以下的低版本浏览器

vue底层使用到了一个API, 但是IE8以下的浏览器不支持该API

3、不利于SEO(搜索引擎优化), 搜索引擎几乎不会抓取vue的网页

vue开发的项目是单页面应用(SPA: single page application), 索引搜索引擎第一时间抓取到的网页是一个没有实质内容的网页, 所以搜索引擎会放弃抓取

开始VUE

官网介绍 — Vue.js

https://cn.vuejs.org/v2/guide/index.html#%E8%B5%B7%E6%AD%A5

<!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="./vue.js"></script>
</head>
<body>
    <!-- vue 的基本结构需要有一个可以标识的外部容器，只有在这个容器的范围内，vue数据可以被渲染 -->
    <div id="app">
         {{ messages }}<br />  <!-- 这里使用双大括号来调用数据,调用的数据来源于vue对象的data属性 -->
        {{ hhh }}
    </div>
    <script>
        var vue = new Vue({
            el: "#app", // 申明vue起作用的范围
            data: {
                messages: "hello world",
                hhh: "嘿嘿嘿"
            } //可以被使用的变量
        })
    </script>
</body>
</html>

vue基本语法

插值表达式

<!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="./vue.js"></script>
</head>
<body>
    <div id="app">
         <p>{{ messages }}</p>
         <p>{{ project }}</p>
         <p>{{ person }}</p>
         <p>{{ messages.toUpperCase() }}</p>   <!-- 在插值表达式当中，可以调用对象的方法 -->
         <p>{{ messages[1] }}</p>
         <p>{{ project[1] }}</p>     <!-- 在插值表达式当中，可以调用索引 -->
         <p>{{ person.name }}</p>    <!-- 在插值表达式当中，可以使用对象的键调用对象的值 -->
         <p>{{ person.age > 18?"成年人":"未成年" }}</p> <!-- 在插值表达式当中，可以使用三目表达式 -->
         <p>{{ person.age > 18 }}</p> 
    </div>
    <script>
        var vue = new Vue({
            el: "#app", 
            data: {
                messages: "hello world",
                project: ["HTML","Java","PHP"],
                person: {
                    name: "张三",
                    age: 19
                }
            } 
        })
    </script>
</body>
</html>

VUE指令

插值表达式可以完美的将js当中的数据渲染到标签的内容部分，但是对标签的属性没有办法，实际工作当中，有很多需求需要我们修改html标签的属性，所以vue提出指令概念。指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute。可能你已经猜到了，它们会在渲染的 DOM 上应用特殊的响应式行为。

指令的使用方式是共性的

直接在标签的内部使用

<body>
    <div id="app">
        <p v-text="attr.toUpperCase()"></p>
    </div>

    <script>
        var vue = new Vue({
            el: "#app", 
            data: {
               attr: "sty"
            } 
        })
    </script>
</body>

v-text

将文本内容绑定到html的内容部分，类似插值表达式，但是和v-html有区分，这里对内容进行了转义。具备一定的反前端注入能力。类似js innerText

<body>
    <div id="app">
        <p v-text="attr"></p>
    </div>

    <script>
        var vue = new Vue({
            el: "#app", 
            data: {
               attr: "<h1>hello world</h1>"
            } 
        })
    </script>
</body>

v-html

将文本内容绑定到html的内容部分，类似插值表达式，但是和v-html有区分，这里对内容进行了转义。类似js innerHTML

<body>
    <div id="app">
        <p v-html="attr"></p>
    </div>

    <script>
        var vue = new Vue({
            el: "#app", 
            data: {
               attr: "<h1>hello world</h1>"
            } 
        })
    </script>
</body>

v-model

双向绑定，通常用于表单数据绑定。

<body>
    <div id="app">
        <input v-model="message">  <!-- 发生修改 VM  -->
        <p>{{ message }}</p><!-- M -> V  -->
    </div>

    <script>
        var vue = new Vue({
            el: "#app", 
            data: {
               message: "hello world 1"
            } 
        })
    </script>
</body>

v-once

绑定数据之后，只渲染一次，之后只有页面从新刷新再次渲染。

<body>
    <div id="app">
        <div v-once>{{ message }}</div>
        <input v-model="message"> 
    </div>
    
    <script>
        var vue = new Vue({
            el: "#app", 
            data: {
               message: "<h1>hello world 1</h1>"
            } 
        })
    </script>
</body>

v-bind

动态绑定属性

<div id="app">
    <!-- <h1 v-bind:class="attr" v-bind:id="attr">hello world</h1> 多个属性绑定 -->
    <!-- <h1 :class="attr" :id="attr">hello world</h1> 绑定的简写 -->
    <!-- <h1 :class="age>18?'pink':'red'">hello world</h1> 
    可以使用三目表达式和字符串，但是字符串需要加引号，注意引号的嵌套 -->
</div>

<script>
    var vue = new Vue({
        el: "#app", 
        data: {
            age: 19,
            r: "red",
            p: "pink"
        } 
    })
</script>

v-on

<body>
    <div id="app">
        {{ message }}
        <span v-on:click='say_hello'>按我呀~~~</span>
        <span @click='say_hello'>按我呀~~~</span>
    </div>
    
    <script>
        var vue = new Vue({
            el: "#app", 
            data: {
               message: "hello world",
            },
            methods: {
                // say_hello: function(){
                //    alert("hello world")
                // }
                say_hello(){
                   alert("hello world")
                }
            } 
        })
    </script>
</body>

(1) vue当中要绑定的方法，必须写到vue的methods方法当中

(2) vue采用v-on进行事件绑定，格式

v-on:事件条件='事件函数名称'

(3)v-on可以简写，格式

@事件条件='事件函数名称'

v-if

通过条件判断，来决定是否创建dom对象，注意:创建和销毁dom对象都有很大的资源消耗。

<body>
    <div id="app">
        <h1 v-if="isShow">看不到我吧</h1>
        <h1 v-if="age >= 18">哟，成年了</h1>
    </div>
    
    <script>
        var vue = new Vue({
            el: "#app", 
            data: {
               age: 18,
               isShow: 0,
            }
        })
    </script>
</body>

v-else-if

<!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="./vue.js"></script>
    <style>
        .red{
            color: red;
        }
        .border{
            border: 1px black solid;
        }
        .pink{
            color: pink;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- <h1 v-if="isShow">看不到我吧</h1> -->
        <!-- <h1 v-if="age >= 34">哟，可以挣钱了</h1> -->
        <h1 v-else-if="age >= 22">哟，可以结婚了</h1>
        <h1 v-else-if="age >= 18">哟，成年了</h1>
        <h1 v-else>少年</h1>
        <h1 v-if="age >= 22">哟，可以结婚了</h1>
    </div>
    
    <script>
        var vue = new Vue({
            el: "#app", 
            data: {
               age: 17,
               isShow: 0,
            }
        })
    </script>
</body>
</html>

v-else

<!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="./vue.js"></script>
    <style>
        .red{
            color: red;
        }
        .border{
            border: 1px black solid;
        }
        .pink{
            color: pink;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- <h1 v-if="isShow">看不到我吧</h1> -->
        <!-- <h1 v-if="age >= 34">哟，可以挣钱了</h1> -->
        <h1 v-else-if="age >= 22">哟，可以结婚了</h1>
        <h1 v-else-if="age >= 18">哟，成年了</h1>
        <h1 v-else>少年</h1>
        <h1 v-if="age >= 22">哟，可以结婚了</h1>
    </div>
    
    <script>
        var vue = new Vue({
            el: "#app", 
            data: {
               age: 17,
               isShow: 0,
            }
        })
    </script>
</body>
</html>

(1) v-if后面可以加布尔值也加一个判断的表达式

(2) v-else-if 和 v-else必须配合v-if，在v-if后面出现

(3) 在写判断的时候，要把范围大的写到后面

(4) 请认真的区分一个判断，多个分支和多个判断的区别

v-show

和v-if一样，可以控制元素是否显示，但是不会删除dom元素，而是使用display进行隐藏，所以效率高于v-if

<!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="./vue.js"></script>
    <style>
        .red{
            color: red;
        }
        .border{
            border: 1px black solid;
        }
        .pink{
            color: pink;
        }
    </style>
</head>
<body>
    <div id="app">
        <h1 v-if="isShow">看不到我吧--if版本</h1>
        <h1 v-show="isShow">看不到我吧--show版本</h1>
    </div>
    
    <script>
        var vue = new Vue({
            el: "#app", 
            data: {
               isShow: 0,
            }
        })
    </script>
</body>
</html>

v-for

<body>
    <div id="app">
        <ul>
            <li v-for="item in foods">
                {{ item }}
            </li>
        </ul>
    </div>
    
    <script>
        var vue = new Vue({
            el: "#app", 
            data: {
               foods: [
                   "猪肉炖粉条",
                   "咸菜",
                   "梅菜扣肉",
                   "澳洲龙虾",
                   "佛跳墙",
                   "小当家干脆面",
                   "阳澄湖大闸蟹",
                   "石头炒泥巴"
               ]
            }
        })
    </script>
</body>

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="./vue.js"></script>
    
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="item in foods">
               <img :src="item.picture"/>
               <p>
                   {{ item.name?item.name:"店铺走丢了" }}
                   <img v-for="i in item.level" src="./level.png"> 
               </p>
            </li>
        </ul>
    </div>
    
    <script>
        var vue = new Vue({
            el: "#app", 
            data: {
               foods: [
                   {
                        picture: "http://p0.meituan.net/biztone/1647448_1629513656647.jpeg%40340w_255h_1e_1c_1l%7Cwatermark%3D0",
                        name: "珍滋味海鲜粥火锅(工体店)",
                        level: 5,
                   },
                   {
                        picture: "http://p1.meituan.net/biztone/179215392_1623048677800.jpeg%40340w_255h_1e_1c_1l%7Cwatermark%3D0",
                        name: "高兴火锅(五道口店)",
                        level: 3,
                   },
                   {
                        picture: "https://img.meituan.net/msmerchant/054b5de0ba0b50c18a620cc37482129a45739.jpg%40340w_255h_1e_1c_1l%7Cwatermark%3D0",
                        name: "海底捞火锅(复星国际中心店)",
                        level: 4,
                   },
                   {
                        picture: "http://p0.meituan.net/biztone/625982373_1633682848208.jpeg%40340w_255h_1e_1c_1l%7Cwatermark%3D0",
                        name: "芈重山老火锅(五道口店)",
                        level: 3,
                   },
                   {
                        picture: "https://img.meituan.net/msmerchant/6810ddb6e1fbe7a7debef04affdc7b38188705.jpg%40340w_255h_1e_1c_1l%7Cwatermark%3D0",
                        name: "巴奴毛肚火锅(丽泽龙湖店)",
                        level: 6,
                   }
               ]
            }
        })
    </script>
</body>
</html>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：java 二阶差分算法寻找波峰

下一篇：protues 无法仿真stm32

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯