vm对象

  1. <body>
  2. <div id="app">
  3.     <h1>{{name}}</h1>
  4.     <button @click="handleClick">点我</button>
  5. </div>
  6. </body>
  7. <script>
  8.     // 1 写在data或method中的属性或方法，从vm中直接可以点出来
  9.     // 2 method的函数中，如果想使用data或methods中的属性，直接this点名字就可以了
  10.     let vm = new Vue({
  11.         el: '#app',
  12.         data: {
  13.             name: 'xxx',
  14.             age: 19,
  15.         },
  16.         methods: {
  17.             handleClick() {
  18.                 console.log(this)
  19.                 this.handleClick1()
  20.             },
  21.             handleClick1() {
  22.                 console.log(this)
  23.                 this.name = '彭于晏'
  24.             }
  25.         }
  26.     })
  27. </script>

函数传参

  1. <body>
  2. <div id="app">
  3.     <h1>函数，可以多传参数，也可以少传参数，都不会报错</h1>
  4.     <button @click="handleClick('xxx')">点我</button>
  5.     <h1>事件对象，调用函数，不传参数，会把当前事件对象，传入，可以不接收，也可以接收</h1>
  6.     <button @click="handleClick2">点我2</button>
  7.     <br>
  8.     <button @click="handleClick3('xxx',$event)">点我3</button>
  9. </div>
  10. </body>
  11. <script>
  12.     let vm = new Vue({
  13.         el: '#app',
  14.         data: {},
  15.         methods: {
  16.             handleClick(name, age) {
  17.                 console.log(name, age)
  18.             },
  19.             handleClick2(event) {
  20.                 console.log(event)
  21.             },
  22.             handleClick3(name, event) {
  23.                 console.log(name)
  24.                 console.log(event)
  25.             }
  26.         },
  27.     })
  28. </script>

属性指令

  1. // 标签上   name   id  class  src  href ,height  属性
  2. // 如果这样，name='xx' 就写死了，我们想动态的绑定变量，变量变化，属性的值也变化
  4. //  v-bind:属性名='变量' 可以简写成  :属性名='变量'
  5. <body>
  6. <div id="app">
  7.     <hr>
  8.     <button @click="handleClick">点我变大</button>
  9.     <img :src="url" alt="" :height="h" width="w">
  10. </div>
  11. </body>
  12. <script>
  13.     let vm = new Vue({
  14.         el: '#app',
  15.         data: {
  16.             url: 'https://img2.woyaogexing.com/2023/06/01/11de6aa55c3ccc0fc35ba1ab6e4ae2b5.jpg'
  17.             h: '200px',
  18.             w: '200px'
  19.         },
  20.         methods: {
  21.             handleClick() {
  22.                 this.h = '400px'
  23.                 this.w = '400px'
  24.             },
  25.         }
  26.     })
  27. </script>

style和class

  1. // style 和 class也是属性，可以使用属性指令  :class=   :style=
  2. // 但是他们比较特殊，单独再讲
  4.     <style>
  5.         .size {
  6.             font-size: 60px;
  7.         }
  9.         .red {
  10.             background-color: red;
  11.         }
  13.         .yellow {
  14.             background-color: yellow;
  15.         }
  16.     </style>
  17. </head>
  18. <body>
  19. <div id="app">
  20.     <h1>class的使用:字符串，数组，对象</h1>
  21.     <button @click="handleClick">点我变样式</button>
  22.     <br>
  23.     <div :class="class_arr">
  24.         我是div
  25.     </div>
  27.     <h1>style的使用:字符串，数组，对象</h1>
  28.     <br>
  29.     <div :style="style_obj">
  30.         我是div
  31.     </div>
  32. </div>
  33. </body>
  34. <script>
  35.     let vm = new Vue({
  36.         el: '#app',
  37.         data: {
  38.             // class 推荐使用 数组方式
  39.             // class 绑定的变量，类型可以是 字符串，数组，对象
  40.             // class_str: 'size', // vm.class_str='size red'
  41.             class_arr:['red'], // 给该变量，追加值，class变化，页面会发生变化：vm.class_arr.push('size')
  42.             // class_obj:{size:true,red:false}  // 对象的用法，必须先提前设置，后期通过修改true或false控制类
  43.             // class_obj:{size:true},  // 但是不能往对象中放之前不存在的值，放不存在的值，没有响应式
  45.             // style 推荐使用 对象形式
  46.             // style_str:'font-size:80px;background-color:green',  // vm.style_str='background-color: red'
  47.             // style_arr: [{'font-size':'60px'}]  // vm.style_arr.push({'background-color':'red'})
  48.             // style_obj:{'font-size':'60px','backend-color':'green'}
  49.             style_obj:{fontSize:'60px',color:'green'},// 省略key值的引号后，要变成驼峰形式
  50.             // 有以下三种写法 Vue.set(this.style_obj,'color','red')或者this.style_obj['color'] = 'pink'或者this.style_obj.fontSize = '20px'
  51.         },
  52.         methods: {
  53.             handleClick() {
  54.                 // this.class_obj.yellow = true // 直接放，没有响应式
  55.                 Vue.set(this.style_obj,'color','red')  // 这样才有响应式
  56.             }
  57.         }
  58.     })
  59. </script>

