vue(二)vue常见指令+事件

最新推荐文章于 2023-11-30 16:56:33 发布
最新推荐文章于 2023-11-30 16:56:33 发布
阅读量274 收藏
点赞数
分类专栏： vue等前端 
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>hello</title>
</head>

<body>
  <div id="app">
    <input type="text" v-model="msg"><br/>

    {{msg}}
    <div v-text="msg"></div>

    <div v-once>
      {{msg}}----{{msg}}
    </div>

    <div v-html="p"></div>

    {{arr}}

    <div>
      <ul>
        <li v-for="item in fruits">
          {{item.name}}
        </li>
      </ul>
    </div>

    <div>
      <ul>
        <li v-for="(item,index) in fruits">
          {{item.name}}{{index+1}}
        </li>
      </ul>
    </div>

        <div>
            <ul>
              <li v-for="(item,index) in fruits">
                {{index+1}}.{{item.name}}
                <ul>
                  <li v-for="(c,childIndex) in item.color">
                    {{index+1}}.{{childIndex+1}}.{{c}}
                  </li>
                </ul>
              </li>
            </ul>
        </div>

        <div v-for="(value,key,index) in obj">{{key}}:{{value}}:{{index}}</div>
  </div>
  <!-- <script src="node_modules\vue\dist\vue.js"></script> -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        msg: '123',
        p:'<h1>aaa</h1>',
        arr:[1,2,3,4,5],
        fruits:[
          {name: '香蕉' , color: ['green','yellow']}, 
          {name: '苹果' , color: ['red','green', 'yellow']}, 
          {name: '西瓜' , color: ['pink']}
        ],
        obj:{name:'huang',age:24,address:'xxx'}
      }
    });

    // vm.arr.reverse();
    vm.arr=vm.arr.map(item=>item*3);
  </script>

</body>

</html>

 

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>hello</title>
  </head>
  <body>
    <div id="app">
      <div v-on:mousedown="fn">点我啊</div>
      <div @mousedown="fn">v-on 等价于 @</div>
      <div @mousedown="fn($event)">调用不要加(),如果加了，必须写成($event)</div>
    </div>
    <!-- <script src="node_modules\vue\dist\vue.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <script>
    let vm=new  Vue({
      el:'#app',
      data:{
        a:111111,
      },
      methods:{
        fn(){alert(this.a)}
      }
    })
    </script>

  </body>
</html>

 

