VUE入门

最新推荐文章于 2024-03-04 02:02:03 发布
最新推荐文章于 2024-03-04 02:02:03 发布
阅读量106 收藏
点赞数
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52725665/article/details/130148982
版权

1. vue简介

它是一个Javascript框架，作用:简化dom的操作，以及响应式编程
Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

2. 在webstorm中创建工程

（1）引入vue.js文件

<script type="text/javascript" src="js/vue.js"></script>

（2）body创建一个div标签

<body>
    <div id="app">
        {{msg}}
    </div>
</body>

（3）创建自己的js代码

 <script type="text/javascript">
        //创建一个vue对象
      var app=new Vue({
            //vue对象挂载到id为app的标签上，那么该标签下的所有元素都可以使用vue对象中的成员
            el: "#app",
            //数据
            data:{
                 msg:"学习vue入门",
            }
      })
  </script>

2.1 el属性:

把当前vue对象挂载到指定的标签元素上，使其vue生效。

3. vue指令

3.1 v-text 和v-html

设置标签的文本值(textContent)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
    <div id="app">
          <span>{{msg}}</span><hr>
          <span v-text="msg">看看显示什么?</span><hr>
           <!--v-text:无法解析html标签  v-html可以解析html标签-->
          <span v-html="msg">看看显示什么?</span>
    </div>
</body>
<script>
      let app=new Vue({
            el:"#app",
            data:{
                 msg:"<font color='red'>v-test标签显示</font>",
            }
      })
</script>
</html>

3.2 v-on基础

为元素绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
    <div id="app">
          <span>{{msg}}</span><hr>
          <button v-on:click="fun">点击</button>
        <!--上面的v-on:缩写为@-->
          <button @dblclick="fun">点击2</button>
    </div>
</body>
<script>
      let app=new Vue({
            el:"#app",
            data:{
                 msg:"<font color='red'>v-on标签</font>",
            },
            //定义方法
            methods:{
                 fun(){
                     //this表示vue对象
                     this.msg="点击看看";
                 }
            }
      })
</script>
</html>

计算器小案例
在这里插入图片描述

<!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>
  <!-- html结构 -->
  <div id="app">
    <!-- 计数器功能区域 -->
    <div class="input-num">
      <button @click="jian">
        -
      </button>
      <span>{{num}}</span>
      <button @click="jia">
        +
      </button>
    </div>
    <img src="http://qnaaa.zzaaa.net/aaajy/logo.png" alt="" />
  </div>
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="../js/vue.js"></script>
  <!-- 编码 -->
  <script>
    let app = new Vue({
      el:"#app",
      data:{
        num:0
      },
      methods:{
        jia(){
          this.num++;
        },
        jian(){
          this.num--;
        }
      }
    })
  </script>
</body>
</html>
3.3 v-show 和v-if

根据表达值的真假,切换元素的显示和隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
    <div id="app">
          <img src="imgs/sg.jpg" width="200" v-show="age>18&&age<36"/>
        <hr>
        <!--v-show通过style中disable来控制标签的显示和隐藏   v-if:通过删除和创建标签来控制-->
        <img src="imgs/1.jpg" width="200" v-if="age>18&&age<36"/>
        <button @click="fun">点击</button>
    </div>
</body>
<script>
      let app=new Vue({
            el:"#app",
            data:{
                age:18
            },
            methods:{
                 fun(){
                      this.age++;
                 }
            }
      })
</script>
</html>

点击切换图片案例

<!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="" />
      <!-- 左箭头 -->
      <!-- 此处切换左右箭头的显示/隐藏：v-if也可以实现一样的效果，但是由于v-if对性能消耗比v-show大，所以应该首选用v-show -->
      <!-- v-show="index!=0"指： -->
      <!-- (1)当index的值不等于0的时候，显示左箭头 -->
      <!-- (2)当index的值等于0的时候，隐藏左箭头 -->
      <a href="javascript:void(0)" @click="prev" v-show="index!=0" class="left">
        <img src="./images/prev.png" alt="" />
      </a>
      <!-- 右箭头 -->
      <!-- v-show="index<imgArr.length-1"指： -->
      <!-- index<imgArr.length-1=10-1=9,index索引是9的时候是最后一张图片 -->
      <!-- (1)即最后一张图片之前，显示右箭头 -->
      <!-- (2)到最后一张图片，隐藏右箭头 -->
      <a href="javascript:void(0)" @click="next" v-show="index<imgArr.length-1" class="right">
        <img src="./images/next.png" alt="" />
      </a>
    </div>
  </div>
 
  <script src="../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 () {//prev 切换到上一张图片
          this.index--;//此处this指当前对象#mask
        },
        next: function () {//next 切换到下一张图片
          this.index++;//此处this指当前对象#mask
        }
      }
    })
  </script>
</body>
</html>

3.4 v-bind

设置元素的属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/vue.js"></script>
    <style>
         .a{
              border: red solid 5px;
         }
    </style>
