Day01-Vue

前端拓海 前端拓海 博客等级 码龄5年
关注
原创 最新推荐文章于 2025-10-25 10:54:34 发布 212 阅读 开通墨衍会员： AI 帮你选题成稿，GEO 检测让 AI 也搜得到 GEO检测
【信道编码/Channel Coding】线性分组码 这是本专栏信道编码/Channel Coding的第二站，想对信道编码有一个系统性的认识可以看本专栏的信道编码的整体框架一文。而在本篇文章中，将介绍线性分组码的基本原理。 阅读详情

一.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="js/vue.js"></script>
</head>

<body>

    <div id="app">
        <!-- {{}}差值表达式 -->
        <!-- 差值表达式里面可以进行简单的运算 -->
        <!-- 浏览器能解析哪些东西 -->
        <!-- html css javascript -->
        {{msg}}
        {{flag?'我是true':'我是false'}}
        {{num*2}}
    </div>

    <script>

        let app = new Vue({
            el:"#app",//挂载点
            data:{//初始化数据
                msg:"hello world",
                flag:true,
                num:22
            }
        })

    </script>

</body>
</html>

二.v-cloak

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>

<body>

    <div id="app">
        <div v-cloak>
            {{msg}}
        </div>
       
    </div>

    <script src="js/vue.js"></script>

    <script>

        let app  = new Vue({
            el:"#app",
            data:{
                msg:"Hello world"
            }
        })

    </script>

</body>

</html>

三.v-text和v-html、v-pre、v-once

<!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">
        <div>
            {{msg}}
        </div>  
       <div v-text="msg"></div>
       <div v-text="content"></div>
       <div>{{content}}</div>
       <!-- v-html接收富文本内容  -->
       <div v-html="content"></div>
       <!--  跳过编译过程-->
       <div v-pre>{{msg}}</div>
       <!-- 执行一次性的插值【当数据改变时，插值处的内容不会继续更新】 -->
       <div v-once>v-once{{msg}}</div>
    </div>

    <script>

        let app = new Vue({
            el:"#app",
            data:{
                msg:"我是文本内容",
                content:"<h2>我是H2标签</h2>"
            }

        })

    </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 type="text" placeholder="请输入你的姓名" v-model="msg">
    </div>
    <script>
        let app = new Vue({
            el:"#app",
            data:{
                msg:""
            }
        })
    </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">
        <div>{{msg}}</div>
        <!-- 点击事件 -->
        <!-- <div v-on:click="shijianming">点击事件触发按钮</div> -->
        <!-- v-on:简写@ -->
        <!-- 如果方法不需要传参的时候 加不加括弧都行 要传参必须加（）-->
        <button @click="shijianming">点击事件触发按钮</button>
        <!-- <button @click="fun()">点击事件进行传参--空</button> -->
        <button @click="fun">点击事件进行传参--空</button>
        <button @click="fun1(1,2,$event)">点击事件进行传参--有参</button>
        <button @click="changeMsg">修改msg</button>
    </div>
    <script>
        let app = new Vue({
            el:"#app",
            data:{
                msg:"初始化数据"
            },
            // 方法写在methods里面
            methods:{
                // 
                shijianming(){
                    console.log('点击事件执行了嘛')
                },
                fun(e){
                    console.log('e我是事件对象',e)
                    console.log("我是fun方法")
                },
                fun1(a,b,e){
                    console.log('a',a)
                    console.log('b',b)
                    console.log('e',e)
                },
                changeMsg(){
                    // this代表当前页面的vue实例
                    console.log('this',this)
                    this.msg ='帅哥'
                }
            }
        })
    </script>
</body>
</html>

标签
#vue.js #前端 #javascript
本内容遵循 CC 4.0 BY-SA 版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
汇编语言与接口技术（第4版）清华大学出版社 第2章 80*86微处理器 课后题答案 阅读详情

相关推荐

cs231n作业 assignment 1 q1 q2 q3

请先看课程作业地址。有两种做作业的方法，一种是在google Colab上做 （需魔法），另一种就是下载到本地，但是我懒得在本地配置环境，太麻烦了，还得修改一些基础代码，我就直接在google colab上做了google colab 配置环境只需要跟着教程走就好了最后还有一题解答题懒得做的，这个题目做的没啥意思。让我们用简单写法来实现softmax的loss函数与梯度计算。

