Vue -- 总结 01

于 2024-08-28 09:00:00 发布
阅读量412 收藏
点赞数 19
文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_78949452/article/details/141612516
版权

vue的基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 声明式渲染 -->
        {{message}}
        <!-- 声明式渲染可以进行简单的运算 -->
        {{flag?'真':'假'}}
        <!-- 简单的四则运算 -->
         {{num*3}}
    </div>
    <script>
        var app = new Vue ({
            el:"#app", // el element 元素 元素挂载点
            data:{
                // 初始化数据
                message:"hello word",
                flag:false,
                num:8
            }
        })
    </script>
</body>
</html>

指令的基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        {{money}}
        <!-- 指令 (Directives) 是带有 v- 前缀的特殊 attribute -->
         <div>{{lunch}}</div>
         <div v-text="lunch"></div>
         <div v-html="content"></div>
         <div>{{content}}</div>
         <div v-text="content"></div>
         <div v-html="richText"></div>
    </div>
    <script>
        // doucument.getElementById("app").innerText = '00'
        var app = new Vue({
            el:"#app",
            data:{
                money:"2000",
                lunch:"米饭",
                content:"<h1>我是h1</h1>"
       }
        })
    </script>
</body>
</html>

其他指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
     <style>
        [v-cloak] {
            display: none;
        }
     </style>
</head>
<body>
    <div id="app">
        <!-- 防止闪烁出现 -->
        <h1 v-cloak>{{message}}</h1>
        <!-- 跳过编译过程 -->
         <p v-pre>{{message}}</p>
         <!-- 只渲染元素和组件一次 即使后面数据进行更新了他也不会再次渲染了 -->
          <div v-once>{{money}}</div>
         
    </div>
    <script>
        var app = new Vue ({
            el:"#app",
            data:{
                message:"hello word",
                money:200
            }
        })
    </script>
</body>
</html>

v-model的基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定 -->
        <!-- v-model的数据双向绑定 -->
         <!-- 视图发生变化，数据也跟着变化 -->
          <!-- 数据发生变化，视图也跟着变化 -->
        <input type="text" v-model="username">
        <div>{{username}}</div>
    </div>
    <script>
        // 在表单控件或者组件上创建双向绑定
        let app = new Vue({
            el:"#app",
            data:{
                username:""
            }
        })
    </script>
</body>
</html>

v-model的简单应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>
            姓名: <input type="text" v-model="username">
        </p>
        <p>
            密码: <input type="text" v-model="password">
        </p>
        <p>
            性别：
            <input type="radio" value="0" v-model="gender">男
            <input type="radio" value="1" v-model="gender">女
        </p>
        <p>
            爱好:
            <input type="checkbox" value="1" v-model="hobby">喝咖啡
            <input type="checkbox" value="2" v-model="hobby">篮球
            <input type="checkbox" value="3" v-model="hobby">游泳
        </p>
        <p>
            家庭地址:
            <select v-model="city" multiple>
                <option value="c01">北京</option>
                <option value="c02">上海</option>
                <option value="c03">广东</option>
                <option value="c04">深圳</option>
            </select>
        </p>
        <p>
            备注:
            <textarea v-model.trim="desc"></textarea>
        </p>
    </div>
    <script>
        let app = new Vue({
            el:"#app",
            data:{
                username:"",
                password:"",
                gender:"",
                hobby:[],
                city:[],
                desc:""

            }
        })
    </script>
</body>
</html>

事件的基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 不简写形式 -->
        <!-- <button v-on:click="shijiangming">小明</button> -->
        <!-- 简写形式 v-on可以简写为@ -->
        <!-- 当你不传递参数的加不加括号都一样 -->
       <button @click="shijiangming">小明-one</button>
       <button @click="shijiangming()">小明-two</button>
       <!-- 如果你要传递参数必须加括号 -->
       <button @click="changeMsg('aa','bb',$event)">点击事件带参数</button>
       <button @click="changeName">怎么处理数据呢</button>
       <div>{{name}}</div>
    </div>
    <script>
        var app = new Vue ({
            el:"#app", 
            data:{
                name:"san"
            },
            // 在 `methods` 对象中定义方法
            methods:{
                shijiangming(e){
                    console.log(e);
                },
                changeMsg(a,b,e){
                    console.log('a',a);
                    console.log('b',b);
                    console.log('e',e);
                },
                changeName(){
                    // this 指的是当前页面的vue实例化对象
                    console.log('this',this.name);
                    let that = this;
                    that.name="小明"
                }
            }
        })
    </script>
</body>
</html>

