速学vue

已于 2022-11-15 16:52:40 修改
阅读量349 收藏
点赞数
分类专栏： 前端 文章标签： vue.js 前端
于 2022-11-14 17:17:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48602526/article/details/127837383
版权

目录

一.学前须知

二.Vue基础

Vue简介及作用

第一个Vue程序

1.导入开发版本的Vue.js

2.创建Vue实例对象，设置el属性和data属性

3.使用简洁的模板语法把数据渲染到页面上

el挂载点

data：数据对象

代码

运行结果图

总结

本地应用

v-text

v-html

v-on指令

计数器

v-show

v-if

v-bind

 图片切换

 v-for

v-on补充

v-model

本节所有代码以及课程资源资源链接：

代码资源

一.学前须知

熟悉HEML、CSS、Javascript、AJAX

二.Vue基础

Vue简介及作用

1.它是一个JavaScript框架

2.简化Dom操作

3.响应式数据驱动

第一个Vue程序

首先要在visual Studio Code中创建一个HTML文件，百度一下

1.导入开发版本的Vue.js

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

2.创建Vue实例对象，设置el属性和data属性

3.使用简洁的模板语法把数据渲染到页面上

<!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>Vue基础 </title>
</head>
<body>
    <div id="app">
        <!-- 大括号差值表达式，可以先把它理解成模板的语法 -->
        {{message}}
    </div>

    <!-- 从Vue官网复制过来的 -->
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>
        // 创建一个Vue实例对象
        var app=new Vue({
            // #表示id选择器
            el:"#app",
            data:{
                message:"Hello Vue!"
            }
        })
    </script>
</body>
</html>

运行效果图

el挂载点

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

data：数据对象

代码

<!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>data：数据对象</title>
</head>
<body>
    <div id="app">
        {{message}}
        <h2>{{school.name}} {{school.mobile}}</h2>
        <ul>
            <li>{{campus[0]}}</li>
            <li>{{campus[3]}}</li>
            
        </ul>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                message:"你好，小黑",
                school:{
                    name:"黑马程序员",
                    moble:"400-618-9090"
                },
                campus:["北京校区","上海校区","广州校区","深圳校区"]
            }
        })
    </script>
</body>
</html>

运行结果图

总结

本地应用

v-text

v-html

 语法

如果需要渲染（例如是一个超链接）就用v-html类型的，如果只是一个文本就用v-text类型

v-on指令

语法:

 

代码：

<!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>v-on指令基础</title>
</head>
<body>
    <!-- 2.html结构 -->
    <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>
    <!--1. 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<script>
        // 3.创建Vue示例
    var app=new Vue({
        el:"#app",
        data:{
            food:"西兰花炒蛋"    
        },
        methods:{
            doIt:function(){
                alert("做IT ");
            },
            changeFood:function(){
                this.food+="好好吃！"
            }
        }
    })
</script>
</body>
</html>

运行效果图

总结

计数器

 语法：

 代码以及效果图：

总结：

v-show

 代码：

<!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>
    <div id="app" >
        <input type="button" value="切换显示状态" @click="changeIsShow">
        <input type="button" value="累加年龄" @click="addAge">
        <img v-show="isShow" src="D:\img\1.jpg" alt="">
        <img v-show="age>=18" src="D:\img\1.jpg" alt="">
    </div>
    

    <!--1. 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/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>

</body>
</html>

效果图：

总结：

v-if

语法：

代码以及效果图：

总结：

v-bind

语法：

两种效果一样

代码以及效果图：

总结：

 图片切换

语法：

代码：

css资源在本文开头已给出

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

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>图片切换</title>
  <link rel="stylesheet" href="./css/index.css" />
</head>

<body>
  <div id="mask">
    <div class="center">
      <h2 class="title">
        <img src="./images/logo.png" alt="">
        深圳创维校区环境
      </h2>
      <!-- 图片 -->
      <img :src="imgArr[index]" alt="" />
      <!-- 左箭头 -->
      <!-- <a href="javascript:void(0)" v-show="index!=0" @click="prev" class="left">
        <img src="./images/prev.png" alt="" />
      </a> -->
      <a href="javascript:void(0)" v-if="index!=0" @click="prev" class="left">
          <img src="./images/prev.png" alt="" />
        </a>
      <!-- 右箭头 -->
      <a href="javascript:void(0)" v-show="index<imgArr.length-1" @click="next" class="right">
        <img src="./images/next.png" alt="" />
      </a>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <script>
    var app = new Vue({
      el: "#mask",
      data: {
        imgArr: [
          "./images/00.jpg",
          "./images/01.jpg",
          "./images/02.jpg",
          "./images/03.jpg",
          "./images/04.jpg",
          "./images/05.jpg",
          "./images/06.jpg",
          "./images/07.jpg",
          "./images/08.jpg",
          "./images/09.jpg",
          "./images/10.jpg",
        ],
        index: 0
      },
      methods: {
        prev:function(){
          this.index--;
        },
        next:function(){
          this.index++;
        }
      },
    })
  </script>
