Vue入门 基本使用 与 事务管理【1】

举报
陶然同学 发表于 2022/06/29 00:06:39 2022/06/29
【摘要】 目录 什么是Vue 基本使用         插值表达式:{{}}         标签体操作:v-text&v-html         循环语句:v-for     &nbs...

目录

什么是Vue

基本使用

        插值表达式:{{}}

        标签体操作:v-text&v-html

        循环语句:v-for

        属性绑定--普通属性:v-bind:xxx

        属性绑定--style属性:v-bind:style

        控制语句:v-show&v-if

        表单数据绑定:v-model

事务操作

        事件绑定:v-on:事件名

        事件绑定--this关键字

        案例:查询所有

        事件修饰符

        按键修饰符


什么是Vue

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。

  1. Vue 的核心库只关注视图层,也就是只处理页面。
  2. Vue提供的一套JS框架,通常称为vue全家桶。

渐进式,也就是说可以在已有的项目中部分使用Vue,逐渐过渡到整个项目都使用Vue,最后完全使用Vue全家桶来完成整个项目。可以在HTML导入js当成jquery使用、也可以使用vue全家桶进行单页开发

基本使用

        插值表达式:{{}}

{{插值表达式}}

1.支持data区域数据的显示。例如:{{message}}

2.支持表达式的计算。例如:{{1+2+3}} 、 {{'Hello' + ' World'}}

3.支持函数的调用。例如:{{'Hello'.split('')}}


  
  1. <html lang="en">
  2. <head>
  3. <meta charset="UTF-8">
  4. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. <script src = "js/vue.js"></script>
  8. </head>
  9. <body>
  10. <div id = "app">
  11. {{msg1}} <br>
  12. {{msg1 + msg2}} <br>
  13. {{msg2.split('')}} <br>
  14. </div>
  15. </body>
  16. <script>
  17. new Vue({
  18. el:'#app',
  19. data:{
  20. msg1 : 'Hello',
  21. msg2 : 'World'
  22. }
  23. })
  24. </script>
  25. </html>

  

      标签体操作:v-text&v-html

<!-- v-text 以【文本】方式处理标签体 -->

<标签 v-text=””></标签>

<!-- v-html 以【html标签】方式处理标签体 -->

<标签 v-html=””></标签>


  
  1. <html lang="en">
  2. <head>
  3. <meta charset="UTF-8">
  4. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. <script src = "js/vue.js"></script>
  8. </head>
  9. <body>
  10. <div id = "app">
  11. <div v-text="msg1"></div>
  12. <div v-text="msg2"></div>
  13. <div v-html="msg1"></div>
  14. <div v-html="msg2"></div>
  15. </div>
  16. </body>
  17. <script>
  18. new Vue({
  19. el: '#app',
  20. data: {
  21. msg1 : '普通文本',
  22. msg2 : `<a href = 'http://www.czxy.com'>超链接</a>`,
  23. }
  24. })
  25. </script>
  26. </html>

        

        循环语句:v-for

<!--完整写法-->

<标签 v-for=”(变量,索引) in 数组|集合> 

{{变量}} , {{索引}}

</标签>

<!--简化写法-->

<标签 v-for=”变量in 数组|集合>

</标签>


  
  1. <html lang="en">
  2. <head>
  3. <meta charset="UTF-8">
  4. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. <script src = "js/vue.js"></script>
  8. </head>
  9. <body>
  10. <div id = "app">
  11. <h2>普通数据数据遍历</h2>
  12. <span v-for = "(un,index) in arr">
  13. {{index}} {{un}} <br>
  14. </span>
  15. <h2>对象数组数据遍历</h2>
  16. <table border = "1">
  17. <tr>
  18. <td>编号</td>
  19. <td>学号</td>
  20. <td>姓名</td>
  21. <td>年龄</td>
  22. </tr>
  23. <tr v-for="(student,index) in list">
  24. <td>{{index + 1}}</td>
  25. <td>{{student.id}}</td>
  26. <td>{{student.username}}</td>
  27. <td>{{student.age}}</td>
  28. </tr>
  29. </table>
  30. </div>
  31. </body>
  32. <script>
  33. new Vue({
  34. el : '#app',
  35. data : {
  36. arr : ['张三','李四','王五'],
  37. list : [
  38. {id : 's001',username : '张三',age : '18'},
  39. {id : 's002',username : '李四',age : '21'},
  40. {id : 's003',username : '王五',age : '25'},
  41. ]
  42. }
  43. })
  44. </script>
  45. </html>

        属性绑定--普通属性:v-bind:xxx

