Vue快速入门

最新推荐文章于 2024-08-28 07:00:00 发布
最新推荐文章于 2024-08-28 07:00:00 发布
阅读量69 收藏
点赞数
分类专栏： Vue 文章标签： vue html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74295724/article/details/130213919
版权

1 Vue简介

它是一个Javascript框架，作用:简化dom的操作，以及响应式编程

2 在webstorm中创建工程

在这里插入图片描述
创建一个空项目
(1)

<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>

3 el属性

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

4 Vue指令

4.1 v-text 和v-html

<!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'>我喜欢打麻将</font>",
          }
    })
</script>
</html>

4.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="fun2">点击2</button>
</div>
</body>
<script>
    let app = new Vue({
        el:"#app",
        /* 数据 */
        data:{
            msg:"<font color='red'>今天学习vue</font>",
        },
        //定义方法
            methods:{
                fun(){
                    //this表示vue对象
                    this.msg="我喜欢打篮球"
                },
                fun2(){

                }
            }
        })
</script>
</html>

4.3 v-show和v-if

根据表达值的真假,切换元素的显示和隐藏
v-show通过style中disable来控制标签的显示和隐藏   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="img/6.jpg" width="200" v-show="age>18&&age<36">
    <hr>
    <!--v-show通过style中disable来控制标签的显示和隐藏   v-if:通过删除和创建标签来控制-->
    <img src="img/9.jpg" width="200" v-if="age>18&&age<36">
    <button @click="run">点击</button>
</div>

<script>
    let app = new Vue({
        el:"#app",
        data:{
            age:18
        },
        methods:{
            run(){
                this.age++
            }
        }
    })
</script>
</body>
</html>

4.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>
</head>
<style>
    .a{
        border: red solid 5px;
    }
</style>
<body>

<div id="app">
    <img :src="srcUrl" width="200" :title="title" :class="flag?'a':''">
    <hr>
    <!--v-show通过style中disable来控制标签的显示和隐藏   v-if:通过删除和创建标签来控制-->
    <button @click="run">点击</button>
</div>

<script>
    let app = new Vue({
        el:"#app",
        data:{
            srcUrl:"img/6.jpg",
            title:"忍者神龟",
            age:18,
            flag:true
        },
        methods:{
            run(){
                this.srcUrl="img/9.jpg",
                this.title="终极猎手",
                this.flag=false
            }
        }
    })
</script>
</body>
</html>

4.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:["好吃","好喝","好色","好赌"],
                 users:[
                     {"name":"张三","age":16,"sex":"女"},
                     {"name":"李四","age":19,"sex":"男"},
                     {"name":"王五","age":15,"sex":"男"}
                 ]
            },
            methods:{
                 deleteUser(name){
                     alert(name);
                 },
                  fun(){
                      alert("触发了回车键");
                  }
            }
      })
</script>
</html>

4.6 v-model 获取和设置表单元素的值.

