Vue.js

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

体验并了解MVVM

 <!-- 创建一个容器，将来使用Vue就可以控制这个指定容器中的所有的DOM元素 -->
  <div id="app">
    <!-- 这种 {{}}语法叫做 插值表达式，在插值表达式中可以写 任何 合法 的 JS 表达式 -->
    <p>{{msg+'123'}}</p>
    <p>{{msg2 ? "这个是OK" : "这个是NO"}}</p>
    <hr>
    <!-- 注意:{{}}语法只能使用在  元素标签内容区域，不能在属性中使用 -->
    <!-- <h3>{{msg}}</h3> -->
    <!-- 这里，我们使用的 v-text 属性语法，叫做  指令-->
    <!-- 在Vue中，所有的指令，都是属性，Vue的指令，都是以v-开头的 -->
    <h3 v-text="msg"></h3>
    <h3 v-text="msg2 ? '这个是OK' : '这个是NO'"></h3>
  </div>
  <!-- <div id="test">
    <p>{{msg}}</p>
  </div> -->
  <script>
    // 这里new Vue() 得到的VM实例就是  MVVM中的核心  VM，它提供了双向数据绑定的能力
    const vm = new Vue({
      el: "#app",//指定当前要创建的这个vm实例，要控制页面上哪个区域   element   此处el属性指定的元素，就是我们的MVVM 的 V 视图层
      data: {//data是一个对象，表示我们要渲染的一些数据    此处的data数据就是MVVM中的 M  视图数据层
        msg: "这是使用Vue渲染的数据哦，我们并没有操作DOM元素",
        msg2: true

      }
    });
    const vm2 = new Vue({
      el: "#test",
      data: {
        msg: "这个也被控制了",
      }
    });
  </script>

区分插值表达式和v-text的区别


 <style>
    [v-cloak] {
      display: none;
    }
  </style>


<body>
  <!-- 
  1.使用  插值表达式，存在内容闪烁的问题，但是  v-text，没有闪烁的问题
  2.在插值表达式中，可以使用 v-cloak 解决闪烁问题
  3.插值表达式只会插入内容，并不会清除其余的内容，v-text会把元素中之前的内容都清空
   -->
  <div id="app">
    <h3 v-cloak>------{{msg}}------</h3>
    <hr>
    <h3 v-text="msg">123456</h3>
    <hr>
    <div>{{msg2}}</div>
    <div v-html="msg2"></div>
  </div>
  <script src="../vue.js"></script>

  <script>
    const vm = new Vue({
      el: "#app",
      data: {
        msg: "外国人 80% 都不会 中国吨儿",
        msg2: "<h6>这是一个小标题</h6>"
      }
    })
  </script>

在vue中绑定属性值

<div id="app">
    <!-- <input type="button" value="按钮" v-bind:title="btnTitle" v-bind:id="customldName"> -->
    <!-- v-bind:   可以为元素的属性绑定一些数据 -->
    <!-- v-bind: 这个指令可以被简写成  :      今后推荐直接写 冒号-->
    <!-- <input type="button" value="按钮" :title="btnTitle" :id="customldName"> -->
    <!-- v-bind: 指令中，如果想要实现表达式的拼接，被拼接的字符串，一定要用 引号 包裹起来，否则会被当作变量来解析 -->
    <input type="button" value="按钮" :title="btnTitle" :id="customldName+'这是追加的内容'">
  </div>
  <script>
    const vm = new Vue({
      el: "#app",
      data: {
        btnTitle: "这是按钮的 自定义 title值",
        customldName:"这是我自定义的id名"
      }
    })
  </script>