<!--完整写法-->

<标签 v-bind:属性名=””></标签>

<!--省略写法, v-bind可以省略 -->

<标签 :属性名=””></标签>

1.如果需要显示data区域的数据,直接写. 例如: url

2.如果需要显示普通字符串,需要单引号. 例如: ‘?username=jack’

3.data区域的数据和普通字符串可以通过+连接


  
  1. <html lang="en">
  2. <head>
  3. <meta charset="UTF-8">
  4. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. <script src = "js/vue.js"></script>
  8. </head>
  9. <body>
  10. <div id = "app">
  11. <h2>超链接展示</h2>
  12. <a href="url">第1个链接</a> <br>
  13. <a v-bind:href="url">第2个链接</a> <br>
  14. <a :href="url">第3个链接</a> <br>
  15. <a :href="url + '?uid=' + uid">第3个链接</a> <br>
  16. <h2>下拉列表展示</h2>
  17. <select name="" id="">
  18. <option value="">--请选择--</option>
  19. <option v-for="(cls,index) in list" :value="cls.id">{{cls.name}}</option>
  20. </select>
  21. </div>
  22. </body>
  23. <script>
  24. new Vue({
  25. el : '#app',
  26. data : {
  27. url : 'http://www.czxy.com',
  28. uid : 'u001',
  29. list : [
  30. {id : 'c001',name : 'Java12班',desc : '....'},
  31. {id : 'c002',name : 'Java34班',desc : '....'},
  32. {id : 'c003',name : 'Java56班',desc : '....'},
  33. ]
  34. }
  35. })
  36. </script>
  37. </html>

        属性绑定--class:v-bind:class

方式1: 字符串,必须使用单引号

<标签 v-bind:class=”’类名’”></标签>

方式2: 对象,key是类名; value是Boolean值,是否显示. (对象数据可以在data区域)

<标签 v-bind:class=”{类名:true , ’类名2: false}></标签>

方式3: 数组,相当于方法2的简化版,所有都是true 

<标签 v-bind:class=”[类名, ’类名2]></标签>


  
  1. <html lang="en">
  2. <head>
  3. <meta charset="UTF-8">
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  6. <title>Document</title>
  7. <script src="js/vue.js"></script>
  8. <style>
  9. .myClass {
  10. height : 10px; /*高度*/
  11. width : 300px; /*宽度*/
  12. border: 1px solid #000; /*边框:粗细 样式 颜色*/
  13. background-color: #f00; /*背景色*/
  14. }
  15. .myClass2 {
  16. width : 600px;
  17. }
  18. </style>
  19. </head>
  20. <body>
  21. <div id="app">
  22. <h2>样式展示</h2>
  23. <div class="myClass"></div>
  24. <div v-bind:class="mc"></div>
  25. <div v-bind:class="'myClass'"></div>
  26. <div class="myClass myClass2"></div>
  27. <div v-bind:class="['myClass','myClass2']"></div>
  28. <div v-bind:class="{'myClass': true,'myClass2': true}"></div>
  29. </div>
  30. </body>
  31. </html>
  32. <script>
  33. new Vue({
  34. el: '#app',
  35. data: {
  36. mc: 'myClass',
  37. }
  38. })
  39. </script>

        属性绑定--style属性:v-bind:style

