devbox
从前慢现在也慢
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue基础知识_new vue

作者：从前慢现在也慢 | 2024-03-20 00:54:34

赞

踩

new vue

一、概述

Vue是一款渐进式JavaScript前端框架

Vue 只关注视图层， 采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

作者：尤雨溪
官网：cn.vuejs.org
插件案例网址：GitHub - opendigg/awesome-github-vue: Vue相关开源项目库汇总

前端框架三架马车

  •     Vue
  •     React
  •     Angular

特点:

  1.     简单，上手方便
  2.     结合Angular指令与react组件思维
  3.     生态丰富（插件多）API文档完善

二、实例化参数new Vue

el："#app"------选择目标标签
data：{ }------指定数据
data( ){return{ }}------一个函数返回一个对象
methods：{ }------定义事件

示例：

  1. <script>
  2. new Vue({
  3.   el: '#app',
  4.   data: {
  5.     message: '大家好！',
  6.   },
  7.   methods:{
  8.     
  9.   }
  10. })
  11. </script>

三、computed计算

从现有数据计算出新的数据

例子：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6. 	<!-- 引入vue.js -->
  7.     <script src="../vue.js"></script>
  8. 	<style type="text/css">
  9. 	</style>
  10. </head>
  11. <body>
  12. <div id="app">
  13.     <h1>计算：从现有数据计算出新的数据</h1>
  14. 	<p>n1:{{n1}}<input type="text" v-model.number="n1" /></p>
  15. 	<p>n2:{{n2}}</p>
  16. 	<p>n3:{{n3}}</p>
  17. </div>
  18. <script>
  19.     new Vue({
  20.         el:"#app",
  21.         data:{
  22.            n1:10,
  23. 		   n2:5,
  24.         },
  25.         computed:{
  26. 			// 计算
  27.             "n3":function(){
  28. 				return this.n1+this.n2;
  29. 			}
  30.         }
  31.     })
  32. </script>
  33. </body>
  34. </html>

四、watch监听

监听数据的变化，并执行回调函数handler

  1. watch:{
  2.    "num":{
  3.       handler(nval,oval){},
  4.       deep：true
  5.    }
  6. }

五、自定义指令

bind绑定执行一次
insert插入执行一次
update每更新执行一次

  1. directives:{
  2. "focus":{
  3.      update(el,binding){
  4.        if(binding.value){ el.focus(); }
  5.      }
  6.   }
  7. }
  8. <input v-focus="flag">

六、过滤/管道（格式化数据）

例子：

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title></title>
  6. 		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
  7. 	</head>
  8. 	<body>
  9. 		<div id="app">
  10. 			<p>num:{{num}}</p>
  11. 			<p><input type="text" v-model.number="num"/></p>
  12. 			<!-- 显示num 使用fix管道 -->
  13. 			<p>{{num|fix}}</p>
  14. 			<p>{{3.14145|fix(4)}}</p>
  15. 			<p>{{5432185|fix(2)}}</p>
  16. 			<p>{{5432185|fix|tel(",")}}</p>
  17. 		</div>
  18. 		<script type="text/javascript">
  19. 			new Vue({
  20. 				el:"#app",
  21. 				data:{
  22. 					num:100,
  23. 				},
  24. 				// 过滤/管道（格式化数据）
  25. 				filters:{
  26. 					// 过滤名称，value过滤之前的值,arg管道的参数
  27. 					fix(value,arg=2){
  28. 						// 返回转换为小数后的值
  29. 						return value.toFixed(arg);
  30. 					},
  31. 					tel(value,arg="-"){
  32. 						// 1.转换为字符串，转数字，对数组遍历
  33. 						// 2.如果是第二位或第六位，加分隔符
  34. 						
  35. 						// 转换为数组
  36. 						var arr = String(value).split('');
  37. 						// 返回字符串
  38. 						var str = '';
  39. 						// 遍历数组
  40. 						arr.forEach((item,index)=>{
  41. 							// 默认加当前遍历元素
  42. 							str += item;
  43. 							if(index==0||index==3){
  44. 								str += arg;
  45. 							}
  46. 						})
  47. 						return str;
  48. 					},
  49. 				}
  50. 			})
  51. 		</script>
  52. 	</body>
  53. </html>

七、指令

指令的值可以是简单的JavaScript命令
文本渲染指令

  • {{value}}
  • v-text
  • v-html (渲染html文本)

综合案例：

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title></title>
  6. 		<script src="./vue.js"></script>
  7. 	</head>
  8. 	<body>
  9. 		<div id="app">
  10. 			<h3>{{msg}}</h3>
  11. 			<!-- v-model内置指令 -->
  12. 			<input type="text" v-model="msg" />
  13. 			<p v-text="msg"></p>
  14.             <!-- 重复三次 -->
  15. 			<p v-text="msg.repeat(3)"></p>
  16. 			<!-- v-html识别标签 -->
  17. 			<p v-html="msg2"></p>
  18. 		</div>
  19. 		<script type="text/javascript">
  20. 			new Vue({
  21. 				el:"#app",//指定模板标签
  22. 				data:{
  23. 					msg:"我爱泥",
  24. 					msg2:"<strong>安阳</strong>是个好地方"
  25. 				}//指定数据
  26. 			})
  27. 		</script>
  28. 	</body>
  29. </html>

属性绑定

  • v-bind : 属性="指令值"
  • :属性="值"

