Vue入门笔记（B站）

最新推荐文章于 2024-07-18 15:09:01 发布
最新推荐文章于 2024-07-18 15:09:01 发布
阅读量187 收藏
点赞数
分类专栏： 其他 文章标签： vue js html javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44233889/article/details/118873740
版权
这篇博客详细介绍了Vue.js的基础知识，包括Vue官网、第一个Vue程序、数据对象、各种指令如v-text、v-html、v-on、v-show、v-if、v-bind、v-for和v-model的用法。还涉及了使用axios进行网络应用开发，如天气查询页面和音乐播放器的制作，是Vue.js入门学习的好资料。
摘要由CSDN通过智能技术生成

文章目录

00.Html5框架代码

<!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>
</head>
<body>

</body>
</html>

01.Vue官网地址

http://vuejs.org

02.第一个Vue程序

...
<body>
    <div id="app">
        {
  { message }}
    </div>
    <!-- 引入Vue框架 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
     
            el: "#app",
            data: {
     
                message: "Hello Vue!"
            }
        })
    </script>
</body>
...

在这里插入图片描述

03.el挂载点

...
<body>
    <div id="app_id" class="app_class">
        {
  { message }}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
     
            // 不可挂载在<html>或<body>上，一般建议挂载在<div>上
            el: "#app_id", //根据id挂载，一般使用id挂载，因为id通常是唯一的
            // el: ".app_class", //根据class挂载
            // el: "div", //根据标签选择器挂载
            data: {
     
                message: "Vue Test!"
            }
        })
    </script>
</body>
...

04.data数据对象

...
<body>
    <div id="app">
        {
  { message }} 
        <!-- 显示内容：Vue Test! -->

        {
  { school }}
        <!-- 显示内容： { "name": "Vue School", "mobile": "123456" } -->
        {
  { school.name }}
        <!-- 显示内容：Vue School -->

        {
  { campus }}
        <!-- 显示内容：[ "BJ", "SH", "GZ", "SZ" ] -->
        {
  { campus[0] }}
        <!-- 显示内容：BJ -->
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
     
            el: "#app",
            data: {
     
                // 普通数据
                message: "Vue Test!", 
                // 对象数据
                school: {
     
                    name: "Vue School",
                    mobile: "123456"
                },
                // 数组数据
                campus: ["BJ", "SH", "GZ", "SZ"]
            }
        })
    </script>
</body>
...

05.本地应用_v-text指令({ {}}指令)

...
<body>
    <div id="app">
        <!-- 写法1：此种写法标签内会全部被替换，不推荐使用 -->
        <p v-text="message+'!'">Vue</p>
        <!-- 显示内容：Vue Test!! -->

        <!-- 写法2：插值表达式，这种写法只有大括号内部值会被替换，其余保留 -->
        <p>Vue {
  { message + "!" }}</p>
        <!-- 显示内容：Vue Vue Test!! -->
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
     
            el: "#app",
            data: {
     
                message: "Vue Test!",
            }
        })
    </script>
</body>
...

06.本地应用_v-html指令

...
<body>
    <div id="app">
        <p v-html="content"></p>
        <p v-text="content"></p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
     
            el: "#app",
            data: {
     
                content: "<a href='#'>Vue Test!</a>",
            }
        })
    </script>
</body>
...

在这里插入图片描述

07.本地应用_v-on指令(@指令)

...
<body>
    <div id="app">
        <input type="button" value="v-on指令" v-on:click="doIt">