方式1: 对象,  key样式名, value样式值 . 

//key和value需要使用单引号

//key可以不使用单引号,需要将含-命名的属性进行驼峰命名 例如:abc-def 写成 abcDef

<标签 v-bind:style=”{样式名:样式值, ’样式名2: ’样式值2}></标签>

方式2: 数组, 运行绑定多个对象

<标签 v-bind:class=”[对象名, 对象名2]></标签>


  
  1. <html lang="en">
  2. <head>
  3. <meta charset="UTF-8">
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  6. <title>Document</title>
  7. <script src="js/vue.js"></script>
  8. </head>
  9. <body>
  10. <div id="app">
  11. <!--
  12. 1.key和value需要使用单引号
  13. 2.key可以不使用单引号,需要将含-命名的属性进行驼峰命名,例如:font-size 写成 fontSize
  14. 3.value如果不使用引号,表示变量
  15. -->
  16. <div v-bind:style="{'background-color':'#f00',fontSize:'40px','text-align': align}">测试数据</div>
  17. </div>
  18. </body>
  19. </html>
  20. <script>
  21. new Vue({
  22. el: '#app',
  23. data: {
  24. align : 'center'
  25. }
  26. })
  27. </script>

        控制语句:v-show&v-if

<!--控制标签是否显示, 通过display控制显示或隐藏 -->

<标签 v-show=”true|false”></标签>

<!--控制标签是否存在 -->

<标签 v-if=”true|false”></标签>


  
  1. <html lang="en">
  2. <head>
  3. <meta charset="UTF-8">
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  6. <title>Document</title>
  7. <script src="js/vue.js"></script>
  8. </head>
  9. <body>
  10. <div id="app">
  11. 变量值:{{isShow}} <br/>
  12. <!-- 通过样式display控制是否显示 -->
  13. <div v-show="isShow">show控制的内容</div>
  14. <!-- 通过html源码是否存在,控制是否显示 -->
  15. <div v-if="isShow">if控制的内容</div>
  16. <input type="button" @click="isShow=!isShow" value="切换">
  17. </div>
  18. </body>
  19. </html>
  20. <script>
  21. new Vue({
  22. el: '#app',
  23. data: {
  24. isShow : true
  25. }
  26. })
  27. </script>

        表单数据绑定:v-model

  1. 通过 v-model 可以完成数据双向绑定.
    1. 数据data区域 绑定 视图区域, 如果data数据区域的数据发生改变, 自动更新表单标签的显示
    2. 视图区域 绑定 数据data区域 , 如果表单标签的数据发生改变,自动更新data区域存放的数据.

<表单元素标签  v-model=”data区域属性名>


  
  1. <html lang="en">
  2. <head>
  3. <meta charset="UTF-8">
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  6. <title>Document</title>
  7. <script src="js/vue.js"></script>
  8. </head>
  9. <body>
  10. <div id="app">
  11. 用户名:{{username}} <br/>
  12. <input type="text" v-model="username">
  13. </div>
  14. </body>
  15. </html>
  16. <script>
  17. new Vue({
  18. el: '#app',
  19. data: {
  20. username : 'jack'
  21. }
  22. })
  23. </script>

事务操作

        事件绑定:v-on:事件名

<!--完整写法-->

<标签 v-on:事件名=函数名></标签>

<!--简化写法-->

<标签 @事件名=函数></标签>

<!--常见事件-->

<标签 v-on:click=函数> </标签> //点击事件

<标签 v-on:focus=函数> </标签> //获得焦点事件

