Vue快速入门！

最新推荐文章于 2024-08-15 12:28:07 发布
最新推荐文章于 2024-08-15 12:28:07 发布
阅读量1.1k 收藏 15
点赞数 31
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61936782/article/details/136987275
版权

文章目录

一、el挂载点

  • el的作用？
    用来设置Vue实例挂载（管理）的元素

  • Vue实例的作用范围是什么？
    el命中的元素及其后代元素

  • 是否可以使用其他的选择器？（除id选择器之外的选择器）
    id、标签、类选择器都可以，但是一般用id选择器，因为其他选择器可能会命中其他数据

  • 是否可以设置其他的dom元素呢？
    可以，都是必须是双标签。（但是不能使用html和body）

二、data数据对象

实例：

   <script>
        var app=new Vue({
            el:"#app",
            data:{
                message:"你好 小黑！",
                school:{
                name:"黑马程序员",
                mobile:"13850997126"
            },
            campus:["北京校区","上海校区","深圳校区","广州校区"]
            }
            
        })
    </script>

效果：

在这里插入图片描述

学习点：

  • Vue中用到的数据定义在data中
  • data中可以写复杂类型的数据
  • 渲染复杂类型数据时，遵守js的语法即可

三、本地应用

v-text

  • v-text指令的作用：设置标签的内容（textContent）
  • 默认写法会替换全部内容，使用差值表达式{{}}可以替换指定内容
<div id="app">
        {{message}}
 		<h2 v-text="message">哈哈</h2>
        <h2>{{message}}嘻嘻</h2>
</div>

<script>
        var app=new Vue({
            el:"#app",
            data:{
                message:"你好 小黑！"
            }
            
        })
    </script>

效果

在这里插入图片描述

  • 内部支持写表达式
<div id="app">
        {{message}}
 		<h2 v-text="message+'haha'">哈哈</h2>
        <h2>{{message+'haha'}}嘻嘻</h2>
</div>

v-html

  • v-html指令的作用是：设置元素的innerHTML
  • 内容中有html结构会被解析为标签
  • v-text指令无论内容是什么，只会解析为文本
  • 解析文本使用v-text,需要解析html结构使用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/dist/vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                content:"<a href='http://www.baidu.com'>百度</a>"
            }
        })
    </script>
</body>

效果：

在这里插入图片描述

v-on

  • v-on指令的作用是：为元素绑定事件
  • 事件名不需要写on
  • 指令可以简写@
  • 绑定的方法定义在methods属性中
  • 方法内部通过this关键字可以访问定义在data中数据

实例：

<body>
    <div id="app">
        <input type="button" value="v-on指令" v-on:click="doIt">
        <input type="button" value="v-on简写" @click="doIt">
        <input type="button" value="双击事件" @dblclick="doIt">
        <h2 @click="changeFood">{{food}}</h2>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                food:"西兰花炒蛋"
            },
            methods:{
                doIt:function(){
                    alert("hello");
                },
                changeFood:function(){
                    this.food += "好好吃！"
                }
            }
        })
    </script>
</body>

效果：

在这里插入图片描述

补充实例：

在这里插入图片描述

补充效果：

在这里插入图片描述
在这里插入图片描述

补充总结：

在这里插入图片描述

计数器-案例

  • 创建Vue实例时：el（挂载点），data（数据），methods（方法）
  • v-on指令的作用是绑定事件，简写为@
  • 方法中通过this，关键字获取data中的数据
  • v-text指令的作用是：设置元素的文本值，简写为{{}}
  • v-html指令的作用是：设置元素的innerHTML
<body>
    <div id="app">
        <div class="input-num">
            <button @click="sub">
                -
            </button>
            <span>{{num}}</span>
            <button @click="add">
                +
            </button>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                num:1
            },
            methods:{
                add:function(){
                    // console.log("add");
                    if(this.num<10){
                        this.num++;
                    }else{
                        alert("别点了，最大了")
                    }
                    
                },
                sub:function(){
                    // console.log("sub");
                    if(this.num>0){
                        this.num--;
                    }else{
                        alert("别点了，最小了")
                    }
                    
                }
            }
        })
    </script>
</body>

效果：

效果1.在这里插入图片描述效果2.
在这里插入图片描述
效果3.
在这里插入图片描述

v-show

在这里插入图片描述

实例：

    <div id="app">
        <h1 v-show="isShow">haha</h1>
        <input type="button" value="切换显示状态" @click="changeIsShow">
        <input type="button" value="累加年龄" @click="addAge">
        <h2 v-show="age>=18">hahaha</h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app =new Vue({
            el:"#app",
            data:{
                isShow:false,
                age:17
            },
            methods:{
                changeIsShow:function(){
                    this.isShow=!this.isShow;
                },
                addAge:function(){
                    this.age++;
                }
            }
        })
    </script>

效果：

在这里插入图片描述

v-if