条件渲染

  1. <body>
  2. <div id="app">
  3.   <div v-if="score>90&&score<=100">优秀</div>
  4.   <div v-else-if="score>80&&score<=90">良好</div>
  5.   <div v-else-if="score>60&&score<=80">及格</div>
  6.   <div v-else>不及格</div>
  7. </div>
  8. </body>
  9. <script>
  10.   let vm = new Vue({
  11.     el:'#app',
  12.     data:{
  13.       score:92
  14.     },
  15.   })
  16. </script>

列表渲染

  1. // 循环渲染一些数据，比如购物车的数据
  2. // v-for：循环字符串，数组，数字，对象
  3. // 有购物车数据，循环显示在页面中
  4. // 借助于bootstrap + Vue
  6. <div id="app">
  7.     <div class="container-fluid">
  8.         <div class="row">
  9.             <div class="col-md-6 col-md-offset-3">
  10.                 <h1 class="text-center">购物车</h1>
  11.                 <div class="pull-right">
  12.                     <button class="btn btn-danger" @click="handleClick">加载购物车</button>
  13.                 </div>
  14.                 <table class="table table-striped">
  15.                     <thead>
  16.                     <tr>
  17.                         <th>id号</th>
  18.                         <th>商品名</th>
  19.                         <th>商品价值</th>
  20.                         <th>商品数量</th>
  21.                     </tr>
  22.                     </thead>
  23.                     <tbody>
  24.                     <tr v-for="good in good_list">
  25.                         <th>{{good.id}}</th>
  26.                         <td>{{good.name}}</td>
  27.                         <td>{{good.price}}</td>
  28.                         <td>{{good.count}}</td>
  29.                     </tr>
  30.                     </tbody>
  31.                 </table>
  32.             </div>
  33.         </div>
  34.     </div>
  35. </div>
  36. </body>
  37. <script>
  38.     let vm = new Vue({
  39.         el:'#app',
  40.         data:{
  41.             good_list:[],
  42.         },
  43.         methods:{
  44.             handleClick(){
  45.                 this.good_list = [
  46.                     {'id': 1, 'name': '小汽车', 'count': 2, 'price': 100000},
  47.                     {'id': 2, 'name': '脸盆', 'count': 1, 'price': 23},
  48.                     {'id': 3, 'name': '方便面', 'count': 3, 'price': 6},
  49.                     {'id': 4, 'name': '钢笔', 'count': 4, 'price': 5},
  50.                 ]
  51.             }
  52.         }
  53.     })
  54. </script>