</head>
<body>
    <div id="app">
          <!--如何让img标签中src属性引用vue对象中的数据-->
          <img v-bind:src="imgUrl"  width="200" v-bind:title="title" v-bind:class="flag?'a':''"/><br>

        <!--v-bind: 缩写为: -->
         <img :src="imgUrl"  width="200" :title="title" :class="flag?'a':''"/><br>

           <button @click="fun">点击</button>
    </div>
</body>
<script>
      let app=new Vue({
            el:"#app",
            data:{
                age:18,
                imgUrl:"imgs/sg.jpg",
                title:"帅哥",
                flag:true
            },
            methods:{
                 fun(){
                      this.imgUrl="imgs/1.jpg";
                      this.title="美女好看"
                 }
            }
      })
</script>
</html>

3.5 v-for

循环数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
    <div id="app">
         <ul>
             <!--for(数据类型 b:数组){}-->
             <li v-for="(item,index) in hobby">
                 {{item}}--->{{index}}
             </li>
         </ul>

         <table width="500px" border="1" cellspacing="0" class="0">
               <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>操作</th>
               </tr>
              <tr v-for="item in users">
                   <td>{{item.name}}</td>
                   <td>{{item.age}}</td>
                   <td>{{item.sex}}</td>
                   <td>
                       <button @click="deleteUser(item.name)">删除</button>
                       <button >编辑</button>
                   </td>
              </tr>
         </table>


         <input type="text" @keyup.enter="fun()"/>
    </div>
</body>
<script>
      let app=new Vue({
            el:"#app",
            data:{
                 hobby:["唱","跳","rap","篮球"],
                 users:[
                     {"name":"张三","age":16,"sex":"女"},
                     {"name":"李四","age":19,"sex":"男"},
                     {"name":"王五","age":15,"sex":"男"}
                 ]
            },
            methods:{
                 deleteUser(name){
                     alert(name);
                 },
                  fun(){
                      alert("触发了回车键");
                  }
            }
      })
</script>
</html>

3.6 v-model

获取和设置表单元素的值. input select textarea

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
    <div id="app">
           <!--v-model会实现双向绑定:表达元素内容改变时，vue中对于的数据也会改变，vue中的数据改变对于的表单元素也会改变-->
           <input type="text" v-model="name" />
           {{name}}
           <button @click="dj">点击</button>
    </div>
</body>
<script>
      let app=new Vue({
            el:"#app",
            data:{
                name:"张三"
            },
            methods:{
                 dj(){
                    this.name="李四";
                 }
            }
      })
</script>
</html>

4. vue结合axios以及后台代码

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：

从浏览器中创建 XMLHttpRequest
从 node.js 发出 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据

4.1 引入方式

$ npm install axios $ cnpm install axios //taobao源 $ bower install
axios 或者使用cdn：
(1) 执行GET请求
// 向具有指定ID的用户发出请求

axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
// 也可以通过 params 对象传递参数
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

