07-vue常用操作指令

最新推荐文章于 2023-07-01 19:40:21 发布
最新推荐文章于 2023-07-01 19:40:21 发布
阅读量99 收藏
点赞数
分类专栏： vue框架学习和项目常见问题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/plan_jok/article/details/112881414
版权

常用操作指令：

v-bind

示例1：基本使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-bind</title>
</head>
<body>
<div id="app">
  <img v-bind:src="imgUrl" alt="">
  <a href="http://www.baidu.com">百度一下</a>
  <a :href="aHref">百度一下</a>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
  el: '#app',
  data: {
    imgUrl: 'https://cn.vuejs.org/images/logo.png',
    aHref: 'http://www.baidu.com'
  }
})
</script>
</html>

其中‘:’是v-bind的语法糖

示例2：动态绑定class

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-bind动态绑定class</title>
  <style>
  .active {
    color: red;
  }
  </style>
</head>
<body>
<div id="app">
  <h2 :class="{active: isActive}">hello vue</h2>
  <button @click="switchColor">切换字体颜色</button>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
  el: '#app',
  data: {
    isActive: true
  },
  methods: {
    switchColor: function () {
      this.isActive = !this.isActive
    }
  }
})
</script>
</html>

示例3：动态绑定style

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-bind动态绑定style</title>
</head>
<body>
<div id="app">
  <h2 :style="{fontSize: finalSize + 'px',color: finalColor}">{{message}}</h2>
  <button @click="add">+</button>
  <button @click="sub">-</button>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
  el: '#app',
  data: {
    message: 'hello Vue',
    finalSize: 100,
    finalColor: 'green',
  },
  methods: {
    add: function () {
      this.finalSize++
    },
    sub: function () {
      this.finalSize--
    }
  }
})
</script>
</html>

示例4:v-bind和v-for结合使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-bind与v-for</title>
  <style>
  .active {
    color: red;
  }
  li {
    cursor: pointer;
  }
  </style>
</head>
<body>
<div id="app">
  <ul>
    <li v-for="(item,index) in movies" :class="{active: index === currentIndex}" @click="liClick(index)">{{item}}</li>
  </ul>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
  el: '#app',
  data: {
    movies: ['大话西游', '神话', '封神榜'],
    currentIndex: 0
  },
  methods: {
    liClick: function (index) {
      this.currentIndex = index
    }
  }
})
</script>
</html>

v-on

示例1：基本使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-on的基本使用</title>
</head>
<body>
<div id="app">
  <h2>{{counter}}</h2>
  <button v-on:click="increment">+</button>
  <button v-on:keyup.enter="decrement">-</button>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
  el: '#app',
  data: {
    counter: 0
  },
  methods: {
    increment: function () {
      this.counter++
    },
    decrement: function () {
      this.counter--
    }
  }
})
</script>
</html>

示例2：参数问题

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-on的参数问题</title>
</head>
<body>
<div id="app">
  <!--  当无参数时，()是否添加无影响-->
  <button @click="btnClick1">btnClick1-01</button>
  <button @click="btnClick1()">btnClick1-02</button>
  <br>
  
  <!--  在事件定义时，写方法时省略了小()，但是方法本身是需要一个参数的，这个时候Vue会默认将浏览器生产的event事件对象作为参数传入到方法-->
  <button @click="btnClick2">btnClick2-01</button>
  <!--  不加参数时为undefined-->
  <button @click="btnClick2()">btnClick2-02</button>
  <button @click="btnClick2('a')">btnClick2-03</button>
  <br>
  
  <!--  方法定义时，我们需要event对象，同时又需要其他参数-->
  <!--  在调用方法时,如何手动获取到浏览器参数的event对象:$event-->
  <button @click="btnClick3">btnClick3-01</button>
  <button @click="btnClick3('a','event')">btnClick3-02</button>
  <button @click="btnClick3('a',$event)">btnClick3-03</button>
  <button @click="btnClick3('a','event',$event)">btnClick3-04</button>


</div>
</body>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
  el: '#app',
  data: {
    message: 'hello vue'
  },
  methods: {
    btnClick1: function () {
      console.log('btnClick')
    },
    btnClick2: function (temp) {
      console.log(temp, 'btnClick2')
    },
    btnClick3: function (temp, event) {
      console.log(temp, event)
    }
  }
})
</script>
</html>