v-for循环其他类型

  1. // 数字 字符串 数组 对象
  2. // 看到别人写v-for时，在标签上都会加一个 key 属性，目的是为了提高虚拟dom的替换效率
  3. <el-carousel-item v-for="item in 4" :key="item">
  4. // key的值必须唯一 如果不唯一就报错
  6. ###### 以后如果数据变了，页面没有发生变化#####
  7. Vue.set(对象, key, value)
  8. Vue.set(数组, 索引, 值)
  10. <body>
  11. <div id="app">
  12.   <h1>循环数字</h1>
  13.   <ul>
  14.     <li v-for="(value,index) in number">{{value}}-----------{{index}}</li>
  15.   </ul>
  16.   <h1>循环字符串</h1>
  17.   <ul>
  18.     <li v-for="(value,index) in str">{{value}}-----------{{index}}</li>
  19.   </ul>
  20.   <h1>循环数组</h1>
  21.   <ul>
  22.     <li v-for="(value,index) in arr">{{value}}------------{{index}}</li>
  23.   </ul>
  24.   <h1>循环对象(相对于python key和value是反的)</h1>
  25.   <ul>
  26.     <li v-for="(value,index) in obj">{{value}}------------{{index}}</li>
  27.   </ul>
  28. </div>
  29. </body>
  30. <script>
  31.   let vm = new Vue({
  32.     el:'#app',
  33.     data:{
  34.       number:10,
  35.       str:'XxMa',
  36.       arr:[11,22,33,44,55],
  37.       obj:{name:'xxx',age: 19,gender:'男'}
  38.     }
  39.   })
  40. </script>

双向数据绑定 v-model

  1. // 数据双向绑定---》只有input标签---》v-model 做双向数据绑定
  2. // 咱们之前写的，其实都是数据的单向绑定
  3. 		修改js的值，页面变了
  5. <body>
  6. <div id="app">
  7.     <h1>双向数据绑定</h1>
  8.     <p>用户名<input type="text" v-model="username"></p>
  9.     <p>用户名<input type="password" v-model="password"></p>
  10.     <p>
  11.         <button @click="handleSubmit">登录</button>
  12.     </p>
  13. </div>
  14. </body>
  15. <script>
  16.     let vm = new Vue({
  17.         el:'#app',
  18.         data:{
  19.             username:'xxx',
  20.             password:'123',
  21.         },
  22.         methods:{
  23.             handleSubmit(){
  24.                 console.log(this.username)
  25.                 console.log(this.password)
  26.             }
  27.         }
  28.     })
  29. </script>

事件处理

  1. // 事件指令
  2. 	click:点击事件
  4. // input标签的事件
  5. 	input:只要输入内容，就会触发
  6. 	change：只要输入框发生变化，就会触发
  7. 	blur：只要失去焦点，就会触发
  9. <body>
  10. <div id="app">
  11.     <h1>input事件</h1>
  12.     <input type="text" @input="handleInput" v-model="username">-----{{username}}
  13.     <h1>change事件</h1>
  14.     <input type="text" @change="handleChange" v-model="username1">------{{username1}}
  15.     <h1>blur事件</h1>
  16.     <input type="text" @blur="handleBlur" v-model="username2">-------{{username2}}
  17. </div>
  18. </body>
  19. <script>
  20.     let vm = new Vue({
  21.         el:'#app',
  22.         data:{
  23.             username:'xxx',
  24.             username1:'yyy',
  25.             username2:'zzz'
  26.         },
  27.         methods:{
  28.             handleInput(){
  29.                 console.log(this.username)
  30.             },
  31.             handleChange(){
  32.                 console.log(this.username1)
  33.             },
  34.             handleBlur(){
  35.                 console.log(this.username2)
  36.             }
  37.         }
  38.     })
  39. </script>

