• 前端框架Vue语法部分(一)

     一.mvvc模型:

    vue中data的所有属性都会出现在 vue实例上，可直接用vue实例调用

    二 插值语法:  用于解析标签内容

    用 {{}} 读取表达式或数据内容（表达式能自动获取data中的数据）

    三.指令语法 用于解析标签属性 形式都为v-XXX 

    1.数据绑定: 

    ①单向绑定:v-bind 可简写为冒号   举例::href="url">      冒号中的值将作为表达式执行

    数据只能从data流向页面

    ②双向绑定:v-model 举例:v-model:value="name">

    可简写为: v-model="name">

    数据可以在data和页面互相流通，一般应用在表单类元素上（如:input、select等）

    2.事件处理: 

    ①使用v-on:xxx或 @xxx 绑定事件， 其中xxx是事件名

    ②事件的回调需要配置在methods对象中

    ③modthods中配置的函数this都指向 组件实例对象

    ④方法传参：加小括号即可         例如：@click="demo" 和@click"demo($event)"效果一致，但后者可以传参

    (注意 : 在插入语法{{}}中调用函数获取返回值时，需要加括号，否则加入的将是整个函数)

    3.事件修饰: 

    1.prevent: 阻止默认事件

    2.stop: 阻止事件冒泡

    3.once: 事件只触发一次

    1. 阻止冒泡示例:
    2. <button @click.stop="showInfo">点我button>

    4.键盘事件: 

    vue中常见的按键别名: 回车enter 、删除 delete 、退出 esc、 空格space、 换行tab、上 up 下 down、左 left、右 right；

    两种获取方法：

    keyup: 按下后抬起才触发

    kepdown: 按下就触发

    1. //示例:
    2. <body>
    3.     <div id="root">
    4.     <input type="text" @keydown.up="showInfo">
    5.     div>
    6.  
    7.  
    8.     new Vue({
    9.         el:'#root',
    10.         data:{      //数据,只有在data里的数据才会做数据劫持和数据代理
    11.         },
    12.         methods:{   //方法
    13.             showInfo(e){
    14.                 console.log(e.target.value);
    15.             }
    16.         }
    17.     })
    18. body>

     5.计算属性 

    1.定义: 要用的属性不存在，要通过已有的属性计算得来（属性指vue实例中的数据，而不是在外面定义的值）

    2.原理：底层借助了Object.defineproperty方法提供的getter和setter。

    3.get函数什么时候执行？

    ①初次读取时会被执行一次

    ②当依赖的数据发生改变时会被再次调用

    5.备注：

    ①计算属性最终会出现在vue实例中，直接读取使用即可

    ②如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生更新

    举例：拼接姓名

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8" />
    5. 		<title>姓名案例_methods实现title>
    6. 		
    7. 		<script type="text/javascript" src="../js/vue.js">script>
    8. 	head>
    9. 	<body>
    10. 		
    11. 		<div id="root">
    12. 			姓：<input type="text" v-model="firstName"> <br/><br/>
    13. 			名：<input type="text" v-model="lastName"> <br/><br/>
    14. 			全名：<span>{{fullName()}}span>    //直接调用fullName()方法获取全名
    15. 		div>
    16. 	body>
    17.  
    18. 	<script type="text/javascript">
    19. 		new Vue({
    20. 			el:'#root',
    21. 			data:{
    22. 				firstName:'张',
    23. 				lastName:'三'
    24. 			},
    25. 			methods: {
    26.                 //完整写法（有可能要修改）
    27.                    /*
    28.            fullName:{
    29.             get(){
    30.                 return this.firstName + '-' + this.lastName;
    31.                 },    
    32.             set(value){
    33.                 const arr =value.split('-')
    34.                 this.firstName = arr[0]
    35.                 this.lastName = arr[1]
    36.                 }
    37.                         }
    38.                     */
    39. 				fullName(){    //只读不改时可以用该简写方式
    40. 					return this.firstName + '-' + this.lastName
    41. 				}
    42. 			},
    43. 		})
    44. 	script>
    45. html>

    6.监视属性

           
      ①      监视属性watch：
                        1.当被监视的属性变化时, 回调函数(handler)自动调用, 进行相关操作
                        2.监视的属性必须存在，才能进行监视！！
                        3.监视的两种写法：
                                (1).new Vue时传入watch配置
                                (2).通过vm.$watch监视

    举例:
            

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8" />
    5. 		<title>天气案例_监视属性title>
    6. 		
    7. 		<script type="text/javascript" src="../js/vue.js">script>
    8. 	head>
    9. 	<body>
    10.  
    11. 		
    12. 		<div id="root">
    13. 			<h2>今天天气很{{info}}h2>
    14. 			<button @click="changeWeather">切换天气button>
    15. 		div>
    16. 	body>
    17.  
    18. 	<script type="text/javascript">
    19. 		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    20. 		
    21. 		const vm = new Vue({
    22. 			el:'#root',
    23. 			data:{
    24. 				isHot:true,
    25. 			},
    26. 			computed:{
    27. 				info(){
    28. 					return this.isHot ? '炎热' : '凉爽'
    29. 				}
    30. 			},
    31. 			methods: {
    32. 				changeWeather(){
    33. 					this.isHot = !this.isHot
    34. 				}
    35. 			},
    36. 			/* watch:{
    37. 				isHot:{
    38. 					immediate:true, //初始化时让handler调用一下
    39. 					//handler什么时候调用？当isHot发生改变时。
    40. 					handler(newValue,oldValue){
    41. 						console.log('isHot被修改了',newValue,oldValue)
    42. 					}
    43. 				}
    44. 			} */
    45. 		})
    46.  
    47. 		vm.$watch('isHot',{
    48. 			immediate:true, //初始化时让handler调用一下
    49. 			//handler什么时候调用？当isHot发生改变时。
    50. 			handler(newValue,oldValue){
    51. 				console.log('isHot被修改了',newValue,oldValue)
    52. 			}
    53. 		})
    54. 	script>
    55. html>

    ②深度监视:
                    深度监视：
                            (1).Vue中的watch默认不监测对象内部值的改变（一层）。
                            (2).配置deep:true可以监测对象内部值改变（多层）。
                    备注：
                            (1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
                            (2).使用watch时根据数据的具体结构，决定是否采用深度监视。
     

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8" />
    5. 		<title>天气案例_深度监视title>
    6. 		
    7. 		<script type="text/javascript" src="../js/vue.js">script>
    8. 	head>
    9. 	<body>
    10. 		
    11. 		<div id="root">
    12. 			<h2>今天天气很{{info}}h2>
    13. 			<button @click="changeWeather">切换天气button>
    14. 			<hr/>
    15. 			<h3>a的值是:{{numbers.a}}h3>
    16. 			<button @click="numbers.a++">点我让a+1button>
    17. 			<h3>b的值是:{{numbers.b}}h3>
    18. 			<button @click="numbers.b++">点我让b+1button>
    19. 		div>
    20. 	body>
    21.  
    22. 	<script type="text/javascript">
    23. 		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    24. 		
    25. 		const vm = new Vue({
    26. 			el:'#root',
    27. 			data:{
    28. 				isHot:true,
    29. 				numbers:{
    30. 					a:1,
    31. 					b:1,
    32. 			},
    33. 			computed:{
    34. 				info(){
    35. 					return this.isHot ? '炎热' : '凉爽'
    36. 				}
    37. 			},
    38. 			methods: {
    39. 				changeWeather(){
    40. 					this.isHot = !this.isHot
    41. 				}
    42. 			},
    43. 			watch:{
    44. 				isHot:{
    45. 					// immediate:true, //初始化时让handler调用一下
    46. 					//handler什么时候调用？当isHot发生改变时。
    47. 					handler(newValue,oldValue){
    48. 						console.log('isHot被修改了',newValue,oldValue)
    49. 					}
    50. 				},
    51. 				//监视多级结构中某个属性的变化
    52. 				/* 'numbers.a':{        //注意用完整的key格式，加上引号
    53. 					handler(){
    54. 						console.log('a被改变了')
    55. 					}
    56. 				} */
    57. 				//监视多级结构中所有属性的变化
    58. 				numbers:{
    59. 					deep:true,
    60. 					handler(){
    61. 						console.log('numbers改变了')
    62. 					}
    63. 				}
    64. 			}
    65. 		})
    66.  
    67. 	script>
    68. html>

    7.监视属性和计算属性的区别:

    computed和watch之间的区别：

    1.computed能完成的功能，watch都可以完成。

    2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。

    两个重要的小原则：

    1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。

    2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm 或 组件实例对象。

     

  • 相关阅读:
    C++知识精讲10——递增序列双循环条件语句位运算写法（基本方法，后面的知识精讲会出详细的位运算讲解)
    【在凸多边形的图像中查找顶点】估计具有已知顶点数的像素化凸多边形角点研究（Matlab代码实现）
    FFmpeg进阶:生成视频的缩略图
    git教程(1)---本地仓库操作
    【Ubuntu系统重启以后串口驱动丢失的问题】
    AttributeError: module ‘lib‘ has no attribute ‘X509_V_FLAG_CB_ISSUER_CHECK‘
    C#线程发展历史
    STM32CubeMX教程6 TIM 通用定时器 - 生成PWM波
    3.MNIST数据集分类
    Typora表格中常用操作
  • 原文地址：https://blog.csdn.net/m0_64226820/article/details/127997850