最低0.47元/天 解锁文章
我土豆去哪了
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue学习笔记，B站黑马程序员的javaweb
11-05
Vue学习笔记 Vue是一个基于JavaScript的渐进式框架，用于构建用户界面。下面是关于Vue的学习笔记。 一、Vue基本知识 在Vue中，以点vue结尾...本文只是Vue学习笔记的开始，希望能够帮助读者快速入门Vue和ElementUI。
vue 03基本操作(基本指令，过滤器，组件，插件，组件传值。。)
weixin_45041878的博客
03-21 1128
第一章 Vue.js 概要介绍 1.1 Vue.js 介绍 Vue 是什么 主流的渐进式 JavaScript 框架 什么是渐近式 可以和传统的网站开发架构融合在一起，例如可以简单的把它当作一个类似 JQuery 库来使用。 也可以使用Vue全家桶框架来开发大型的单页面应用程序 。 使用它的原因 vue.js 体积小，编码简洁优雅，运行效率高，用户体验好. 无Dom操作，它能提高网站应用程序的开发效率 什么场景下使用它 一般是需要开发单页面应用程序 （Single Pag
Vue学习记录-01
qq_39742704的博客
08-24 336
解释Vue中{{ }}、v-model、v-once、v-html、v-bind、v-on的用法及案例欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这
B站学习Vue入门笔记
从零开始的异世界JAVA学习
10-21 161
学习来源–> 传送门—>【狂神说Java】Vue最新快速上手教程通俗易懂 ml1.前端分析2.试试写个基础vue程序3.Vue的基本语法3.1 `v-bind` 指令: 用来绑定元素特性3.2 `v-if` `v-else-if` `v-else` 指令 ,条件判断3.3 `v-for` 循环4. `v-on`监听事件 官方文档->vue中文文档 1.前端分析 VUE用于构建用户界面的渐进式框架;自底向上逐层应用,核心库只关注于视图层; 前端三剑客: HTML:超文本标记语言,(结构内容)
狂神说Vue笔记整理
热门推荐
qq_46138160的博客
12-11 10万+
狂神说Vue笔记 ​ 想要成为真正的“互联网Java全栈工程师”还有很长的一段路要走，其中前端是绕不开的一门必修课。本阶段课程的主要目的就是带领Java后台程序员认识前端、了解前端、掌握前端，为实现成为“互联网Java全栈工程师”再向前迈进一步。 一、前端核心分析 1.1、概述 Soc原则：关注点分离原则 Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。 HTML + CSS + JS : 视图 ： 给用户看，刷新后台给的数据 网络通信 ： axios 页面跳转 ： vue-router 状态管
Vue入门笔记（2）
程序员的世界
11-26 143
目录结构五、Vue中动画六、Vue中组件组件创建组件间切换组件间传值数据传递方法传递，父子间双向传递七、Vue获取DOM元素\组件获取DOM元素获取组件八、Vue路由相关说明使用路由传值query方式--即?方式占位符方式--即:方式路由嵌套路由命名视图九、其他 五、Vue中动画 六、Vue中组件 组件分为全局组件和私有组件，将组件定义在vue实例中components就是私有组件。 组件创建 创...
Vue初阶入门笔记
mh18810405067的博客
08-29 127
vue初阶入门，原理理解
Vue入门笔记
荷叶生时春恨生
12-31 511
vue入门笔记 什么是vue Vue是一个渐进式的框架 渐进式意味着你可以将Vue作为你应用的一部分嵌套其中 Vue的核心库以及其生态系统 Core + Vue-router + Vuex Vue特点和Web开发常见高级功能 解耦视图和数据 可复用的组件 前端路由技术 状态管理 虚拟DOM 开始学习 推荐使用软件 hbuider 方式一. 直接CDN引入 可以选择引入开发环境版本 / 生产环境版本 // 开发环境版本, 包含了帮助的命令行警告 <srcipt src='https://cdn.jsde
vue框架入门笔记（速成vue）
weixin_42991822的博客
01-25 4367
vue4小时速成课概述一、vue基础1. vue简介2. 第一个vue程序3. el挂载点4. data数据对象二、本地应用1. v-text2. v-html3.4.5.三、网络应用四、综合应用 概述 学习vue的目的主要是为了完成毕业设计的前端页面编写，所以学的比较粗糙，主要是为了vue入门，观看的教学链接是： 黑马程序员vue前端基础教程-4个小时带你快速入门vue. 一、vue基础 1. vue简介 一个js框架 简化Dom操作 响应式数据驱动 数据发生变化，则页面上的数据显示也会随之发生变化。
黑马VUE快速入门笔记
只要学不死，就往死里学！！！
01-12 2353
vue官网https://cn.vuejs.org/ 我的第一个vue程序 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue基础</title> <!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/
Vue学习笔记——【尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通-哔哩哔哩】 https://b23.tv/
08-14
Vue学习笔记——【尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通-哔哩哔哩】 https://b23.tv/
B站武沛齐Django笔记和代码
07-19
2022 B站最详细django3教程(django从入门到实践) 很适合刚学习django的同学 通过一个案例，把django的基本的templates，models，urls，from，modelfrom讲的清清楚楚，甚至还给了我们应用场景。
狂神笔记，b站狂神说课程笔记大全(最新)
09-19
b站狂神说课程笔记大全，每个部分都有 狂神说java系列笔记（java基础+javaweb+ssm+微服务）全套 狂神说上课笔记未删减 Java基础到技术升级 1、JavaSE：Java入门 2、JavaSE：基础语法 3、JavaSE：流程控制 4、JavaSE...
自学javaweb-b站黑马Xmind思维导图笔记
09-05
Vue提供了模板语法、组件化、状态管理等特性，易于上手且性能优秀。 最后，数据库设计、多表查询和事务管理是任何Web应用的基础。约束是确保数据库数据完整性的规则，如唯一性、非空和外键约束。多表查询涉及到JOIN...
html 关闭信息窗口
cuisidong1997的博客
07-14 340
如果你想要通过点击favicon来关闭一个窗口，你需要添加一个监听器来监听favicon的点击事件，但是由于favicon通常不支持JavaScript事件监听，你可能需要使用一些特殊的技巧，例如监听鼠标移动到favicon上的事件，并通过这种方式触发窗口关闭。如果你是指的是一个favicon（网页标题前的小图标），并且你想要通过点击这个图标来关闭一个信息窗口，那么你需要使用JavaScript来监听favicon的点击事件，并在事件处理函数中执行关闭窗口的操作。html 关闭信息窗口 ico。
高频面试题-HTML
CSDN20221005的博客
07-15 934
离线存储是基于 .appcache ⽂件的缓存机制(不是存储技术)实现的，通过这个⽂件上的解析清单离线存储资源，这些资源就会像 cookie ⼀样被存储了下 来。块级元素有： div p 列表标签(ul ol li dl dt dd) 标题标签(h1 h2 h3 h4) 表格标签(table)空元素： <br> <hr> <img> <input> <link> <meta>->新增了语义化标签(header/footer/nav/asid)->新增了表单增强控件(data/time/email/url)
DDei在线设计器-HTML渲染
最新发布
hoslay1的专栏
07-18 217
HtmlViewer插件通过将一个外部DIV附着在图形控件上，从而改变原有图形的显示方式。允许使用者自己定义HTML通过HTML元素。本示例演示了通过Html来扩展渲染图形，从而获得更加丰富的图形展现。通常情况下，我们创建的图形控件，如下图所示：通过HtmlViewer插件，我们可以使用表现力更强的HTML元素来替换显示的图形，或者结合业务需要，将一些业务数据显示在图形上，如下：!
ChatGPT对话：如何把Html文件转换为Markdown文件
uestcai的博客
07-15 1368
【编者按】ChatGPT提供了多种方法。编者常用VS Code，所以想使用VS Code解决问题，但ChatGPT提供了一些错误的方法，失败了。最后发现编写python程序最简单。
"Vue入门笔记分享：了解概念、基础语法与常用操作，渐进式框架解释
Vue.js 是一套用于构建用户界面的...希望通过本篇入门笔记的整理和总结，能够帮助大家更好地理解和使用 Vue，并且激发大家对前端开发的兴趣和热情。同时也欢迎大家与我交流和分享更多关于 Vue 的学习心得和经验。谢谢！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值