(2) 执行POST请求

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
``
路畔
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue.js 快速开发入门pdf
02-12
vue.js前端开发快速入门与专业应用.pdf 完整版 适合新手
vue入门开发
XUN__MLF的博客
02-09 3842
1、介绍 vue.js 是什么 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。 Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代 化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 官方网站：Vue.js 2、初始vue <!DOCTYPE html> <html lang="en"> <head> <meta charset
Vue前端+快速入门【详解】
最新发布
qq_1424674116的博客
03-04 1774
1.MVVM思想原始HTML+CSS+JavaScript开发存在的问题：操作麻烦，耦合性强为了实现html标签与数据的解耦，前端开发中提供了MVVM思想：即Model-View-ViewModel：Model: 数据模型，指要展示到页面上的数据。在web开发中通常从服务端获取到数据，再把这些数据展示出来View: 视图，用于展示数据的各种html标签ViewModel: 视图模型控制中心，负责把Model数据显示到View里，也负责从View里收集数据到Model里。Vue框架就承担了这个角色。
Vue.js开发入门(一)
qq_42382404的博客
08-14 381
Vue.js的介绍 1.vue是什么? Vue (读音 /vju?/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是， Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或 既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单 页应用提供驱动。 2.vue能做什...
Vue开发 基础入门教程
天马3798
03-04 807
10.Vue +Element UI 开发框架搭建。9.Vue Router 路由概念、使用介绍。1.Vue 概念、历史、发展和Vue简介。4.Vue 生命周期，代码结构，代码风格。6.Vue 条件渲染、列表渲染、事件处理。5.Vue 基础语法、计算属性，监听器。2.Vue 开发环境搭建、运行、调试。3.Vue CLI 开发模式原理。一、Vue开发 基础入门教程。7.Vue 表单输入绑定。8.Vue 类与样式。
Vue开发入门(一) | vue基础指令 &案例
go
06-27 535
文章目录Vue实例Vue基础指令v-cloak指令v-html和v-text指令v-bind指令v-model指令v-on指令v-for指令v-if和v-show指令Vue中绑定样式--classVue中绑定样式--styleVue基础案例品牌管理案例简易计算器案例 Vue实例 // 将来 new 的Vue实例，会控制这个 元素中的所有内容 // Vue 实例所控制的这个元素区域，就是我们的 V <div id="app"> <p>{{ msg }}</p>
vue入门知识PPT
03-26
里面包含自己总结的一些vue入门知识，如果有需要的同学们 可以下载并看看，不足之处可以尽情提出来，本人第一次上传资源
Vue入门学习小案例-小王记事本
04-05
Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王...
vue入门vue入门vue入门
05-14
vue入门
vue入门.pdf
10-10
vue从安装到入门, 1,安装环境:node.js(vue开发必须的环境) 2,使用淘宝镜像,(加快速度的) 3,vue的几种安装方法, 4,vue的几大组件 5,vue的基本方法的使用的讲解demo 6,入门
Vue开发入门
chendu98的博客
10-26 209
介绍 Vue 中文网 Vue github Vue.js 是一套构建用户界面(UI)的渐进式JavaScript框架 库和框架的区别 我们所说的前端框架与库的区别？ Library 库，本质上是一些函数的集合。每次调用函数，实现一个特定的功能，接着把控制权交给使用者 代表：jQuery jQuery这个库的核心：DOM操作，即：封装DOM操作，简化DOM操作 Framework 框架，是一套完整的解决方案，使用框架的时候，需要把你的代码放到框架合适的地方，框架会在合适的时机调用你的代码 框
Vue入门开发
Cherish
06-15 266
全局安装 npm install -g @vue/cli 创建项目 cd到项目文件夹 vue create -p dcloudio/uni-preset-vue my-project 提示选择模板。选择默认模板。 启动项目（微信小程序） npm run dev:map-weixin 微信开发者工具导入项目 ...
VueJs开发入门
越努力越幸运
03-03 2642
之所以选择vuejs，除了vuejs比较轻量外，同时还有vuejs的语法结构，非常简单，明了，很容易学习。 vuejs主要负责数据渲染的部分，和一些事件，在项目中还可以完美插入Jepto框架。 vuejs 2.0版本 公司开发项目为公众号商城。用vue来写数据渲染方面和开发公共组件十分方便。 使用npm安装： npm install vue 当然你也可以在gith
Vue开发入门看这篇文章就够了
10-27 195
摘要：很多值得了解的细节。 原文：Vue开发看这篇文章就够了 作者：Random Fundebug经授权转载，版权归原作者所有。 介绍 Vue 中文网 Vue github Vue.js 是一套构建用户界面(UI)的渐进式JavaScript框架 库和框架的区别 我们所说的前端框架与库的区别？ Library 库，本质上是一些函数的集合。每次调用函数，实现一个特定的功能，接着把控制权交给使用者 代表：jQuery jQuery这个库的核心：DOM操作，即：封装DOM操作，简化DOM操作.
Vue项目构建开发入门
YunWisdom
08-03 2058
开篇：Vue CLI 3 项目构建基础 大家好，当你点进这个标题，开始阅读本章的时候，说明你对 Vue.js 是充满好奇心和求知欲的。我之前写过一篇文章，这样评价 Vue.js，称它是“简单却不失优雅，小巧而不乏大匠”的作品，正如其官网介绍的“易用，灵活和高效”那样。其实框架是 Vue.js 的本质，而真正了解它的人则会把它当成一件作品来欣赏。 Vue.js 作为一门轻量级、易上手的前端框架，从入门难度和学习曲线上相对其他框架来说算是占据优势的，越来越多的人开始投入 Vue.js 的怀抱，走进 Vue.js
Vue入门（二）
hanhf的专栏
04-28 407
Vue入门（二）　　这一节我们将通过阅读Demo项目的源代码，了解Vue项目的基本构成。　　只有了解了这些，我们才有能力编写自己的案例。　　之后我们通过命令“npm run build”，构建Vue项目，观察生成的构建结果，更深入地了解项目。　　一、Vue项目的基本构成　　1. src目录　　开发者编写的代码都放在src目录下。　　Demo项目的src目录结构如下图所示：　　各文件和目录说明如下：...
Vue后台开发快速入门学习
令狐姑娘
09-14 1616
之前公司的项目中用到Vue框架，对我而言只是调用接口，这是上次的《Vue框架前后端联调》 现在需要我作为前后端，自己进行编写前端代码，这着实让我尴尬了一场，我们组是一个不需要前端的组，遇到前端功能后台上，所以感谢我的前端朋友远程指导我完成vue的开发 下面我来简而言之讲一下vue吧，vue是啥，做啥，优点，这就不说，直接开门见山 1.重要指令： v-bind：指令，v-bind:title...
Vue简单入门
m0_58037062的博客
10-19 204
指令：是带有 v- 前缀的特殊属性，不同指令具有不同含义。例如 v-html，v-if，v-for。使用指令时，通常编写在标签的属性上，值可以使用 JS 的表达式。常用指令。
vue入门到精通 pdf
11-23
《Vue入门到精通》是一本关于Vue.js前端框架的学习指南。本书分为入门、进阶和精通三个部分，帮助读者从零基础开始学习，并逐步掌握Vue.js的核心概念和应用技巧。 在入门部分，书中首先介绍了Vue.js的基本概念，如...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值