使用v-on指定绑定事件

 <div id="app">
    <!-- vue中 提供了 v-on: 来为元素绑定事件 -->
    <!-- 绑定的事件处理函数，必须定义到 VM 实例的 methods 属性中 -->
    <!-- <input type="button" value="点击一下按钮，侯麒麟 减3斤" v-on:click="add(1,2,3)"> -->
    <!-- <input type="button" value="点击一下按钮，侯麒麟 加3斤" v-on:click="add"> -->
    <input type="button" value="点击一下按钮，侯麒麟 加3斤" @click="add">
    <hr>
    <h3>侯麒麟当前重量值：{{weight}}斤</h3>
  </div>
  <script>
    const vm = new Vue({
      el: "#app",
      data: {
        weight: 10
      },
      methods: {//这个mehtods 属性中，可以定义好多的 事件处理函数
        /*  add(...args) {//对象中，定义函数属性的简写形式(es6)
           console.log(args);
           console.log("Ok223");
         } */
        add () {//对象中，定义函数属性的简写形式(es6)
          // 在methods中，如果想要访问data中的值，只能通过 this.***  来访问
          //  console.log(this.weight);
         this.weight+=3;
        // 注意： 当data中的数据变化之后，会被 VM 调用者监听到，然后自动把最新的数据应用到页面上
        }
      }
    })
  </script>

跑马灯效果

 <style>
    [v-cloak] {
      display: none;
    }
  </style>



<div id="app">
    <input type="button" value="浪起来" @click="lang">
    <input type="button" value="停止" @click="stop">
    <h3 v-cloak>{{msg}}</h3>
  </div>
  <script>
    const vm = new Vue({
      el: "#app",
      data: {//在一个VM实例的data中挂载的数据，VM的methods中都可以访问
        msg: "我拿Buff，谢谢~",
        intervalid: null//定时器的id
      },
      methods: {
        lang () {//开始跑马灯
          // 思路
          // 先截取第一个字符，然后把第一个字符，放到结尾处
          // this.msg.substring(起始的索引，结束的索引 不包含结束的索引)
          // clearInterval(this.intervalid);
          // 如果定时器的id，不等于Null，就表示已经有定时器在执行，此时，直接退出，就不会在开启第二个定时器
          if(this.intervalid!==null) return
          this.intervalid = setInterval(() => {
            const header = this.msg.substring(0, 1);
            const body = this.msg.substring(1);
            this.msg = body + header;
          }, 300)
        },
        stop () {//清除定时器
          clearInterval(this.intervalid)
          // 每当清除定时器之后，为了保证下次能够正常开启定时器，所以需要把    intervalid重置为null
          this.intervalid=null
        }
      }
    })
  </script>

v-model指令的学习

 <!-- v-bind: 指令只能实现数据的单向绑定，从data自动同步到  view 上 -->
  <div id="app">
    <h3>{{msg}}</h3>
    <!-- <input type="text" :value="msg"> -->
    <!-- 在Vue中，只有v-model 指令实现了数据的双向绑定  其他指令都是单向的 -->
    <!-- 注意： v-model 只能应用在表单表单元素中 -->
    <!-- 什么是表单元素： input text radio checkbox textatea select -->
    <input type="text" v-model="msg">
  </div>
  <script>
    const vm = new Vue({
      el: "#app",
      data: {
        msg: "哈哈"
      }
    })
  </script>

简易计算器案例

<div id="app">
    <input type="text" v-model="n1">
    <select name="" id="" v-model="opt">
      <option value="+">+</option>
      <option value="-">-</option>
      <option value="*">*</option>
      <option value="/">/</option>
    </select>
    <input type="text" v-model="n2">
    <input type="button" value="=" @click="calc">
    <input type="text" v-model="result">
  </div>
  <script>
    const mv = new Vue({
      el: "#app",
      data: {
        n1: 0,//要计算的第一个值
        opt: "-",//操作符
        n2: 0,//要计算的第二个值
        result: 0//结果
      },
      methods: {
        calc () {//计算方法
          // 获取到 操作符
          // 获取到n1的值和n2的值
          // 根据不同的操作符，计算这两个值的结果，最后把结果赋值给result
          /*    switch (this.opt) {
               case "+":
                 this.result=parseFloat(this.n1)+parseFloat(this.n2);
                 break;
             case "-":
                 this.result = parseFloat(this.n1) - parseFloat(this.n2);
                 break; case "*":
                 this.result = parseFloat(this.n1) *parseFloat(this.n2);
                 break; case "/":
                 this.result = parseFloat(this.n1) /parseFloat(this.n2);
                 break;
             } */
            //  类似于Hack的手段
          eval(`this.result = parseFloat(this.n1) ${this.opt} parseFloat(this.n2);`)
        }
      }
    })
  </script>