</body>

</html>

效果图：

总结：

 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>
</head>
<body>
    <!-- 2.div -->
    <div id="app">
        <input type="button" value="添加数据" @click="add">
        <input type="button" value="移除数据" @click="remove">
        <ul>
            <li v-for="item in arr">
                程序员之家：{{item}}
            </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@2/dist/vue.js"></script>

<!-- 3. -->
<script>
    var app=new Vue({
        el:"#app",
        data:{
            arr:["北京","上海","广州","深圳"],
            vegetables:[
                {name:"西蓝花炒蛋"},
                {name:"蛋炒西蓝花"}
            ]
        },
        methods:{
            add:function(){
                this.vegetables.push({ name:"花菜炒蛋"});
            },
            remove:function(){
                this.vegetables.shift();
            }
        }
    })
</script>
</body>
</html>

效果图：

总结：

v-on补充

 代码以及效果图：

总结：

v-model

语法：

代码：

<!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>
    <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@2/dist/vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                message:"程序员",
            },
            methods:{
                getM:function(){
                    alert(this.message);
                },
                setM:function(){
                    this.message="酷丁鱼";
                }
            }
        })
    </script>
</body>
</html>

效果图：

总结：

问题：前端代码不同于后端，当你关键字打错时它不会提示，这样就需要在编程的时候细心一点，以免出现细节方面的问题，会很难解决。例如，编码过程中methods易打错少打了一个s，导致页面效果显示不出来......