条件渲染

  • v-show (css方式隐藏)
  • v-if
  • v-else-if
  • v-else

区别：频繁切换用v-show
           一次性切换用v-if
           v-show隐藏是通过css的方式隐藏节点


列表渲染

  • v-for = "item in list"（list要遍历的数组，item当前遍历的项目）
  • v-for = "(item,index) in list"（index 当前遍历项的索引 从0开始）
  • 使用v-for务必v-bind:key=" "  :key="值"

例子：

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title></title>
  6. 		<!-- 引入vue.js -->
  7. 		<script src="./vue.js"></script>
  8. 	</head>
  9. 	<body>
  10. 		<div id="app">
  11. 			<p v-for="item in list">{{item}}</p>
  12. 			<!-- key优化vue的渲染（要求是唯一）推荐使用：key优化 -->
  13. 			<h3 v-for="(item,index) in user" :key="item.name">
  14. 				姓名：{{item.name}},
  15. 				年龄：{{item.age}}
  16. 			</h3>
  17. 		</div>
  18. 		<script type="text/javascript">
  19. 			new Vue({
  20. 				el:"#app",//指定模板
  21. 				data:{
  22. 					list:["vue","react","angular"],
  23. 					user:[
  24. 						{name:"beibei",age:19},
  25. 						{name:"dian",age:17},
  26. 						{name:"yqq",age:18}
  27. 					]
  28. 				},
  29. 			})
  30. 		</script>
  31. 	</body>
  32. </html>

    v-for特点：

           值必须是唯一的
           添加key属性可以优化v-for的渲染
           让vue更好识别当前渲染的节点
           特别是在排序、过滤等操作的时候
           不建议key的值使用循环的索引

事件指令

v-on:事件类型="响应函数"
v-on:click="say( )"

@click="say( )"   事件的简写
@click="num++"   行内事件响应

事件修饰符

  •     . stop 阻止事件冒泡
  •     . prevent 阻止默认事件
  •     . once 只执行一次

    @click.stop.once.prevent="num++"
    事件的修饰符可以同时写多个

按键修饰符

  • @keyup.up
  • @keyup.down
  • .left
  • .right
  • .delete
  • .enter
  • .space
  • .esc

按键修饰符例子：

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title></title>
  6. 		<!-- 引入vue.js -->
  7. 		<script src="../vue.js"></script>
  8. 	</head>
  9. 	<body>
  10. 		<div id="app">
  11. 			<!-- @keyup监听键盘的弹起 -->
  12. 			<!-- @keyup.up 监听键盘上键，弹起@keyup.enter监听回车键 -->
  13. 			<!-- list.unshift(item)在list最前面插入item -->
  14. 			<input type="text" v-model="num"
  15. 			@keyup.up="num++"
  16. 			@keyup.down="num--"
  17. 			@keyup.enter="list.unshift(num)"
  18. 			/>
  19. 			<p v-for="item in list" :key="item">{{item}}</p>
  20. 		</div>
  21. 		<script type="text/javascript">
  22. 			new Vue({
  23. 				el:"#app",
  24. 				data:{
  25. 					num:1,
  26. 					list:[]
  27. 				},
  28. 			})
  29. 		</script>
  30. 	</body>
  31. </html>

$event   事件监听对象

表单绑定指令

v-model 让表单的值与数据绑定再一起

<input type="checkbox">   默认选中值是true，不选中值是false

<input type="checkbox" name="fruit" v-model="list">   

//如果是多个选中的值动态添加到list数组中


修饰符

  •     .number 转数字

<input type="text" v-model.number="n1" />

  •     .trim 移除空白

<input type="text" v-model.trim="temp" >

类绑定


 1.属性  :class="值"
 2. 对象  当对象的属性为真，该属性作为class绑定

:class="{'key1':true,'key2':false}"
//key1的值为真，key1被绑定


 3. 数组方式 :class="[c1,c2,c3]"

样式绑定

样式属性名去掉 - 下一个字母大写

:style="{color:'res','fontSize':'48px'}"

八、动画 

什么是动画？
        两个状态间的过度效果/变化
        vue的动画是在元素的显示与隐藏之间切换的
        vue的动画需要内置组件<transition></transition>包裹
        vue会自动在动画的进入过程与离开过程添加类名
        真正实现动画，还需自己写css

内置组件

1.transition

  • name名称
  • mode:模式

        in-out先进再出
        out-in先出再进

  1. <transition name="fade" 
  2. 	mode="in-out"
  3. 	enter-active-class="slideInRight animated"
  4. 	leave-active-class="slideOutLeft animated">
  5. </transition>
  • enter-active-class 指定进入类名
  • leave-active-calss 指定离开类名

2.transition-group

动画类

1. v-enter-active 进入过程
       v-enter进入前
       v-enter-to进入后
2. v-leave-active 离开过程
       v-leave离开前

3.创建动画形式

动画类6个css创建

keyframes关键帧
.fade-enter-active{animation: fadeIn 1s ease}
.fade-leave-active{animation: fadeOut 1s ease}


引用第三方动画库
指定进入的class与离开的class

<transition enter-active-class="slideIn animated"
leave-active-class="hinge animated">

 九、组件

一段可以重复利用的代码块

全局组件
        Vue component("组件名"，{template:``})
局部组件
        const steper = {template:``}
注册组件
        new Vue({
           components:{steper}
        })
使用组件
        <steper></steper>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/269493
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号