事件修饰符-阻止冒泡  stop

 <style>
    #inner {
      background-color: rgba(35, 222, 182, 0.879);
      height: 150px;
      width: 200px;
    }
  </style>



<div id="app">
    <div id="inner" @click="innerClick">
      <input type="button" value="按钮" @click.stop="btnClick">
    </div>
  </div>
  <script>
    const vm = new Vue({
      el: "#app",
      data: {

      },
      methods: {
        innerClick () {//内部div的点击事件
          console.log("内部的div被点击了");
        },
        btnClick () {//按钮的点击事件
          console.log("按钮被点击了");
        }
      }
    })
  </script>

事件修饰符-阻止默认行为    prevent

 <div id="app">
    <a href="http://www.baidu.com" @click.prevent="linkClick" >去度娘</a>
    <form action="" @submit.prevent="postForm">
      <input type="text" name="username">
      <input type="text" name="gender">
      <input type="submit" value="提交">
    </form>
  </div>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {
        linkClick () {
          console.log("按钮被点击了");
        },
        postForm(){
          console.log("触发了表单的submit事件");
        }
      }
    });
  </script>

事件修饰符-捕获模式  capture 

触发时触发回调   self

事件只触发一次   once

  <style>
    #inner {
      background-color: rgba(35, 222, 182, 0.879);
      height: 150px;
      width: 200px;
    }
  </style>




 <div id="app">
    <div id="inner" @click.self="innerClick">
    <!-- <div id="inner" @click.capture="innerClick"> -->
      <!-- <input type="button" value="按钮" @click="btnClick"> -->
      <input type="button" value="按钮" @click.once="btnClick">
    </div>
  </div>
  <script>
    const vm = new Vue({
      el: "#app",
      data: {

      },
      methods: {
        innerClick () {//内部div的点击事件
          console.log("内部的div被点击了");
        },
        btnClick () {//按钮的点击事件
          console.log("按钮被点击了");
        }
      }
    })
  </script>

事件修饰符-self和stop的区别

<style>
    #inner {
      background-color: rgba(35, 222, 182, 0.879);
      height: 150px;
      width: 200px;
    }
    #outer{
      width: 300px;
      height: 200px;
      background-color: rgb(230, 31, 37);
    }
  </style>




<div id="app">
    <div id="outer" @click="outerClick">
      <div id="inner" @click.self="innerClick">
        <input type="button" value="按钮" @click="btnClick">
      </div>
    </div>
  </div>
  <script>
    const vm = new Vue({
      el: "#app",
      data: {

      },
      methods: {
        innerClick () {//内部div的点击事件
          console.log("内部的div被点击了");
        },
        btnClick () {//按钮的点击事件
          console.log("按钮被点击了");
        },
        outerClick(){//外层div的点击事件
          console.log("外部的div被点击了S");
        }
      }
    })
  </script>