一点寒芒先至
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue的基本用法与常见指令
10-19
Vue.js是JavaScript MVVM（Model-View-ViewModel）库，十分简洁，Vue核心只关注视图层，相对AngularJS提供更加简洁、易于理解的API。接下来通过本文给大家介绍vue的基本用法与常见指令，感兴趣的朋友一起看看吧
vue项目,在img元素绑定load事件, 获取到的事件对象target为null
ahq2018的博客
02-19 2773
项目场景： vue单页面应用 问题描述： 在img元素上绑定load事件, 并传入事件对象, 打印时发现获取到的事件对象中, 包括target在内的部分值为null template部分代码 <img :src="item.coverImgUrl + '?param=200y200'" @load="imgLoaded($event)" class="target-image" width="200" height="200" /> script部分代码 imgLoa
Vue 中监控img加载完毕事件
yongyafang123的博客
03-31 1万+
使用场景： 当某一个页面中有2个以上的图片，然而有一个事件（比如 截屏）是必须要在页面中的图片都加载完了之后才可以去执行的！否则的话，就不会截到我们想要的屏幕 原理： img的load事件 <img @load=‘loadImg’ src="" /> 做法： 以下是步骤： 1、把页面中的所有图片都加上@load事件； 2、编写事件：（变量加一，判断条件去执行方法） loadImageO...
VUE @load事件触发多次分页
偷得浮生半日闲
08-19 693
VUE @load事件触发多次分页
Vuex学习笔记
重楼的博客
10-30 302
Vue最核心的两个功能:数据驱动和组件化。 每个组件都有自己的状态、视图和行为等部分组成。 new Vue({ //state data(){ return { count:0 } }, //view template:` <div>{{count}}</div> `, //actions methods:{ increment(){ this.count++; } } }) 状态管理包括: （1）state,驱动应用的数据源
svn不知道这样的主机_很多人不知道 v-for 可以这样解构
weixin_39609573的博客
11-25 110
最近发现我们可以使用v-for进行解构。之所以起作用，是因为 Vue 将v-for的整个第一部分直接提升到函数的参数部分：function(____){//...}然后，Vue 在内部使用此函数来渲染列表。这说明可以放在函数中括号中的任何有效Javascript也可以放在v-for中，如下所示：你可以在这里为非作歹，只是不要太疯狂。其他 v-for 技巧众所周知，可以通过使用如下元组从v-...
浅析vue中常见循环遍历指令的使用 v-for
10-18
主要介绍了vue中常见循环遍历指令的使用 v-for，包括v-for遍历数组，v-for遍历json对象,本文给大家介绍的非常详细，需要的朋友可以参考下
前端+常见最新的vue面试题
10-19
13.Vue 中的指令有哪些? 14.Vue 中的 watch 和 computed 适用于哪些场景? 15.Vue 中的组件通信方式有哪些? 16.Vue 中的动态组件是什么? 如何使用动态组件? 17.Vue 中的插槽 (slot) 是什么? 如何使用插槽? 18.Vue 中...
精选整理常见100个vue面试题
02-07
1.vue优点？ 答：轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十kb； 简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习；...4.v-show和v-if指令的共同点和不同......
vue语法整理
m0_73495603的博客
03-01 207
vue语法整理
vue-loader的介绍
weixin_53812239的博客
11-30 200
vue-loader是一个用于加载和解析vue单文件组件的webpack加载器.
Vue @load（事件会在页面或图像加载完成后立即发生。）
热门推荐
muzidigbig的博客
03-24 2万+
之前用@load的时候总是不生效。 其实原因是这样的： image src有值的时候，才开始加载 onload事件是在src的资源加载完毕的时候，才会触发 这样的话，在img标签的src属性填充上值之后，就可以等待onload事件的触发了。 <img :src="showImage" @load="imgLoad" /> methods: { imgLoad() { console.log("资源加载完毕执行"); }, }, ...
有关Vue-loader的相关知识
OceanH的博客
09-02 5065
什么是Vue-loader? 官方文档中具有专业的解释，个人理解，用里面的一句话来总结就是，webpack 和 Vue Loader 的结合为你提供了一个现代、灵活且极其强大的前端工作流，来帮助撰写 Vue.js 应用 一、处理资源路径 当 Vue Loader 编译单文件组件中的 <template> 块时，它也会将所有遇到的资源 URL 转换为 webpack 模块请求。 例如： <img src="../image.png"> 将会被编译为一个 模块请求： createEle
vue-loader是什么？使用它的途径有哪些？
yangling_123的博客
02-22 1万+
一、vue-loader作用： 解析和转换.vue文件。提取出其中的逻辑代码 script,样式代码style,以及HTML 模板template，再分别把他们交给对应的loader去处理 二、用途 js可以写es6,style样式可以写scss或less、template可以加jade等 三、 css-loader：加载由vue-loader提取出的CSS代码 vue-template-comp...
vue中v-for（列表渲染）的使用方法及注意，v-for的key属性的歧义
weixin_52099241的博客
07-14 4161
当要对一组数据进行渲染时，我们可以用v-for来完成 v-for遍历数组 格式：v-for="(item, index) in items"。 说明：index为可选参数，是索引值，当不需要得到每一项的索引值时，可以省略index 也可以用{{index+1}}之类的加减法得到类似于排名一样的效果 这里的item和index都是形参，而items是数组的名，数组的名字是必须和后面data数据里的数组名对应的，你也可以写(a，b) in items......
Vue循环遍历
qq_41555595的博客
08-07 2691
Vue循环遍历 1.v-on介绍 作用 循环遍历 预期 Array | Object | number | string | Iterable (2.6 新增) 用法 alias in expression ## 2.v-for 遍历数组 <div id="app"> <ul> <li v-for="name in names">{{name}}</li>
Vue常用指令及用法（入门篇）
小宇，要努力敲代码
10-19 1708
vue的内置指令有：v-bind指令、v-on指令、v-model指令、v-for指令、v-text指令、v-html指令、v-pre指令、v-cloak指令、v-if指令、v-else-if指令、v-else指令、v-show指令、v-once指令、v-slot指令。v-bind可以接受一个参数，用于响应式更新HTML的属性的属性值，v-bind：可以缩写为： v-on可以用来绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。用来绑定Vue中met
vue中常用修饰符
qq_44552416的博客
06-22 393
v-bind修饰符（实在不知道叫啥名字）v-model input最常用的双向绑定指令，实现了输入输出的实时绑定显示 1、.lazy 光标离开更新 输入框改变，这个数据就会改变，lazy这个修饰符会在光标离开input框才会更新数据,相当于在onchange事件触发更新。 2、.trim 过滤首尾的空格 输入框过滤首尾的空格，中间的是不会过滤的 3、.number 如果你先输入数字，那它就会限制你输入的只能是数字。 如果你先输入字符串，那它就相当于没有加.number 而不是单一的限制输入数字或者输入的东西
Vue基础--Vue中的事件绑定指令详解
qq_44749491的博客
09-24 5963
详解Vue中的事件绑定
vue2与vue3常见面试题
最新发布
04-11
常见的Vue指令包括： - v-bind：用于动态绑定元素的属性或class。 - v-model：用于实现表单元素与数据的双向绑定。 - v-for：用于循环渲染列表数据。 - v-if和v-show：用于条件性地显示或隐藏元素。 - v-on：用于...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值