在这里插入图片描述

实例：

   <div id="app">
        <input type="button" value="切换显示" @click="toggleIsShow">
        <p v-if="isShow">黑马程序员v-if</p>
        <p v-show="isShow">v-show_isShow</p>
        <h2 v-if="temperature>=35">热死啦</h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                isShow:false,
                temperature:20
            },
            methods:{
                toggleIsShow:function(){
                    this.isShow=!this.isShow;
                }
            }
        })
    </script>

效果：

  • 点击按钮之前：
    在这里插入图片描述
  • 点击按钮之后：
    在这里插入图片描述

v-bind

在这里插入图片描述

实例：

 <div id="app">
        <img v-bind:src="imgSrc">
        <br>
        <img :src="imgSrc" title="imgTitle+'!!!'"
        :class="isActive?'active':''"@click="toggleActive">
        <br>
        <img :src="imgSrc" title="imgTitle+'!!!'"
        :class="{active:isActive}" @click="toggleActive">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app= new Vue({
            el:"#app",
            data:{
                imgSrc:"http://www.itheima.com/images/logo.png",
                imgTitle:"黄玉兰",
                isActive:false
            },
            methods:{
                toggleActive:function(){
                    this.isActive=!this.isActive
                }
            }
        })
    </script>

效果：

  • 点击之前：
    在这里插入图片描述
  • 点击之后：
    在这里插入图片描述

v-for

在这里插入图片描述

实例：

<div id="app">
        <input type="button" value="添加数据" @click="add">
        <input type="button" value="移除数据" @click="remove">
        <ul>
            <li v-for="(it,index) in arr">
                {{index+1}}校区：{{it}}
            </li>
        </ul>
        <h2 v-for="item in vegetables" v-bind:title="item.name">{{item.name}}</h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                arr:["北京","上海","广州","深圳"],
                vegetables:[
                    {name:"西兰花炒蛋"},
                    {name:"玉兰炒蛋"}
                ]
            },
            methods:{
                add:function(){
                    this.vegetables.push({name:"xixihaha"});
                },
                remove:function(){
                    this.vegetables.shift();
                }
            }
        })
    </script>

效果：

在这里插入图片描述

v-model

在这里插入图片描述

实例：

<div id="app">
        <input type="button" value="修改message" @click="setM">
        <input type="text" v-model="message" @keyup.enter="getM">
        <h2>{{ message }}</h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                message:"黑吗"
            },
            methods:{
                getM:function(){
                    alert(this.message);
                },
                setM:function(){
                    this.message="玉兰";
                }
            },
        })
    </script>

效果：

在这里插入图片描述