vue中使用类样式

 <style>
    .red {
      color: red;
    }

    .italic {
      font-style: italic;
    }

    .thin {
      font-weight: 200;
    }

    .small {
      font-size: 14px;
    }
  </style>






 <div id="app">
    <p>在Vue中，使用v-bind为元素绑定数组的类样式</p>
    <h1 :class="['red','small']">这是一个大大的H1,我大，我骄傲</h1>
    <hr>
    <p>在数组中使用三元表达式</p>
    <input type="button" value="变瘦" @click="isthin=true">
    <h1 :class="['red',isthin?'thin':'']">这是一个大大的H1,我大，我骄傲</h1>
    <hr>
    <p>在数组中使用对象来简化三元表达式</p>
    <input type="button" value="变瘦" @click="isthin=true">
    <h1 :class="['red',{thin:isthin}]">这是一个大大的H1,我大，我骄傲</h1>
    <hr>
    <p>传递对象作为类样式</p>
    <input type="button" value="变瘦" @click="isthin=true">
    <h1 :class="{red:true,italic:true,thin:isthin,small:true}">这是一个大大的H1,我大，我骄傲</h1>
  </div>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        isthin: false,
      },
      methods: {}
    });
  </script>

vue中书写行内的样式

<div id="app">
    <!-- <h1 style="color:red;font-size:14px">这是大标题</h1> -->
    <!-- <h1 :style="styleObj1">这是大标题</h1> -->
    <h1 :style="[styleObj1,styleObj2]">这是大标题</h1>

  </div>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        styleObj1: { color: 'red', 'font-size': '14px' },
        styleObj2: { "font-style": "italic" }
      },
      methods: {}
    });
  </script>

 

 