过滤案例(filter、indexOf)

  1. <body>
  2. <div id="app">
  3.     <input type="text" v-model="search" @input="handleInput">
  4.     <hr>
  5.     <ul>
  6.         <li v-for="item in new_dataList">{{item}}</li>
  7.     </ul>
  8. </div>
  9. </body>
  10. <script>
  11.     let vm = new Vue({
  12.         el:'#app',
  13.         data:{
  14.             search:'',
  15.             dataList: ['a', 'at', 'atom', 'attoo', 'be', 'beyond', 'cs', 'csrf'],
  16.             new_dataList: ['a', 'at', 'atom', 'attoo', 'be', 'beyond', 'cs', 'csrf'],
  17.         },
  18.         methods:{
  19.             // handleInput(){
  20.             //     console.log(this.search)
  21.             //     // 根据用户输入的search，对数组进行过滤，剩下只有包含输入文字的字符串
  22.             //     var _this = this
  23.             //     this.new_dataList = this.dataList.filter(function(item){
  24.             //         if (item.indexOf(_this.search)>=0){
  25.             //             return true
  26.             //         }else {
  27.             //             return false
  28.             //         }
  29.             //     })
  30.             // }
  32.             // handleInput(){
  33.             //     console.log(this.search)
  34.             //     var _this = this
  35.             //     this.new_dataList = this.dataList.filter(function(item){
  36.             //         return item.indexOf(_this.search) >= 0
  37.             //     })
  38.             // }
  40.             handleInput(){
  41.                 this.new_dataList = this.dataList.filter(item=>item.indexOf(this.search)>=0)
  42.             }
  43.         }
  44.     })
  46.     // 补充
  47.     // 1 数组的过滤
  48.     // var arr = ['a', 'at', 'atom', 'attoo', 'be', 'beyond', 'cs', 'csrf']
  49.     // // 数组.filter(匿名函数，接收一个参数，函数必须返回true或false，如果返回true，表示这个值保留)
  50.     // var new_arr = arr.filter(function(item){
  51.     //     console.log(item)
  52.     //     if (item.length>3){
  53.     //         return true
  54.     //     }else {
  55.     //         return false
  56.     //     }
  57.     // })
  58.     // console.log(new_arr)
  60.     // 2 判断一个字符串是否在另一个字符串中
  61.     // var s = 'is'
  62.     // var s1 = 'XxMa is me'
  63.     // var res = s1.indexOf(s)  // s的索引位置，如果大于等于0，说明s在s1中
  64.     // console.log(res)
  66.     // 3 过滤出 数组中有at的字符串
  67.     // var arr = ['a', 'at', 'atom', 'attoo', 'be', 'beyond', 'cs', 'csrf']
  68.     // var search = 'at'
  69.     // var new_arr = arr.filter(function(item){
  70.     //     if (item.indexOf(search)>=0){
  71.     //         return true
  72.     //     }else {
  73.     //         return false
  74.     //     }
  75.     // })
  76.     // console.log(new_arr)
  77. </script>

Vue——属性指令、style和class、条件渲染、列表渲染、事件处理、数据双向绑定、过滤案例的更多相关文章

  1. 第二章 Vue快速入门--13 讲解v-model实现表单元素的数据双向绑定

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  2. 前端vue之属性指令、style和class、条件渲染、列表渲染、事件处理、数据双向绑定、表单控制、v-model进阶

    今日内容概要 属性指令 style和class 条件渲染 列表渲染 事件处理 数据的双向绑定 v-model进阶 购物车案例 内容详细 1.属性指令 <!DOCTYPE html> < ...

  3. 【vue2】Style和Class，条件，列表渲染，双向数据绑定，事件处理

    目录 1.style和class 2. 条件渲染 2.1 指令 2.2 案例 3. 列表渲染 3.1 v-for:放在标签上,可以循环显示多个此标签 3.2 v-for 循环数组,循环字符串,数字,对 ...

  4. 【Vue】style和class 列表渲染 使用v-for进行循环 监控失效 双向数据绑定 过滤案例 事件修饰符

    目录 昨日回顾 style和class class属性的三种设置方法 style属性的三种设置方法 条件渲染 列表渲染 使用v-for进行循环 循环数字 循环字符串 循环对象 循环数组 标签key值加 ...

  5. vue学习笔记（二）- 数据绑定、列表渲染、条件判断

    vue的数据绑定和列表渲染的造轮子 GitHub:八至 作者:狐狸家的鱼 双向数据绑定 Vue中数据的双向绑定-v-model 数据->页面 页面->数据 适用:input.select. ...

  6. 对象的属性类型 和 VUE的数据双向绑定原理

    如[[Configurable]] 被两对儿中括号 括起来的表示 不可直接访问他们 修改属性类型:使用Object.defineProperty()  //IE9+  和标准浏览器  支持 查看属性的 ...

  7. Vue数据双向绑定原理及简单实现

    嘿,Goodgirl and GoodBoy,点进来了就看完点个赞再go. Vue这个框架就不简单介绍了,它最大的特性就是数据的双向绑定以及虚拟dom.核心就是用数据来驱动视图层的改变.先看一段代码. ...

  8. 前端笔记之微信小程序（二）{{}}插值和MVVM模式&数据双向绑定&指令&API

    一.双花括号{{}}插值和MVVM模式 1.1 体会{{}}插值 index.wxml的标签不是html的那些标签,这里的view就是div. {{}}这样的插值写法,叫做mustache语法.mus ...

  9. Vue数据双向绑定(面试必备) 极简版

    我又来吹牛逼了,这次我们简单说一下vue的数据双向绑定,我们这次不背题,而是要你理解这个流程,保证读完就懂,逢人能讲,面试必过,如果没做到,请再来看一遍,走起: 介绍双向数据之前,我们先解释几个名词: ...

  10. vue中v-model 数据双向绑定

    表单输入绑定 v-model 数据双向绑定,只能应用在input /textare /select <div id="app"> <input type=&quo ...