示例3:修饰符的使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-on的修饰符</title>
</head>
<body>
<div id="app">
  <!--1.stop修饰符-->
  <div @click="divClick">
    aaa
    <!--    阻止了事件冒泡-->
    <button @click="btnClick">btn1</button>
    <button @click.stop="btnClick">btn2</button>
  </div>
  
  <br>
  <!--2.prevent修饰符-->
  <form action="baidu">
    <input type="submit" value="提交" @click="submitClick">
    <input type="submit" value="提交2" @click.prevent="submitClick">
  </form>
  
  <!--  3.监听某个键盘的键帽-->
  <input type="text" @keyup="keyUp">
  <input type="text" @keyup.enter="keyUp">
  
  <!--  4.once修饰符的使用-->
  <button @click.once="onceClick">once</button>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
  el: '#app',
  methods: {
    divClick: function () {
      console.log('dicClick');
    },
    btnClick: function () {
      console.log('btnClick');
    },
    submitClick: function () {
      console.log('submitClick');
    },
    keyUp: function () {
      console.log('keyUp');
    },
    onceClick: function () {
      console.log('onceClick')
    }
  }
})
</script>
</html>

关于v-on的全部用法

v-if

示例1：v-if的基本使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-if</title>
</head>
<body>
<div id="app">
  <h2 v-if="message">{{message}}</h2>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
  el: '#app',
  data: {
    message: true
  }
})
</script>
</html>

示例2：v-if和v-else

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-if</title>
</head>
<body>
<div id="app">
  <h2 v-if="message">{{message}}</h2>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
  el: '#app',
  data: {
    message: true
  }
})
</script>
</html>

示例3：v-else-if

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-else-if</title>
</head>
<body>
<div id="app">
  <h2 v-if="score<60">&lt60</h2>
  <h2 v-else-if="score<80">&lt80</h2>
  <h2 v-else>&gt80</h2>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
  el: '#app',
  data: {
    score: 0
  }
})
</script>
</html>

v-for

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-for遍历数组和对象</title>
</head>
<body>
<div id="app">
  <!--  遍历数组-->
  <h2 v-for="item in list"> {{item}}</h2>
  <h2 v-for="(item,index) in list">{{item}}-{{index}}</h2>
  <!--  遍历对象-->
  <h2 v-for="value in people">{{value}}</h2>
  <h2 v-for="(value,name) in people">{{value}}-{{name}}</h2>
  <h2 v-for="(value,name,index) in people">{{value}}-{{name}}-{{index}}</h2>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
  el: '#app',
  data: {
    list: ['A', 'B', 'C'],
    people: {
      name: 'hyhy',
      age: 18,
      gender: 'male'
    }
  }
})
</script>
</html>

可响应式的数组方法

pop()
shift()
unshift
splice()
sort()
reverse()

v-model

示例1：v-model的基本使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-model的基本使用</title>
</head>
<body>
<div id="app">
  <input type="text" value="message" v-model="message">
  <h2>{{message}}</h2>
</div>


</body>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'hello Vue'
    }
  })
</script>
</html>

v-model主要用于实现表单的双向绑定

例如：

  • 在input框中改动，真实的message也会发生变化。
  • 同样在控制台中改变message的值，input框和h2标签中的内容同样会发生改变。

示例2：v-model的原理

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-model的原理</title>
</head>
<body>
<div id="app">
  <input type="text" :value="message" @input="valueChange($event)">
  <h2>{{message}}</h2>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue'
    },
    methods: {
      valueChange: function (event) {
        this.message = event.target.value
      }
    }
  })
</script>
</html>

v-model其实是一个语法糖，它背后的本质上是包含两个操作：

  • v-bind绑定一个value的属性
  • v-on指令给当前元素绑定input事件

上述两段代码的效果一致

v-model的几种使用实例

原生radio的使用

示例1： v-model与radio的结合使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-model与radio结合</title>
</head>
<body>
<div id="app">
  <label for="male">
    <!--    使用v-model时radio中的name可以省略-->
    <input type="radio" id="male" v-model="gender" value="男">男
  </label>
  <label for="female">
    <input type="radio" id="female" v-model="gender" value="女">女
  </label>
  <h2>{{gender}}</h2>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      gender: '男'
    }
  })
</script>
</html>