1010_python全栈成长师
关注
  • 31
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue快速入门
梵高的向日葵
11-05 8208
文章目录一、Vue快速入门1、第一个Vue程序2、Vue基本语法2.1、if判断2.4、事件双向绑定3、Vue组件4、Axios异步通信5、计算属性6、插槽slot7、自定义事件内容分发8、创建vue项目二、Vue实战1、项目创建2、项目开发未完结 一、Vue快速入门 1、第一个Vue程序 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Ti
vue快速入门
m0_46623754的博客
09-09 1226
尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。但是如果表达式的内容很长，就会显得不够优雅，而且后期维护起来也不方便，例如下面的场景，我们。在子组件中定义函数，函数的具体实现调用父组件的实现，并在子组件中调用这些函数。指令的 职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。我们期待的是，当点击登录或注册按钮，分别显示登录页或注册页，而不是一起显示。但是，点击按钮是在子组件中，那就是说需要子组件来调用父组件的函数，怎么做？
VUE 快速入门
qq_55624813的博客
11-04 1455
目录 VUE 简介 什么是VUE? 什么场景使用VUE？ VUE 快速入门 官方js文件下载 业务及代码实现 总结(Summary) VUE 简介 什么是VUE? VUE是一个基于MVVM设计模式的渐进式（融合）的纯前端JS框架，基于此框架我们可以让客户端的操作更简单。 如何理解框架？ 可以将其理解为已经包含部分核心功能的半成品代码，缺少个性化定制，主要用于避免重复编码实现。 什么场景使用VUE？ 绝大多数以数据操作（增删改查）为主的PC端或移动端项目都可用vue开发比如:
vue-快速入门
qq_62892403的博客
07-24 1136
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，可以高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。[10]Vue是一个独立的社区驱动的项目，它是由尤雨溪在2014年作为其个人项目创建， [4]是一个成熟的、经历了无数实战考验的框架，它是目前生产环境中使用最广泛的JavaScript框架之一，可以轻松处理大多数web。
【Vue】快速入门
你不来，再美的天地，都狼藉 ~
03-24 1730
一文带你从HelloWorld认识Vue框架，深刻理解！
vue 3.0 快速入门教程
zai329979994639的博客
05-05 2084
2020年9月18日，Vue.js发布版3.0One Piece（n4800+次提交40+个RFC600+次PR300+贡献者3.3.4setup是Vue3中一个新的配置项，值是一个函数，它是“表演的舞台，组件中所用到的：数据、方法、计算属性、监视…等等，均配置在setup中。setup函数返回的对象中的内容，可直接在模板中使用。setup中访问this是undefined。setup函数会在之前调用，它是“领先”所有钩子执行的。姓名：{{name}}
Vue2快速入门
汤键的博客
12-13 548
Vue2快速入门
vue快速入门文档
jl15988
03-03 734
快速的学习vue，不懂的地方也可以向我提问，有错误的地方也请及时指正。
VUE快速入门手册
码字不易，大家的支持就是我坚持下去的动力
09-23 2343
Vue介绍VUE：vue.js是一个构件数据驱动的Web界面的渐进式框架。Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。MVVM：MVVM是model - view - viewModel的缩写，它本质上是MVC的改进版。MVVM就是将其中的View的状态和行为抽象化，让我们将视图UI和业务逻辑分开。MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model）。
Vue.js 快速入门实战
热门推荐
努力是为了站在万人之中，成为别人的光
06-12 2万+
通过这个简单的待办事项列表应用，我们学习了 Vue.js 的基本用法，包括数据绑定、事件处理和列表渲染。Vue.js 的设计使得它非常易于上手，并且能够与其他库或已有项目无缝整合。希望这篇文章能帮助你快速入门 Vue.js，并为你的前端开发之旅打下坚实的基础。接下来，你可以继续学习 Vue 的其他特性，例如组件、路由和状态管理等，以便在更复杂的项目中更好地使用 Vue.js。祝你学习愉快！
vue-router快速入门
01-27
【Vue-Router快速入门】 Vue-Router是Vue.js官方的路由管理插件，它与Vue.js深度集成，专为构建单页面应用（SPA）而设计。在传统的网页应用中，页面间的跳转通常是通过超链接完成。而在Vue-Router驱动的SPA中，路径...
vue快速入门教程
07-16
助你vue快速入门~~学完了感觉还不错____________________________________特此分享
Vue快速入门使用示例附录
03-10
"Vue快速入门使用示例附录"这个压缩包可能是为了帮助初学者快速理解并掌握Vue的基础操作和常见应用场景。让我们通过以下几个关键知识点来深入探讨Vue.js。 1. **安装Vue**: Vue可以通过CDN链接直接在HTML中引入，也...
vue小白入门教程
08-27
Vue 小白入门教程 本篇文章为初学者提供了一个详细的 Vue 入门教程，介绍了 Vue 的基本概念、环境搭建、第一个 Vue 应用程序...通过掌握这些知识点，初学者可以快速入门 Vue 框架，并开始构建自己的用户界面应用程序。
实现父组件调用子组件方法时报错：[Vue warn]: Invalid vnode type when creating vnode: null.
08-14 199
[Vue warn]: Invalid vnode type when creating vnode: null.
Vue项目-Table添加Form表单校验
StupidlyGrass的博客
08-12 269
【代码】Vue项目-Table添加Form表单校验。
vue3使用pnpm运行项目但是运行不起来
一个努力不被优化的程序员
08-12 193
重新创建项目，将老项目的package.json，vite.config.ts，src等文件拖拽替换。删除node_modules重新下：文字编译乱码，utf-8可能解析处理问题。（如果哪位知道为什么会这样或者怎么解决麻烦留言下）运行项目的时候发现根本运行不起来了。删除node_modules重新下。尝试过创建.npmr文件。创建.npmr：不管用。
monaco-editor自定义定制/扩展其他语言
m0_51431448的博客
08-12 79
目前monaco-editor内置有61种语言，但是只对css、html、json、typescript 支持的，功能也比较全。我们要是使用其他的语言比如javascript、java、sql等可能会报错，使用上面内置的四种语言之外的其他语言就需要我们自己定制、扩展了。如果有更多的可以自行扩展，monaco-editor中也都有对应语言的提示的自带的包，也可以自己编写逻辑哈。但是没考虑到语言的问题。我这边写了最常用的javascript、java、sql基础扩展支持。
element table 判断当前行是否展开和只展开一行
最新发布
m0_68716504的博客
08-15 238
element组件提供了table的展开和收起功能，并提供了expand-change事件用来监听table行的展开和收起在一些特殊情况下如：处理异步数据时，希望展开行时请求接口，关闭行时不用请求，但是expand-change，无论是展开还是收起都会触发，于是就希望能有一个类似isExpended布尔类型的状态属性来判断是否调用接口。
Vue快速入门与工程化实践
快速上手Vue，首先需要安装Node.js，因为Vue的很多开发工具和构建过程依赖于Node.js的npm包管理器。安装Node.js可以通过访问其官方网站下载对应平台的安装包。然后，可以通过以下方式安装Vue： 1. **直接通过`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值