Leezed525的博客 9190

小兔鲜Vue3 项目学习笔记Day01

vue3现在使用很广泛，必学！vue3项目，本文主要是学习项目功能实现并进行总结。配套资料的话去B站下方自己拿。持续更新…

不被定义的程序媛写的博客儿 2541

【人工智能之深度学习】23. 推荐系统升级实战：LightGCN重构协同过滤全流程（Amazon-Beauty数据集+完整代码）

摘要：传统协同过滤（如矩阵分解）在电商推荐中存在三大痛点：忽略用户-物品高阶关联、交互数据稀疏导致冷启动、特征工程依赖人工设计。本文基于Amazon-Beauty数据集（含20万+用户交互），用LightGCN图神经网络重构推荐系统：1）构建用户-物品二部图，通过3层图卷积捕捉“用户→物品→用户”的多跳关联；2）采用BPR负采样损失优化嵌入学习，缓解数据稀疏；3）端到端输出用户/物品嵌入，无需人工特征。

专注于人工智能、软件开发、工控自动化、工厂数字化及智能化等领域，希望和大家共同进步！ 1437

苍穹外卖前端day01-vue回顾

vue 属于单页面应用，所谓路由，就是根据浏览器路径不同，用不同的视图组件替换这个页面内容。在vue应用中使用路由功能，需要安装Vue-Router：注：创建完带有路由功能的前端项目后，在工程中会生成一个路由文件，如下所示：关于路由的配置，主要就是在这个路由文件中完成的。vuex 是一个专为 Vue.js 应用程序开发的状态管理库vuex 可以在多个组件之间共享数据，并且共享的数据是响应式的，即数据的变更能及时渲染到模板vuex 采用集中式存储管理所有组件的状态。

2401_85913068的博客 789

VueJS 学习笔记 day - 01

以下笔记中的部分代码以及文字说明来自黑马程序员视频 只用作个人学习使用 有错误的地方请私信指出 如有侵权请联系删除 VueJS 学习笔记 day - 01 第一个Vue程序 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&gt...

xuzhi7162的博客 309

VUEJS Day01快速了解

Vue.js是一套构建用户界面的渐进式JavaScript框架。与其他重量级框架不同的是 ，Vue采用自底向上增量开发的设计。Vue的核心库只关注视图层，它 不仅易于上手，还便于与第三方库或既有项目整合，另一方面，当与单文件组件 和VUe生态系统支持的库结合使用时，Vue也完全能够为复杂的 单页应用程序（spa：single page web application）提供驱动 什么是单页面应用： 单页Web应用就是只有一张web页面的应用，单页应用程序 是加载单个HTML页面并在用户与应用程序交互时动态更新

shibaweijin的博客 265

vue学习day01

vue学习笔记day01 环境准备 看了一些视频还有评论决定使用vscode 官网下载vscode:https://code.visualstudio.com/ 推荐安装教程：https://zhuanlan.zhihu.com/p/106357123上面也有汉化包的安装教程一这里我没有安装 vscode安装好后，学习vue前建议安装下live server插件，安装之后可以打开一个简单的服务器。还会自动更新。保存页面就会自动刷新。使用方法：安装之后，在文件上点击右键就会出现一个Open with Live

Happy_change的博客 250

Vue day01

一. 什么是VUE: 什么是: (1). 第三方开发的: 必须要下载才能使用 (2). 基于MVVM设计模式的: (待续…) (3). 渐进式的: 可以逐步在项目中使用vue的技术。比较容易和其他技术(DOM、jQuery)混搭。但是，强烈不建议！ (4). 纯前端js框架: 与nodejs无关，只需要浏览器就可以运行！ 为什么: 传统DOM和jQuery都存在着大量重复的编码！只有vue以及同类框架技术，才能几乎彻底的避免大量重复编码！提高开发效率 何时: 今后，只要以数据操作为主的项目，都可

世轩的博客 266

基于springboot+vue实现的外卖点餐平台Day01

是用于记录日志，注解后可使用log.info记录日志。

m0_71434601的博客 543

【Vue】day01-Vue基础入门

学习Vue的第一天 Vue基础

少年你真的要止步于此嘛。 1410

day01vue学习