酒瘾。
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue.js入门
The_last_knight的博客
05-01 415
本篇文章的目的是快速的入门 Vue.js，力求能够通过本篇文章了解 Vue.js 的基本用法，但是并不会覆盖 Vue.js 的方方面面，在读完本篇文章之后，便可阅读 Vue.js 的官方教程，进一步的了解 Vue 的进阶内容。 Vue 带来的开发思维的改变 假设有这么一个要求，要我们根据一个数组渲染出一个列表，对于下面的数组 const courses = ['语文', '数学', '英语']; 要求渲染出下面的 HTML 结构 <ul> <li>语文</li>
Vue.js基础1
weixin_44289981的博客
05-17 258
Vue.js基础 一.Vue基础： 1.Vue基础代码结构与插值表达式： <body> <div id="app"> <p>{{message}}</p> </div> </body> <script> var app = new Vue({ el: '#app', data: { message:"学习Vue" } }) </script> 值得注意的是，当网络较慢时，网页还
vue中用eval执行函数
qq_34169240的博客
04-11 421
1.vue中用eval执行函数。2.执行if else。
vue怎么使用eval_JS使用eval()动态创建变量的方法
weixin_33201531的博客
02-11 1674
本文实例讲述了JS使用eval()动态创建变量的方法。分享给大家供大家参考，具体如下：一、什么是eval()函数？eval_r()函数可计算某个字符串，并执行其中的的 JavaScript 代码。二、如何动态定义变量？既然eval()能够计算字符串，何不将定义变量的写法转换为字符串，然后放入eval_r()函数内进行执行，形如：var defineStr = "var number_"+i.toS...
Vue 第一天学习笔记和代码
Dj19983160703的博客
04-17 218
1 Vue的基本使用 <!-- 将来 new 的vue 实例，会控制这个 元素中的所有内容 --> <div id="app"> <p id="content">{{msg}}</p> </div> <!-- 创建一个vue实例 --> <script> ...
vue eval 替代方案
笑笑的博客
01-16 8482
let code = `function code(){ return 'code' }` let fun = new Function(`return ${code}`)(); console.log(fun);
使用eval，vue eslint会报 eval can be harmful
西鱼的博客
11-08 1万+
eval(this.sevenDateValueList.join('+') // eval can be harmful // 解决 evil (fn) { let Fn = Function // 一个变量指向Function，防止有些前端编译工具报错 return new Fn('return ' + fn)() } this.evil(this.sevenDat...
vue.global.js，Vue.js 框架的核心文件之一
08-11
`vue.global.js` 文件是 Vue.js 框架的核心文件之一。它包含了 Vue.js 全局对象的定义和一些全局方法和属性的实现。 该文件对整个 Vue.js 应用的运行起着重要的作用，它提供了全局范围的 Vue 构造函数和一些全局...
vue.js和vue.min.js
06-13
Vue.js和Vue.min.js是两种版本的同一款前端JavaScript框架——Vue.js的实现。Vue.js由尤雨溪（Evan You）开发，旨在为构建用户界面提供简洁、易用且可扩展的工具。这两个文件在功能上是相同的，但它们在实际应用中...
vue.js 下载，引入vue.js 本地开发
05-18
Vue.js 是一款流行的轻量级前端JavaScript框架，它以其易学易用、组件化和高性能的特点深受开发者喜爱。本文将详细介绍如何下载Vue.js并进行本地开发。 首先，我们需要下载Vue.js。Vue.js的官方源码可以从其官方...
vue.js项目实战,vue.js项目实战pdf下载,JavaScript
09-10
Vue.js 是一款轻量级的前端JavaScript框架，由尤雨溪开发，因其简单易学、高效灵活的特性，在Web开发领域迅速崛起。本资源聚焦于"Vue.js项目实战"，旨在帮助开发者通过实际操作深入理解Vue.js的核心概念和技术，从而...
vue.js 课件 ppt
11-03
Vue.js 是一款非常流行的前端JavaScript框架，由尤雨溪创建，以其简洁的API和高效的响应式数据绑定受到广大开发者喜爱。Vue.js 的设计目标是使开发过程更加简单、直观，尤其适合构建用户界面。本课件集合了Vue.js的...
js中的eval方法详解（一）–eval方法的初级应用
热门推荐
小阳的博客
08-23 2万+
在我看来，js中的eval()方法就是一个js语言的执行器，它能把其中的参数按照JavaScript语法进行解析并执行。语法：eval(s); eval()方法中的参数s有多种情况。参数的不同形式，会使eval()方法执行的结果和返回值有差别。下面来说说他们的区别。
关于vue.js前端接收到数据却始终报_this is not defined at eval 的错误
yt2350438011的博客
03-03 2万+
之前做了一个关于作业管理的平台，利用ajax和后台异步通信，利用console.info()方法可以输出接受到的数据，但是一旦在成功的响应方法里面将数据赋值给前端定义的变量。就会转到failResponse的方法里面。代码如图： 数据已经获得成功如下图 但是数据一致不能够复制到前端定义的变量里面。一直报_this is not defined at eval 的错误。 解决办法： ...
Django+vue自动化测试平台（28）-- ADB获取设备信息
测试小老弟的博客
07-17 134
adb的全称为Android Debug Bridge，就是起到调试桥的作用。通过adb可以在Eclipse中通过DDMS来调试Android程序，说白了就是调试工具。adb的工作方式比较特殊，采用监听Socket TCP 5554等端口的方式让IDE和Qemu通讯，默认情况下adb会daemon相关的网络端口，所以当我们运行Eclipse时adb进程就会自动运行。
element-plus的el-table自定义表头筛选查询
i_am_a_div的博客
07-17 163
element-plus的el-table自定义表头筛选查询
TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
OpenTiny的博客
07-17 656
本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。
vue v-for动态渲染元素有的元素带书名号 有的不带怎么实现所有元素左对齐
最新发布
m0_67841039的博客
07-17 64
如果书名号的宽度不固定，可以使用JavaScript来动态计算并调整样式。然后在Vue模板中使用。
vue+vite项目中跨域问题解决与跨域代理的两种方式原理详解
whs15193553607的博客
07-12 1292
（1） target参数：相当于是在代理地址（geoserver或者geoserverApi）前面拼接target代理后地址就是http://localhost:8080/geoserver或（2）changeOrigin参数：开启代理在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题；（3）rewrite参数：路径改写。
学习vue语言 不错的文档
09-15
本文档详细介绍了Vue.js这一流行的前端JavaScript框架。Vue.js是一个用于构建用户界面的渐进式框架，它强调易用性、灵活性和可维护性，适合开发单页应用（SPA）和复杂Web应用。 Vue.js概述部分简述了Vue的核心理念...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值