事件修饰符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <style>
        .father {
            width: 500px;
            height: 300px;
            border: 1px solid red;
        }

        .son {
            width: 66px;
            height: 66px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 阻止事件冒泡 -->
        <div class="father" @click="fatherFun">
            father
            <!-- 阻止单击事件继续传播 -->
            <div class="son" @click.stop="sonFun">
                son
            </div>
        </div>
        <!-- 阻止默认行为 -->
        <a href="http://www.baidu.com" @click.prevent="preventFun">跳转到百度</a>
        <!-- 事件捕获 -->
        <div class="father" @click.capture="fatherFun">
            father
            <div class="son" @click.stop.capture="sonFun">
                son
            </div>
        </div>
        <!-- 修饰符可以串联 -->
        <div class="father" @click="fatherFun">
            father
        <a href="http://www.baidu.com" @click.prevent.stop="preventFun">123</a>
        <!-- self -->
        <div class="father" @click.self="fatherFun">
            father
            <div class="son" @click="sonFun">
                son
            </div>
         </div>
    </div>
    <script>
        let app = new Vue({
            el:"#app",
            data:{

            },
            // 方法定义写在methods属性中(methods属性值是一个对象)
            methods:{
                fatherFun(){
                    console.log('父亲的方法');
                },
                sonFun(){
                    console.log('儿子的方法');
                },
                preventFun(){
                    console.log('点击了a标签并且阻止了默认行为');
                }
            }
        })
    </script>
</body>
</html>

按键修饰符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" @keyup.enter.page-down.up.mmm="enterFun">
    </div>
    <script>
        Vue.config.keyCodes.mmm = 66;
        let app = new Vue ({
            el:"#app",
            data:{

            },
            methods:{
                enterFun(){
                    console.log('enter');
                }
            }
        })
    </script>
</body>
</html>
柿子来了
关注
  • 19
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
python vue element_干货｜vue-element-admin和Django简单整合
weixin_39777404的博客
12-20 799
原标题：干货｜vue-element-admin和Django简单整合 前言笔者是一个python guy开发者-----俗称"二把刀开发者"，平常大部分时间写的都是poc、脚本和工具类应用，很少写整站项目。如果你是一个前端工程师和资深开发工程师，请忽略本文。我们这样的 guy在做一些小的项目时，经常受限于对前端代码不熟悉，导致写各种工具时，不喜欢做前端页面。最近发现个神器“vue-element...
vue-antd-admin管理后台使用教程
qianxuezi的博客
07-16 4231
项目地址：https://gitee.com/gist006/vue-antd-admin https://github.com/biubiubiu01/vue-antd-admin 前端小白看过来！ 最近需要做一个管理平台，找到这个框架觉得功能齐全，很符合我的需求，所以决定基于这个框架来做我的项目。但由于我对vue、nodejs不是特别熟悉，所以频频遇到问题，不过还在最后还是成功了。特写篇笔记来总结分享，让前端小白也能快速把这个框架用起来！ 首先要把项目拉到本地。 git clone https://gi
【vue-cli3源码解析】01_vue-cli命令行定义
未来可期
02-06 386
vue-cli3 如何定义命令行
vue-router使用总结
I'm Baymax D
03-29 246
router.push跳转到指定的页面，这个方法回向history栈添加一个记录，点击后退会返回到上一个页面。 这种方式跳转的同时可以携带参数，有query与params两种方式携带参数，query方式是将参数放在url中进行传递，所以刷新后数据依然在，params方式参数不会出现在url中，但刷新后数据即会丢失。 replace与push类似，也是跳转到指定的页面，但是这个方法不会向history里面添加新的记录，点击返回，会跳转到上上一个页面。上一个记录是不存在的。
vue-router
qq_50276105的博客
10-19 1390
vue-router实现了不跳转页面的情况下内容的来回切换。一、vue-router是什么？routes:路由；router:多个路由的集合。用 Vue + Vue Router 创建单页应用非常简单：通过 Vue.js，我们已经用组件组成了我们的应用。当加入 Vue Router 时，我们需要做的就是将我们的组件映射到路由上，让 Vue Router 知道在哪里渲染它router配置文件就像一座桥梁，一头是main.js，另一头是App.vue。
第13章 vue-admin-template
richieandndsc的博客
03-31 3245
这是一套简单的vue基础课程，主要介绍vue,vue-router,axios,vuex,element-ui等等
fullcalendar-vue:FullCalendar的官方Vue组件
04-29
{ title: 'Event 1', start: '2022-01-01', end: '2022-01-02' }, ], }, }; }, ``` ### 自定义渲染 如果你需要自定义事件、日历单元格等的样式或行为，可以使用全历提供的各种插槽（slots）和钩子（hooks）...
vue生命周期来解释为什么vue-awesome-swiper插件中length=01
08-08
总结来说，Vue组件的生命周期对于理解和解决此类问题至关重要。开发者需要根据不同的生命周期阶段合理安排数据获取、DOM操作和第三方库的初始化，以确保所有部分协同工作。在本例中，问题的根源在于`swiper`实例的...
vue-cli webpack 引入swiper的操作方法
12-01
总结一下，要在vue-cli和webpack环境下引入Swiper，你需要： 1. 下载Swiper的js和css文件并放入相应目录。 2. 安装`babel-runtime`。 3. 修改`.eslintrc.js`以允许全局访问`Swiper`。 4. 在Vue组件中导入Swiper的js...
vue3+el-tale封装（编辑、删除、查看详情按钮一起封装）
最新发布
CallMe_CrabXie的博客
08-27 159
对应的tableData和tableDataHeader文件（实际开发中，应该从后端拿tableData，tableHeader根据情况自定义）
vue export的用法
weixin_41203765的博客
08-23 382
在Vue.js中，export关键字主要用于模块化编程，它允许你将一个文件（模块）中的代码、组件、函数、变量等导出，以便在其他文件中通过import语句来使用。这在Vue项目中非常常见，特别是当你需要重用组件、工具函数或配置时。
vue3插件原理
m0_46281382的博客
08-26 335
简述vue3中use方法加载第三方插件原理
knowLedge-无关系组件间方法的调用(创建新的 Vue 实例来作为事件总线（Event Bus）方法实现)
2301_76671906的博客
08-23 398
无关系组件间方法的调用(创建新的 Vue 实例来作为事件总线（Event Bus）方法实现)
如何使用Vue 3和Type Script进行组件化设计
yang295242361的博客
08-27 354
在Vue 3中，Composition API 是一种全新的逻辑复用和代码组织方式，它允许你将组件的逻辑（如响应式状态、计算属性、方法、生命周期钩子等）封装到单独的函数中，从而提高了代码的可复用性和可维护性。以下是如何在Vue 3中使用Composition API的基本步骤。
移动端签名
notagoodwriter的博客
08-23 392
【代码】移动端签名。
Vue：快捷文本
MMF博客园
08-26 408
Vue：快捷文本
关于 Vue/React 的 cli 中运用 webpack 打包的原理简单解析
weixin_47342624的博客
08-27 204
引入 webpack.config.js 文件，通过webpack 去加载 webpack.config.js 文件，会返回一个compiler对象，里面内置了 run方法即可对 webpack.config.js 文件进行编译运行build.jsif(err) {} else {})命令行中通过 node 命令执行该文件即可实现运用 webpack 对资源文件进行打包。
vue数据同步（sync修饰符）
weixin_62639453的博客
08-23 295
本文描述的数据同步，是基于父子组件进行传递的参数实现。实现的内容是：子组件里面选择框，选择的对象可以传递给父组件，但一般涉及到子传父，可能会考虑使用$emit然后通过在父组件身上绑定一个自定义方法，通过子组件去emit触发这个事件，传递参数,但是这里不使用这种，新学了一种，数据同步的方式，也就是在子组件选择的数据，可以同步在父组件中。随便在父组件其他地方绑定一个事件，看看有没有获取到从子组件里面获取到的值，因为要拿选择的值过来父组件这边使用。被执行时，父组件会自动接收到这个事件并更新。
vue-element-admin后端改造
07-28
对于vue-element-admin后端改造，你可以按照以下步骤进行操作： 1. 首先，你需要在服务器上使用Node.js启动vue-element-admin，默认是9258端口。这可以通过在命令行中进入vue-element-admin项目目录，然后运行`npm run dev`命令来实现。 2. 接下来，你需要使用Python的Flask框架来启动后端服务，默认是5000端口。你可以创建一个Flask应用，并在其中定义后端的API接口。 3. 修改vue-element-admin中的代码，将其后端交互功能指向Flask提供的服务。你可以在vue-element-admin项目中的`src/api`目录下找到与后端交互的文件，例如`user.js`。在这些文件中，你可以修改API请求的URL，将其指向Flask后端的对应接口。 4. 如果你需要将vue-element-admin中的模拟数据接口(mock)改为真实后端接口，你可以在vue-element-admin项目中的`src/mock`目录下找到对应的文件，例如`user.js`。在这些文件中，你可以修改接口的URL，将其指向Flask后端的对应接口。 5. 在修改后端交互功能和模拟数据接口后，你可能需要处理跨域访问的问题。由于vue-element-admin默认运行在9258端口，而Flask后端运行在5000端口，你需要在Flask应用中添加跨域访问的配置，以允许vue-element-admin能够跨域请求Flask后端的接口。 总结起来，vue-element-admin后端改造的步骤包括启动vue-element-admin和Flask后端服务、修改前端代码中的后端交互功能和模拟数据接口、处理跨域访问的问题。通过这些步骤，你可以将vue-element-admin与Python的Flask框架进行整合，实现前后端的配合工作。\[1\]\[2\]\[3\] #### 引用[.reference_title] - *1* *3* [vue-element-admin改用真实后端(python flask)数据的方法](https://blog.csdn.net/wangdandan01/article/details/103478357)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [vue-element-plus-admin整合后端实战——实现系统登录、缓存用户数据、实现动态路由](https://blog.csdn.net/seawaving/article/details/129766205)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值