示例2：v-model与CheckBox的结合使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-mode与CheckBox的结合</title>
</head>
<body>
<div id="app">
  <!--  单选框-->
  <label for="licence">
    <input type="checkbox" id="licence" v-model="isAgree">同意协议
  </label>
  <h2>isAgree:{{isAgree}}</h2>
  <button :disabled="!isAgree">下一步</button>

  <br>
  <br>
  <br>

  <!--  多选框-->
  <input type="checkbox" value="篮球" v-model="hobbies">篮球
  <input type="checkbox" value="足球" v-model="hobbies">足球
  <input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
  <input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
  <h2>hobbies： {{hobbies}}</h2>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      isAgree: false,
      hobbies: []
    }
  })
</script>
</html>

示例3：v-model与checkbox结合-改

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-mode与CheckBox的结合-改</title>
</head>
<body>
<div id="app">
  <!--  多选框-->
  <label v-for="item in selectList" :for="item">
    <input type="checkbox" :value="item" v-model="hobbies">{{item}}
  </label>

  <h2>hobbies： {{hobbies}}</h2>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      isAgree: false,
      hobbies: [],
      selectList: ['篮球', '足球', '羽毛球', '乒乓球']
    }
  })
</script>
</html>

示例4：v-model与select的结合

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-model结合select</title>
</head>
<body>
<div id="app">
  <!--  单选-->
  <select name="fruit" v-model="fruit">
    <option value="苹果">苹果</option>
    <option value="香蕉">香蕉</option>
    <option value="榴莲">榴莲</option>
    <option value="橙子">橙子</option>
  </select>
  <h2>选择的水果是： {{fruit}}</h2>

  <br>
  <br>
  <br>


  <!--  多选-->
  <!--  可以通过ctrl选中多个-->
  <select name="fruit" v-model="fruits" multiple>
    <option value="苹果">苹果</option>
    <option value="香蕉">香蕉</option>
    <option value="榴莲">榴莲</option>
    <option value="橙子">橙子</option>
  </select>
  <h2>选择的水果是： {{fruits}}</h2>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      fruit: '苹果',
      fruits: []
    }
  })
</script>
</html>

v-model的几个修饰符

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-model的几个修饰符</title>
</head>
<body>
<div id="app">
  <!--  1.lazy修饰符：让数据在市区焦点或回车时才更新-->
  <input type="text" v-model.lazy="message">
  <h2>message: {{message}}</h2>

  <br>
  <br>

  <!--  2.number修饰符 ：让输入框的内容自动转换为数字类型：-->
  <input type="text" v-model.number="numberMessage">
  <h2>numberMessage: {{numberMessage}}</h2>
  <h2>type: {{typeof numberMessage}}</h2>

  <br>
  <br>

  <!--  3.trim修饰符：过来内容左右两边的空格-->
  <input type="text" v-model.trim="trimMessage">
</div>
</body>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '',
      numberMessage: '',
      trimMessage: ''
    }
  })
</script>
</html>

全部指令：

全部指令以及详细使用