概念：Vue (读音 /vjuː/，类似于 view) 是一套 **构建用户界面 ** 的渐进式框架基于数据渲染出用户可以看到的界面所谓渐进式就是循序渐进，不一定非得把Vue中的所有API都学完才能开发Vue，可以学一点开发一点所谓框架：就是一套完整的解决方案举个栗子如果把一个完整的项目比喻为一个装修好的房子，那么框架就是一个毛坯房。我们只需要在“毛坯房”的基础上，增加功能代码即可。提到框架，不得不提一下库。库，类似工具箱，是一堆方法的集合，比如 axios、lodash、echarts等。

WU3087676106的博客 840

【前端Vue】 day01

概念：Vue (读音 /vjuː/，类似于 view) 是一套 **构建用户界面 ** 的渐进式框架基于数据渲染出用户可以看到的界面所谓渐进式就是循序渐进，不一定非得把Vue中的所有API都学完才能开发Vue，可以学一点开发一点所谓框架：就是一套完整的解决方案举个栗子如果把一个完整的项目比喻为一个装修好的房子，那么框架就是一个毛坯房。我们只需要在“毛坯房”的基础上，增加功能代码即可。提到框架，不得不提一下库。库，类似工具箱，是一堆方法的集合，比如 axios、lodash、echarts等。

qq_41413652的博客 2019

Vue3 day01

导入main.js。

babicu123的博客 1306

Vue学习之Day01

前端小白初学Vue.js框架day01

qq_61309211的博客 193

vue入门 day01

1、总结一下v-text和v-html和插值表达式的差别 插值表达式 特点1、是不覆盖以前的内容 特点2、不能将内容解析为html格式 2、v-html属性 特点1是覆盖以前内容 特点2是能渲染html代码到标签中 3、v-text属性 特点1是覆盖以前内容 特点2是不能渲染html代码到标签中 2、创建一个vue对象并和视图进行绑定，然后在该div中分别用插值表达式、v-text、...

weixin_44891757的博客 218

Vue DAY01

Vue 第一天

qq_40185402的博客 303

Vue从入门到实战Day01

概念：Vue是一个用于构建用户界面的渐进式 框架构建用户界面：基于数据动态渲染页面渐进式：循序渐进的学习框架：一套完整的项目解决方案，提升开发效率优点：大大提升开发效率（70%）缺点：需要理解记忆规则->官网Vue的两种使用方式场景：局部模块改造场景：整站开发。

ltt159264的博客 1094

Vue-01day

Vue基础学习

2403_87072953的博客 573

Vue2 day-01

提供足够的选择，并且没有很多强制性的要求, 想用什么就用什么, 不必全都使用。Vue提供了一系列的技术，并不强制开发者一下子就使用它的全部,我们可以选择一个或多个，甚至使用全部，这就是vue的渐进式概念。声明式渲染->组件系统->客户端路由->集中式状态管理->项目构建可以针对不同的项目大小采用不同的Vue技术组合搭配小：核心库中：核心库 + 路由大：核心库 + 路由 + 状态管理库声明式渲染和组建系统是Vue的核心库所包含内容，而客户端路由、状态管理、构建工具都有专门解决方案。

BXY369的博客 1263

vue-day01

本文系统梳理了Vue的核心知识点，包括：1. Vue实例创建与响应式原理；2. 模板语法（插值表达式、v-text/v-html）；3. 指令系统（v-show/v-if、v-for、v-bind、v-on）；4. 表单双向绑定v-model；5. 实战案例（图片切换、图书管理、记事本）。重点讲解了Vue的响应式机制、指令使用场景差异、列表渲染key的重要性，以及如何通过v-model实现表单交互。文章还提供了学习路径建议和常见误区提示，帮助开发者构建完整的Vue知识体系。

mrjieke6的博客 625

基于CAPL语法生成的解析xlsx文件的DLL文件(C++源码以及CANoe Demo)

本工程是一个CANoe实例工程，演示如何通过CAPL脚本对xlsx表格文件读写，文件夹内包含X64和X86版本的DLL以及C++源码。

机械原理课程设计报告--螺钉头冷镦机.doc

机械原理课程设计报告--螺钉头冷镦机.doc
上一篇： Day03-ES6
下一篇： Day02-Vue
点赞 0
评论 0
书签 书签 0
前端拓海
前端拓海
博客等级 码龄5年 88粉丝 35原创
+ 关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值