• vue基础语法（上）

    目录

    一、插值

    1、文本

    2、html

    3、属性

    4、表达式

    5、class绑定

    6、style绑定

    二、指令

    1、核心指令

    注：v-show和v-if区别

    三、过滤器

    1、全局过滤器

    2、局部过滤器

    四、计算属性与监听属性

    1、计算属性

    2、监听属性

    3、计算属性和监听属性的区别 

    一、插值

    1、文本

              {{msg}}

    2、html

              使用v-html指令用于输出html代码          

    3、属性

              HTML属性中的值应使用v-bind指令

    4、表达式

              Vue提供了完全的JavaScript表达式支持

              {{str.substr(0,6).toUpperCase()}}

              {{ number + 1 }}

              {{ ok ? 'YES' : 'NO' }}

              

  • 我的Id是js动态生成的

    • 5、class绑定

      使用方式：v-bind:class="expression"

      expression的类型：字符串、数组、对象

    6、style绑定

      v-bind:style="expression"

      expression的类型：字符串、数组、对象

    案例

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    6. 		<title>title>
    7. 	head>
    8. 	<body>
    9. 		<div id="app">
    10. 			{{msg}}
    11. 			<span v-html="htmlstr">span>
    12. 			<p>vue中的属性p>
    13. 			<a v-bind:href="hrefstr">百度一下a>
    14. 			<input :value="valuestr"/>
    15. 			<p>表达式p>
    16. 			{{str.substr(0,6).toUpperCase()}}<br />
    17. 			{{ number + 1 }}<br />
    18. 		    {{ ok ? 'YES' : 'NO' }}<br />
    19. 			<span :id="'goods_'+id">xxspan>
    20. 		div>
    21. 		
    22. 	body>
    23. 	<script type="text/javascript">
    24. 		new Vue({
    25. 			el:"#app",
    26. 			data(){
    27. 				return{
    28. 					msg:'hhhhhh vue',
    29. 					htmlstr:'html代码',
    30. 					hrefstr:'http://www.baidu.com',
    31. 					valuestr:'2223',
    32. 					str:'我学的java语言',
    33. 					number:11,
    34. 					ok:false,
    35. 					id:1
    36. 				};
    37. 			}
    38. 		})
    39. 	script>
    40. html>

     

    二、指令

     指的是带有“v-”前缀的特殊属性

    1、核心指令

    v-if|v-else|v-else-if：根据其后表达式的bool值进行判断是否渲染该元素

    他们只能是兄弟元素

    v-else-if上一个兄弟元素必须是v-if

    v-else上一个兄弟元素必须是v-if或者是v-else-if

      v-show：与v-if类似，只是会渲染其身后表达式为false的元素，而且会给这样的元素添加css代码：style="display:none"

    注：v-show和v-if区别

    v-show会显示，只是加上了“style="display:none"”，而v-if不会显示

     

      v-for：类似JS的遍历，

     遍历数组: v-for="item in items", items是数组，item为数组中的数组元素

     遍历对象: v-for="(value,key,index) in stu", value属性值,key属性名，index下标 

    案例

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    6. 		<title>title>
    7. 	head>
    8. 	<body>
    9. 		<div id="pp">
    10. 			<p>v-if|v-else|v-else-ifp>
    11. 			分数：<input v-model="score" />
    12. 			评价：
    13. 			<span v-if="score>80">优秀span>
    14. 			<span v-else-if="score>60">良好span>
    15. 			<span v-else="score<60">差span>
    16.  
    17. 			<p>v-showp>
    18. 			<span v-show="score>90">v-show-是否显示span>
    19. 			<span v-if="score>90">v-if-是否显示span>
    20.  
    21. 			<p>v-forp>
    22. 			<select v-model="hobbySelected">
    23. 				<option v-for="h in hobby" :value="h.id">{{h.name}}option>
    24. 			select>
    25.  
    26. 			<div v-for="h in hobby">
    27. 				<input :value="h.id" type=checkbox />{{h.name}}
    28. 			div>
    29. 		div>
    30. 	body>
    31. 	<script type="text/javascript">
    32. 		new Vue({
    33. 			el: '#pp',
    34. 			data() {
    35. 				return {
    36. 					score: 21,
    37. 					hobby: [{
    38. 							id: "1",
    39. 							name: "唱歌"
    40. 						},
    41. 						{
    42. 							id: "2",
    43. 							name: "跳舞"
    44. 						},
    45. 						{
    46. 							id: "3",
    47. 							name: "篮球"
    48. 						}
    49. 					],
    50. 					hobbySelected: 1
    51. 				};
    52. 			}
    53. 			
    54. 		})
    55. 	script>
    56. html>

      

    三、过滤器

    1、全局过滤器

    Vue.filter('filterName', function (value) {

     // value 表示要过滤的内容

    });

    2、局部过滤器

    new Vue({

     filters:{'filterName':function(value){}}

    });

    vue允许你自定义过滤器，被用作一些常见的文本格式化，格式如下：

    {{ name | capitalize }}

    注1：过滤器函数接受表达式的值作为第一个参数

    注2：过滤器可以串联     

    {{ message | filterA | filterB }}

    注3：过滤器是JavaScript函数，因此可以接受参数：

    {{ message | filterA('arg1', arg2) }}

    注4：js定义一个类

    function Stu(){};

    Stu.prototype.add(a,b){};//添加一个新的实例方法

    Stu.update(a,b){};//添加一个新的类方法

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    6. 		<title>title>
    7. 	head>
    8. 	<body>
    9. 		<div id="bpp">
    10. 			
    11. 			{{msg|all}}<br />
    12. 			{{msg|single}}<br />
    13. 			{{msg|all|single}}<br />
    14. 			{{msg|param(2,5)}}
    15. 		div>
    16. 	body>
    17. 	<script type="text/javascript">
    18. 			// 全局过滤器
    19. 			Vue.filter('all', function(value) {
    20. 				return value.substring(1, 4);
    21. 			});
    22. 			// 绑定边界	ES6具体体现
    23. 			new Vue({
    24. 				el: '#bpp',
    25. 				data() {
    26. 					return {
    27. 						msg:"abcdef"
    28. 					};
    29. 				},
    30. 				methods: {
    31. 				handle() {
    32. 						alert("触发事件");
    33. 					}
    34. 				},
    35. 				filters:{
    36. 					'single':function(val){
    37. 						return val.substring(2,3);
    38. 					},
    39. 					'param':function(val,start,end){
    40. 						return val.substring(start,end);
    41. 					}
    42. 				}
    43. 			})
    44. 		script>
    45. html>

    四、计算属性与监听属性

    1、计算属性

       计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新

       computed:{}

    2、监听属性

       监听属性 watch，我们可以通过 watch 来响应数据的变化

       watch:{}

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    6. 		<title>title>
    7. 	head>
    8. 	<body>
    9. 		
    10. 		<div id="app">
    11. 			<p>计算属性p>
    12. 			<table border="1" style="width: 600px;height: 300px;">
    13. 				<tr>
    14. 					<td>物品td>
    15. 					<td>单价td>
    16. 					<td>
    17. 						数量
    18. 					td>
    19. 					<td>
    20. 						小计
    21. 					td>
    22. 				tr>
    23. 				<tr>
    24. 					<td>帽子td>
    25. 					<td>{{maoziDanjia}}td>
    26. 					<td>
    27. 						<input v-model="maozi" />
    28. 					td>
    29. 					<td>
    30. 						{{maoziTotal}}
    31. 					td>
    32. 				tr>
    33. 				<tr>
    34. 					<td>衣服td>
    35. 					<td>{{yifuDanjia}}td>
    36. 					<td>
    37. 						<input v-model="yifu" />
    38. 					td>
    39. 					<td>
    40. 						{{yifuTotal}}
    41. 					td>
    42. 				tr>
    43. 				<tr>
    44. 					<td>裤子td>
    45. 					<td>{{kuziDanjia}}td>
    46. 					<td>
    47. 						<input v-model="kuzi" />
    48. 					td>
    49. 					<td>
    50. 						{{kuziTotal}}
    51. 					td>
    52. 				tr>
    53. 				<tr>
    54. 					<td>总价td>
    55. 					<td colspan="3">{{total}}td>
    56. 				tr>
    57. 			table>
    58. 			<p>监听属性p>
    59. 			千米：<input v-model="km" />
    60. 			米：<input v-model="m" />
    61. 		div>
    62. 	body>
    63. 	<script type="text/javascript">
    64. 		// 全局过滤器
    65. 		Vue.filter('all', function(value) {
    66. 			return value.substring(1, 4);
    67. 		});
    68. 		// 绑定边界	ES6具体体现
    69. 		new Vue({
    70. 			el: '#app',
    71. 			data() {
    72. 				return {
    73. 					maoziDanjia: 300,
    74. 					yifuDanjia: 1300,
    75. 					kuziDanjia: 2200,
    76. 					maozi: 1,
    77. 					yifu: 1,
    78. 					kuzi: 1,
    79. 					km: 2,
    80. 					m: 2000
    81. 				};
    82. 			},
    83. 			methods: {
    84. 				handle() {
    85. 					alert("触发事件");
    86. 				}
    87. 			},
    88. 			computed: {
    89. 				maoziTotal() {
    90. 					return this.maoziDanjia * this.maozi;
    91. 				},
    92. 				yifuTotal() {
    93. 					return this.yifuDanjia * this.yifu;
    94. 				},
    95. 				kuziTotal() {
    96. 					return this.kuziDanjia * this.kuzi;
    97. 				},
    98. 				total() {
    99. 					return this.maoziTotal + this.yifuTotal + this.kuziTotal;
    100. 				}
    101. 			},
    102. 			watch: {
    103. 				// v指的是m变量
    104. 				m: function(v) {
    105. 					this.km = parseInt(v) / 1000;
    106. 				},
    107. 				// v指的是km变量
    108. 				km: function(v) {
    109. 					this.m = parseInt(v) * 1000;
    110. 				}
    111. 			}
    112. 		})
    113. 	script>
    114. html>

     3、计算属性和监听属性的区别 

    computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；
    computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化，

    与watch之间的区别：
    watch主要用于监控vue实例的变化，它监控的变量当然必须在data里面声明才可以，它可以监控一个变量，也可以是一个对象

  • 相关阅读:
    调试MT9V024
    外包干了2个月，技术退步明显.......
    03- ROS 常用指令
    查找算法——插值查找法
    【萌新向】Sql Server保姆级安装教程-图文详解手把手教你安sql
    【笔记】Oracle不同数据库之间的表级别同步
    诚邀莅临 | 天奥智能参展第86届中国国际医疗器械博览会
    java计算机毕业设计竞赛信息发布及组队系统源码+数据库+lw文档+系统
    [Druid-1.2.11源码系列]-7-mysql-connector-java驱动包内部的创建数据库连接对象的过程
    如何在Next.js中使用react-viewer图片预览
  • 原文地址：https://blog.csdn.net/m0_62528678/article/details/126668391