<!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>
学java的哈哈
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue快速入门
m0_46623754的博客
09-09 1235
尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。但是如果表达式的内容很长，就会显得不够优雅，而且后期维护起来也不方便，例如下面的场景，我们。在子组件中定义函数，函数的具体实现调用父组件的实现，并在子组件中调用这些函数。指令的 职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。我们期待的是，当点击登录或注册按钮，分别显示登录页或注册页，而不是一起显示。但是，点击按钮是在子组件中，那就是说需要子组件来调用父组件的函数，怎么做？
VUE 快速入门
qq_55624813的博客
11-04 1578
目录 VUE 简介 什么是VUE? 什么场景使用VUE？ VUE 快速入门 官方js文件下载 业务及代码实现 总结(Summary) VUE 简介 什么是VUE? VUE是一个基于MVVM设计模式的渐进式（融合）的纯前端JS框架，基于此框架我们可以让客户端的操作更简单。 如何理解框架？ 可以将其理解为已经包含部分核心功能的半成品代码，缺少个性化定制，主要用于避免重复编码实现。 什么场景使用VUE？ 绝大多数以数据操作（增删改查）为主的PC端或移动端项目都可用vue开发比如:
Vue 快速入门
m0_59392076的博客
05-17 274
Vue快速入门 目录 一、Vue指令和参数 二、v-for条件指令 三、v-model指令 四、v-on和v-bind指令 五、component组件 提示：以下是本篇文章正文内容，下面案例可供参考 一、Vue指令和参数 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>⼩滴课堂vue快速⼊⻔</title> ..
vue快速入门文档
jl15988
03-03 742
快速的学习vue，不懂的地方也可以向我提问，有错误的地方也请及时指正。
VUE快速入门手册
码字不易，大家的支持就是我坚持下去的动力
09-23 2366
Vue介绍VUE：vue.js是一个构件数据驱动的Web界面的渐进式框架。Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。MVVM：MVVM是model - view - viewModel的缩写，它本质上是MVC的改进版。MVVM就是将其中的View的状态和行为抽象化，让我们将视图UI和业务逻辑分开。MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model）。
一篇文章，Vue快速入门
热门推荐
cV展示的学习园
06-24 5万+
① Vue概述及第一个Vue程序(Hello World) 1.1 什么是MVVM MVVM（Model-View-ViewModel）是一种软件设计模式，由微软WPF（用于替代WinForm，以前就是用这个技术开发桌面应用程序的）和Silverlight（类似于Java Applet，简单点说就是在浏览器上运行WPF）的架构师Ken Cooper和Ted Peters开发，是一种简化用户界面的事件驱动编程方式。由John Gossman（同样也是WPF和Sliverlight的架构师）与2005年在他的
vue-快速入门
qq_62892403的博客
07-24 1196
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，可以高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。[10]Vue是一个独立的社区驱动的项目，它是由尤雨溪在2014年作为其个人项目创建， [4]是一个成熟的、经历了无数实战考验的框架，它是目前生产环境中使用最广泛的JavaScript框架之一，可以轻松处理大多数web。
Vue快速入门-快速掌握Vue
weixin_52112756的博客
01-20 2791
Vue快速入门-快速掌握Vue 1. 简介 2. Vue—Hello World 3. 指令 4. 计算属性和侦听器 5. 组件化基础 6. 生命周期和钩子函数 7. 使用Vue脚手架进行模块化开发 1、简介 Vue (读音 /vju/，类似于 view) 是中国的大神尤雨溪开发的，为数不多的国人开发的世界顶级开源软件。 是一套用于构建用户界面的渐进式框架 。Vue 被设计为可以自底向上逐层应用。 MVVM响应式编程模型，避免直接操作DOM , 降低DOM操作的复杂性。 1.2、MVVM编程思想 MVV
Vue快速入门使用示例附录
03-10
"Vue快速入门使用示例附录"这个压缩包可能是为了帮助初学者快速理解并掌握Vue的基础操作和常见应用场景。让我们通过以下几个关键知识点来深入探讨Vue.js。 1. **安装Vue**: Vue可以通过CDN链接直接在HTML中引入，也...
vue快速入门教程
07-16
助你vue快速入门~~学完了感觉还不错____________________________________特此分享
vue快速入门package.rar
04-06
这个"vue快速入门package"压缩包文件包含了多个基于Vue.js的小项目，可以帮助初学者快速理解和掌握Vue的核心概念与基本用法。 1. **计数器**：这是一个基础的Vue应用示例，展示了如何使用Vue的数据绑定和计算属性来...
VUE快速入门
qq_48556559的博客
07-25 422
vue快速入门随手笔记
【日常记录-JS】HTML5中使用SVG元素
zhaoyaxuan001的博客
08-28 348
在HTML5中使用SVG元素主要涉及到将SVG代码直接嵌入HTML文档，或者通过HTML元素（如<img>、<object>、<iframe>）来引用外部SVG文件。然而，直接嵌入SVG代码通常提供了更大的灵活性和控制力，因为它允许直接在HTML中定义SVG图形的形状、大小、颜色等属性，并且可以使用CSS和JavaScript来进一步样式化和交互。在HTML5中使用SVG元素是一种强大且灵活的方式来创建矢量图形，它们可以很容易地集成到网页中，并支持通过CSS和JavaScript进行样式化和交互。
css基础学习总结(一)
₍˄·͈༝·͈˄*₎◞ ̑̑的博客
08-27 933
第四优先级：由一个或多个类选择器、属性选择器、伪类选择器定义。如.classname{margin:3px}会覆盖div{margin:6px;})>类选择器(.con{…})>标签选择器(dic{…})>通用选择器(*{…第三优先级：由一个或多个id选择器来定义。}会覆盖.classname{margin:3pxl}第五优先级：由一个或多个类型选择器定义。}覆盖*{margin:10px；第二优先级：在html中给元素标签加style，即内联样式。第六优先级：通配选择器，如*{marigin:6px;
基于Springboot的甘肃非物质文化网站的+源代码+演示视频.zip
09-02
现代经济快节奏发展以及不断完善升级的信息化技术，让传统数据信息的管理升级为软件存储，归纳，集中处理数据信息的管理方式。本甘肃非物质文化网站就是在这样的大环境下诞生，其可以帮助管理者在短时间内处理完毕庞大的数据信息，使用这种软件工具可以帮助管理人员提高事务处理效率，达到事半功倍的效果。此甘肃非物质文化网站利用当下成熟完善的SSM框架，使用跨平台的可开发大型商业网站的Java语言，以及最受欢迎的RDBMS应用软件之一的Mysql数据库进行程序开发.甘肃非物质文化网站的开发根据操作人员需要设计的界面简洁美观，在功能模块布局上跟同类型网站保持一致，程序在实现基本要求功能时，也为数据信息面临的安全问题提供了一些实用的解决方案。可以说该程序在帮助管理者高效率地处理工作事务的同时，也实现了数据信息的整体化，规范化与自动化。 关键词：甘肃非物质文化网站；SSM框架；Mysql；自动化
技术资料分享cadence技术资料（003）.zip
09-02
技术资料分享cadence技术资料（003）.zip
Av1an-1.7.0-py3-none-any.whl.zip
09-02
Av1an-1.7.0-py3-none-any.whl.zip
gergel_isopropyl_bromide.pdf
最新发布
09-02
gergel_isopropyl_bromide.pdf
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值