<标签 v-on:blur=函数> </标签> //失去焦点事件


  
  1. <html lang="en">
  2. <head>
  3. <meta charset="UTF-8">
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  6. <title>Document</title>
  7. <script src="js/vue.js"></script>
  8. </head>
  9. <body>
  10. <div id="app">
  11. <input type="button" v-on:click="show" value="第1个按钮"> <br/>
  12. <input type="button" @click="show2" value="第2个按钮"> <br/>
  13. <input type="button" @click="show3" value="第3个按钮"> <br/>
  14. </div>
  15. </body>
  16. </html>
  17. <script>
  18. new Vue({
  19. el: '#app',
  20. methods: {
  21. show : function() {
  22. alert('匿名函数')
  23. },
  24. show2 : () => {
  25. alert('箭头函数')
  26. },
  27. show3() {
  28. alert('函数简写')
  29. }
  30. },
  31. })
  32. </script>

        事件绑定--this关键字

  1. 在vue中,某一个成员需要使用另一个成员,需要通过”this.”进行引用

  
  1. <html lang="en">
  2. <head>
  3. <meta charset="UTF-8">
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  6. <title>Document</title>
  7. <script src="js/vue.js"></script>
  8. </head>
  9. <body>
  10. <div id="app">
  11. 结果: {{isShow}} <br/>
  12. <input type="button" v-on:click="change" value="切换"> <br/>
  13. <input type="button" v-on:click="show" value="调用"> <br/>
  14. </div>
  15. </body>
  16. </html>
  17. <script>
  18. new Vue({
  19. el: '#app',
  20. data:{
  21. isShow: true
  22. },
  23. methods: {
  24. change() {
  25. this.isShow = !this.isShow
  26. },
  27. show() {
  28. // 调用chang()函数
  29. this.change()
  30. }
  31. },
  32. })
  33. </script>

        事件修饰符

  1. vue 通过事件修饰符对js事件进行细节控制。

<标签 v-on:事件.修饰符=函数>

</标签>

  1. 常见的修饰符有

修饰符

描述

.prevent

阻止浏览器默认行为

.stop

阻止浏览器事件冒泡

.once

只触发1次


  
  1. <html lang="en">
  2. <head>
  3. <meta charset="UTF-8">
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  6. <title>Document</title>
  7. <script src="js/vue.js"></script>
  8. </head>
  9. <body>
  10. <div id="app">
  11. <a href="http://www.czxy.com" @click.prevent="go">访问学校官网</a>
  12. </div>
  13. </body>
  14. </html>
  15. <script>
  16. new Vue({
  17. el: '#app',
  18. methods: {
  19. go() {
  20. alert('我执行了后,默认跳转到学校官网!添加prevent后将不跳转。')
  21. }
  22. },
  23. })
  24. </script>

        按键修饰符

  1. vue允许为 v-on 在监听键盘事件时, 使用按键修饰符, 约束事件的触发
  2. 键盘事件:  keyup和keydown

<标签 v-on:事件.修饰符=函数 >

</标签>

  1. 常见按键修饰符

按键修饰符

描述

.enter

//回车键

.tab

//Tab键

.delete (捕获 "删除" 和 "退格" 键)

//Backspace键或Delete键

.esc

//Esc键

.space

//空格键

.up

//上键

.down

//下键

.left

//左键

.right

//右键

.ctrl

//Ctrl键

.alt

//Alt键

.shift

//Shift键


  
  1. <html lang="en">
  2. <head>
  3. <meta charset="UTF-8">
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  6. <title>Document</title>
  7. <script src="js/vue.js"></script>
  8. </head>
  9. <body>
  10. <div id="app">
  11. <!-- 文本框 通过 v-model 绑定数据
  12. 在通过keyup监听键盘事件,并在回车(enter)时触发 -->
  13. <input type="text" v-model="keyword" @keyup.enter="show">
  14. </div>
  15. </body>
  16. </html>
  17. <script>
  18. new Vue({
  19. el: '#app',
  20. data:{
  21. keyword: ''
  22. },
  23. methods: {
  24. show() {
  25. console.info( this.keyword )
  26. }
  27. }
  28. })
  29. </script>

文章来源: blog.csdn.net,作者:陶然同学,版权归原作者所有,如需转载,请联系作者。

原文链接:blog.csdn.net/weixin_45481821/article/details/121848031

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。