随机推荐

  1. 程序员必须掌握的java进制转换（全网最详细讲解）

    前言 在上一篇文章中,壹哥给大家讲了Java里的各种运算符.其中在讲解位运算符时,我给大家提到了计算机中进制的概念.但是现在很多小白同学,对进制的概念还不够了解,比如二进制.八进制.十六进制都是怎么回 ...

  2. NodeJs的模块化和包

    模块化的基本概念 什么是模块化? 模块化是解决一个复杂问题时,自顶向下逐层把系统划分为若干个模块的过程,编程中,就是遵守一定规则,把一个大文件拆成独立并相互依赖的多个小模块. 模块化规范 使用什么样的 ...

  3. vue核心原理（Diff算法、虚拟dom）

    核心原理&源码 Diff 算法 这里参考大佬文章:https://mp.weixin.qq.com/s/oAlVmZ4Hbt2VhOwFEkNEhw diff 算法的进化 关于 diff 算法 ...

  4. Java面试——缓存

    一.什么是缓存 [1]缓存就是数据交换的缓冲区(称作:Cache),当某一硬件要读取数据时,会首先从缓存中查询数据,有则直接执行,不存在时从磁盘中获取.由于缓存的数据比磁盘快的多,所以缓存的作用就是帮 ...

  5. 分布式缓存的一致性 Hash 算法

    一.使用一致性 Hash 算法的原因 简单的路由算法可以使用余数 Hash:用服务器数据除缓存数据 KEY 的 Hash 值,余数为服务器列表下标编码.这种算法可以满足大多数的缓存路由需求.但是,当分 ...

  6. 全网最详细中英文ChatGPT-GPT-4示例文档-从0到1快速入门计算时间复杂度应用——官网推荐的48种最佳应用场景（附python/node.js/curl命令源代码，小白也能学）

    目录 Introduce 简介 setting 设置 Prompt 提示 Sample response 回复样本 API request 接口请求 python接口请求示例 node.js接口请求示 ...

  7. 实现一个CRDT工具库——VClock 时钟向量类

    这段代码实现了一个VClock类,它是基于GCounter实现的.VClock是一种向量时钟,它可以用于在分布式系统中对事件发生的顺序进行排序.VClock的实现方式是将每个节点的计数器值存储在一个字 ...

  8. crictl和ctr与docker的命令的对比

    containerd 相比于docker , 多了namespace概念, 每个image和container 都会在各自的namespace下可见, 目前k8s会使用k8s.io 作为命名空间 cr ...

  9. 使用 SK 示例 探索 GitHub 存储库 中的机器人

    微软 3月22日 一篇文章"Semantic-kernel 嵌入和记忆:使用聊天UI探索GitHub Repos"[1] ,文章中进行了展示了嵌入,该文章解释了他们如何帮助开发人员 ...

  10. [Linux/Bash/Shell]curl & wget

    1 参考文献 curl 的用法指南 - 阮一峰 curl网站开发指南 - 阮一峰 Curl Cookbook https://curl.haxx.se/ linux curl 命令详解,以及实例 2 ...