plan_ b
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue基础-vue指令
Autumnxwq的博客
10-16 1053
Vue 基础指令
08-vue计算属性
plan_jok的博客
01-20 87
示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计算属性的基本使用</title> </head> <body> <div id="app"> <h2>{{firstName}}</h2> <h2>{{lastName}}</h2> &
vue click事件_vue指令用法
weixin_39830588的博客
12-12 941
vue指令指令式带有 v- 前缀的特殊特性v-text和v-html都属于指令将数据和dom做关联，当表达式的值改变时，响应式地作用在视图解决大胡子语法闪烁案例[v-cloak] { dispaly: none; }一般把v-cloak绑在Vue实例el属性绑定的节点上<!DOCTYPE html> <html lang="en"> <head> <m...
vue的几种常见指令 及使用方法
爬楼梯的前端小白的博客
07-14 1131
vue的几种常见指令，vue的点击事件@click，v-for循环事件
web---Vue常用指令
Allure泽宇的博客
05-19 1435
Vue一般常用指令
04-VUE 常用指令最佳实践
雨田说码
09-08 1400
文章目录背景分析Vue中的常用指令v-bindv-showv-if 和 v-elsev-else-ifv-forv-onv-htmlv-textv-model总结(Summary) 背景分析 传统的html并不支持表达式、分支语句、循环语句等结构的定义，为了弥补其不足很多前端框架，模板引擎通过在html元素中添加自定义属性，然后底层再借助解析引擎对html自定义属性进行处理，以这样的方式来增强html的功能。 Vue中的常用指令 v-bind 在html中假如希望元素的属性值随程序内容的发生而变化，可以借助
Vue---Vue常用特性
前端与计算机相关知识的分享，博主的qq523235674
02-26 504
一.常用特性概览 * 表单操作 * 自定义指令 * 计算属性 * 过滤器 * 侦听器 *声明周期 1.表单操作 2.表单域修饰符 * number:转化为数值 * trim : 去掉开始和结尾空格 *lazy ：将input事件切换change事件 <input type="number" v-model.number="age"> input事件当input输入框内容改变时触发，change事件当鼠标失去焦点时触发 3.自定义指令 1.为何需要自定义..
vue常用指令以及自定义指令
m0_52669454的博客
08-09 473
vue常用指令以及自定义指令
Vue 的常用指令--详解
合格程序猿
07-01 484
Vue 的常用指令--详解
vue-自定义指令设置及常用自定义指令
ANNENBERG的博客
08-09 1013
Vue自定义指令有全局注册和局部注册两种方式。先来看看注册全局指令的方式，通过方式注册全局指令。然后在入口文件中进行Vue.use()调用。批量注册指令，新建文件在main.js引入并调用下面分享几个实用的 Vue 自定义指令v-copyv-debouncev-emojiv-LazyLoad。...
vue常用指令代码实例总结
12-20
8. **ref**：用于在模板中注册一个唯一的ID，Vue实例的`$refs`属性可以用来访问这些元素，便于在JavaScript中直接操作。 9. **v-cloak**：这是一个CSS类，配合CSS规则如`[v-cloak]{display:none}`使用，可以避免Vue...
vue面试题目-vue经典面试题目-vue-Vue框架的核心概念-常用的功能和特性-性能优化-面试题目-面经
01-20
4. **Vue指令**： - 如`v-if/v-else/v-show`进行条件渲染，`v-for`进行循环渲染，`v-bind`绑定属性，`v-on`处理事件等。 5. **生命周期钩子函数**： - 包括`beforeCreate`、`created`、`beforeMount`、`mounted`...
Vue常用指令V-model用法
08-31
因此，对于数组操作，通常需要使用Vue提供的方法，如`push`、`pop`、`shift`、`unshift`、`splice`等，或者使用`v-model`配合`v-for`指令来实现动态数组的更新。 总的来说，Vue的`v-model`指令是实现数据双向绑定的...
el-vueDemo:vue个人练习项目
03-30
总的来说，"el-vueDemo"项目是一个综合性的Vue学习实践，涵盖了Vue的基本特性和常用库的运用，对于熟悉和巩固Vue开发技能大有裨益。通过这个项目，开发者不仅可以了解Vue的核心概念，还能深入学习如何构建一个完整的...
《vue应用程序开发-Vue.js内置指令》.pptx
最新发布
05-13
通过以上介绍，我们了解了 Vue.js 中几种常用的基本指令及其应用场景。这些指令能够帮助开发者更高效地管理和操作 DOM，同时提升用户体验。理解并熟练掌握这些指令对于 Vue 开发者来说至关重要。接下来的章节将继续...
flask文件发送与js前端接收
plan_jok的博客
11-19 2565
flask后台文件发送 try: # 文件数据处理 res = export_all_files_list() # 通过response封装数据 response = make_response(res) # 设置响应信息 response.headers['content-type'] = 'application/octet-stream;charset=utf-8' response.he
10-组件化
plan_jok的博客
01-24 1084
组件化开发 在实际开发中，一个页面的功能可能及其复杂，我们需要将其拆分成各个功能模块组件，以此达到复用和方便管理的目的。 例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。 示例1.1：不使用组件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>不使用模板</title> </head&
less 和less-loader安装问题
plan_jok的博客
11-10 1028
vue-cli和less-loader的某些版本存在冲突，建议遇见时指定less-loader进行强制安装 npm install less --save -dev npm install less-loader --save -dev 或者 npm install less-loader@版本号 --save -dev -force
axios封装request配置
plan_jok的博客
11-11 920
import axios from 'axios' import Qs from 'qs' //axios的get方法中使用params时对于js数组类型的参数的默认操作比较诡异，会使得参数名后带上'[]'字符串，可以使用qs自带的 arrayFormat 参数配置解决这个问题 export function request(config) { const service = axios.create({ headers: {'content-type': 'application/json
"专高2-Vue(1)：VUE介绍、指令及实例练习
指令是Vue提供的一种特殊的特性，可以用于对DOM进行操作。在数据绑定指令部分，介绍了v-text、v-html和v-model等数据绑定指令的使用方法和注意事项。数据绑定指令可以将数据和DOM进行绑定，实现双向数据绑定效果。在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值