qq_48602526
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
springboot_vue.zip
03-19
《SpringBoot 2.0 + Vue.js + Redis + Maven + JDK1.8：构建高效Web应用实践指南》 本文将深入探讨如何利用SpringBoot 2.0、Vue.js、Redis、Maven和JDK1.8来构建一个高效且实用的Web应用程序。这五个关键组件在现代...
【Vue基础知识点速查手册 - 面试指南】从指令到计算属性,让Vue不再难懂
08-22
内容概要: - 涵盖了Vue的基础知识点,如指令、方法、计算属性等 - 列出了常用的指令语法,如v-...这是一份针对Vue基础知识点的速查手册,可以帮助初学者快速回顾和掌握Vue的基础语法,也可供开发者面试前进行知识点整理。
Vuex速学篇:(1)基本套路
热门推荐
11-15 7万+
我们前面做了一个这样的页面，为了增加我们的学习难度，我们特意拆分成了不同的组件。 我们知道，我们在子组件里并不能直接对兄弟组件里的属性进行操作，我们通过this.$emit() 调用父组件的方法，通过this.$parent.$data.username 获取兄弟组件里的属性。 但是如果我们的业务越来越复杂，组件越来越多，会造成我们的整个项目维护起来非常的困难。能不能把各个组件的逻辑，数据源和方
VUE学习笔记
chuangkui8021的博客
08-29 391
Vue项目骨架下载: 骨架下载 1,安装依赖的命令:npm install 2,启动依赖: "scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js...
vue快速入门学习--适合有一点基础的
qq_44787874的博客
04-09 311
都是直接边看代码边学习，基本知识点自行去看，本文章是快速上手 第一篇 4月9日 一、vue基础 代码 代码如下（示例）： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>vue基础</title> </head> <body> <!-- {{message}} 没有用，必须放在el元素命中的内部，才会渲染有效
Vue 如何快速上手
最新发布
m0_57184906的博客
04-04 1354
如何快速上手Vue2
Vue - 快速入门，这一套就够了！（Vue core + 案例 + 效果演示）
CYK_byte的博客
10-16 1万+
前置条件：掌握 HTML、CSS、JavaScript、AJAX.工具：VsCode.插件：Live Server（浏览器实时预览）Ps：建议都提前下载下来，没网的时候也能用.
vue新春游戏-拼手速抢车票小游戏，学习玩乐两不误，春节小游戏，新年小游戏
01-03
这个"vue新春游戏-拼手速抢车票小游戏"是基于Vue.js开发的一个互动娱乐项目，旨在让开发者在享受游戏乐趣的同时，也能加深对Vue技术栈的理解。 1. **Vue.js基本概念** - **组件化**：Vue的核心特性之一是组件化，...
Vue.js 3.0 API 官方手册 中文pdf版(含源码).zip
08-17
除了官方手册，"Vue-3-Cheat-Sheet.pdf"可能包含Vue 3的速查表，帮助快速记忆常用API和概念。"know-vue3-master.zip"可能是一个示例项目或教程，通过实际代码展示Vue 3的新特性。 总之，掌握Vue.js 3.0 API的关键...
vue+springboot前后端分离项目源码
10-09
在本项目中，我们探索的是一个基于Vue.js前端框架与SpringBoot后端框架实现的完整、功能丰富的前后端分离项目。这个项目集成了多个关键组件和技术，如Redis内存数据库、Druid数据源连接池以及RabbitMQ消息中间件，...
Vue的简单学习（一文快速上手Vue2.0！）
an_gentle_killer的博客
08-08 3252
页内目录 一，Vue的介绍 二，基于vue.js的学习 三，Vue的使用模板 四，Vue的简单实用 五， 六， 一，Vue的介绍（Vue官网） 来看看官方的解释 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。（概括官网的话就是易用.
我整理最有效、最全的Vue 2.0 学习路线，各个阶段适用
前端你别闹
07-18 6565
「 Vue很难学吗 」对于我这种从0.x版本就开始体验 vuejs 的人来说，当然不算难，那时候没各种脚手架和复杂搭配，仅仅是一个mvvm的解决方案库而已，解决了jq带来...
Vue超快速学习
weixin_34368949的博客
07-24 1114
我之前一直使用的React，最近到了新公司，需要使用Vue，虽然之前自己写过一些小demo，但是缺乏系统的学习，且之前自己看的vue1.x的内容，好多都过时了，现在补充一下vue2.x的相关知识。 基础知识： vue的生命周期： beforeCreate/created、beforeMount/mounted、beforeUpdate/...
【Vue快速入门】
棒棒的邦邦
08-27 894
一、简介 Vue (读音 /vju/，类似于 view) 是中国的大神尤雨溪开发的，为数不多的国人开发的世界顶级开源软件。 是一套用于构建用户界面的渐进式框架 。Vue 被设计为可以自底向上逐层应用。 MVVM响应式编程模型，避免直接操作DOM , 降低DOM操作的复杂性。 1.MVVM编程思想 MVVM：页面输入改变数据，数据改变影响页面数据展示与渲染 M（model）：普通的javascript数据对象 V（view）：前端展示页面 VM（ViewModel）：用于双向绑定数据与页面，对于我们的课
Vuex速学篇:(2)利用state保存新闻数据
11-21 1万+
回顾以前我们在做这个新闻列表的时候，是一个写死的数据 export default{ data(){ return{ newslist:[ {newsid:"101",pubtime:"2016-10-29",title:"探索之路",desc:"是手机团队的探索之路"},
Vue快速入门
梵高的向日葵
11-05 8353
文章目录一、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速学
前方的路在刚开始
05-23 888
没有html、css、js基础的同学可以不用看了 vue和html的区别，html可以直接通过浏览器访问，而vue需要编译后，编译成html才能访问（并且他只能用npm去启动） npm是什么，npm是node.js的包管理器，node.js是什么，node.js是javascript的运行环境。 类似 魔兽对战平台(npm)和魔兽争霸（node.js）的关系，类似 pipy和python的关系 类似Maven 与 java的关系。 大家知道，像python的django、java的spring
Vue的简单使用
weixin_46427348的博客
07-08 949
1.导入开发版本Vue.js 2.使用简洁的模板语法把数据渲染到页面上 {{ }}的作用是和下面的数据联系起来 3.创建Vue实例对象，设置el属性和data属性 el：挂载点 el的作用范围 ： 在其外部的时候无效 在其内部的时候有效 el：“#app” id 选择器 el: “.app” 类选择器 el “div” 标签选择器复杂数据的渲染 对象类型数据的渲染 数组类型数据的渲染 v-text ：设置标签的文本值 其中第一种写法会把整个标签中的值替换为message中的值
普通web项目引入VUE开发（引用.vue文件组件）
ajian132的博客
12-26 1万+
普通web项目中可嵌入vue使用，仅需将vue的js引入页面即可，例子如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div id...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值