• Vue基础语法01

    目录

    一、插值

    二、指令

    1.v-if|v-else|v-else-if

    2.v-show

    3.v-for

     4.v-bind

    5.v-on

    6.v-model

    7.v-html

    三、参数

    四、动态参数

    五、过滤器

    1.全局过滤器

    2.局部过滤器

    六、计算属性

    七、监听属性

    一、插值

    1.插入文本内容

    语法：{{ }}、v-text=" "

    例：

    {{msg}}

    v-text="msg"

    插入多个值：

    {{ }}：

    {{msg}}{{msg2}}

    v-text=" "

    v-text="msg+msg2">

    区别：

    1.用 {{ }} 页面加载页面时会有闪烁的问题，v-text 不会有；

    2.用 {{ }} 页面可以编辑，v-text 不可编辑。     

    案例：

    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. 		<div id="aa">
    11. 			
    12. 			<h1>{{msg}}我是字？h1>
    13. 			
    14. 			<h1 v-text="msg">我是字？h1>
    15. 			
    16. 			 
    17. 			
    18. 			<h1 v-html="input">h1>
    19. 			
    20. 			
    21. 			
    22. 			<h1 v-bind:id="id">bbh1>
    23. 			<h1 :style="color">bbh1>
    24. 			<br/>
    25. 			
    26. 			{{2>1?"正确":"错误"}}<br/>
    27. 			{{substr.substr(0,2)}}<br/>
    28. 			{{slice.slice(0,6).toUpperCase()}}<br/>
    29. 			{{number + 1}}<br/>
    30. 			{{ok ? 'YES' : 'NO'}}
    31. 		div>
    32. 	body>
    33. 	<script type="text/javascript">
    34. 		setTimeout(()=>{
    35. 			// 创建Vue实例
    36. 			var vue = new Vue({
    37. 				el:"#aa",// 挂载点/管理边界
    38. 				data:{// JSON格式
    39. 					msg:"Hellow Vue!",
    40. 					input:"",
    41. 					id:"bb",
    42. 					color:'color:red',
    43. 					substr:'abcdefg',
    44. 					slice:'abcdefg',
    45. 					number:1,
    46. 					ok:'ok'
    47. 				}
    48. 			});
    49. 		},400)
    50. 	script>
    51. html>

    页面运行效果：

    二、指令

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

    1.v-if|v-else|v-else-if

    根据其后表达式的bool值进行判断是否渲染该元素。

    案例：

    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. 		<div id="aa">
    11. 			
    12. 			<h1 v-if="score>90">你太棒了！h1>
    13. 			<h1 v-else-if="score<90">继续努力哦！h1>
    14. 			<h1 v-else>还行吧！h1>
    15. 		div>
    16. 	body>
    17. 	<script type="text/javascript">
    18. 		// 创建Vue实例
    19. 		var vue = new Vue({
    20. 			el:"#aa",// 挂载点/管理边界
    21. 			data:{
    22. 				  score:99
    23. 			}
    24. 		});
    25. 	script>
    26. html>

    打印结果为：你太棒了！

    2.v-show

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


    案例：显示/隐藏 组件

    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. 		<div id="aa">
    11. 			
    12. 			<button v-on:click="flag=!flag">图片的显示/隐藏button>
    13. 			<div v-html="img" v-show="flag">div>
    14. 		div>
    15. 	body>
    16. 	<script type="text/javascript">
    17. 		// 创建Vue实例
    18. 		var vue = new Vue({
    19. 			el:"#aa",// 挂载点/管理边界
    20. 			data:{
    21. 				  flag:true,
    22. 				  img:''
    23. 			}
    24. 		});
    25. 	script>
    26. html>

    页面运行效果：

    3.v-for

    类似JS的遍历。

    案例：

    1.遍历数组

    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. 		<div id="aa">
    11. 			
    12. 			
    13. 			<ul>
    14. 				
    15. 				<li v-for="item in array">{{item}}li>
    16. 				<br/>
    17. 				
    18. 				<li v-for="(item,i) in array">{{item}} 下标：{{i}}li>
    19. 			ul>
    20. 		div>
    21. 	body>
    22. 	<script type="text/javascript">
    23. 		// 创建Vue实例
    24. 		var vue = new Vue({
    25. 			el:"#aa",// 挂载点/管理边界
    26. 			data:{
    27. 				  array:['wq','jm','ly','zt','wxy','zcs']
    28. 			}
    29. 		});
    30. 	script>
    31. html>

    页面运行效果：

    2.遍历对象

    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. 		<div id="aa">
    11. 			
    12. 			
    13. 			<ul>
    14. 				
    15. 				猫：<li v-for="val,key,i in cat">{{key}}={{val}} 下标：{{i}}li>
    16. 				br>
    17. 				老鼠：<li v-for="val,key,i in mouse">{{key}}={{val}} 下标：{{i}}li>
    18. 			ul>
    19. 		div>
    20. 	body>
    21. 	<script type="text/javascript">
    22. 		// 创建Vue实例
    23. 		var vue = new Vue({
    24. 			el:"#aa",// 挂载点/管理边界
    25. 			data:{
    26. 				  cat:{
    27. 					   name:'汤姆',
    28. 					   sex:'公',
    29. 					   age:2
    30. 				  },
    31. 				  mouse:{
    32. 					  name:'杰瑞',
    33. 					  sex:'公',
    34. 					  age:1
    35. 				  }
    36. 			}
    37. 		});
    38. 	script>
    39. html>

    页面运行效果：

    3.遍历数组对象

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 		
    7. 		<script type="text/jscript" src="js/vue.js">script>
    8. 	head>
    9. 	<body>
    10. 		<div id="aa">
    11. 			
    12. 			<ul>
    13. 				<li v-for="cm in catandmouse">
    14. 					编号：{{cm.id}}；名字：{{cm.name}}；性别：{{cm.sex}}；年龄：{{cm.age}}。
    15. 				li>
    16. 			ul>
    17. 		div>
    18. 	body>
    19. 	<script type="text/jscript">
    20. 		// 创建Vue实例
    21. 		var vue = new Vue({
    22. 			el:'#aa',// 挂载点/管理边界
    23. 			
    24. 			data:function(){
    25. 				return{
    26. 					    catandmouse:[
    27. 								    {id:1,name:"图多盖洛",sex:"母",age:1},
    28. 								    {id:2,name:"天使杰瑞",sex:"公",age:2},
    29. 								    {id:3,name:"剑客莉莉",sex:"母",age:1},
    30. 								    {id:4,name:"国王杰瑞",sex:"母",age:1},
    31. 								    {id:5,name:"泰妃",sex:"公",age:0},
    32. 								    {id:6,name:"布奇",sex:"公",age:1}
    33. 					    ]
    34. 				}
    35. 			},
    36. 			
    37. 		});
    38. 	script>
    39. html>

    页面运行效果：

     4.v-bind

    动态绑定属性，给标签添加HTML属性。

    Vue 为 v-bind 提供了特定简写

    简写前：...

    简写后：...

    案例：

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 		
    7. 		<script type="text/jscript" src="js/vue.js">script>
    8. 	head>
    9. 	<body>
    10. 		<div id="aa">
    11. 			
    12. 			
    13. 			
    14. 			<a :id="id" v-bind:href="href">百度一下a>
    15. 			<h1 :style="color">哈哈h1>
    16. 		div>
    17. 	body>id
    18. 	<script type="text/jscript">
    19. 		// 创建Vue实例
    20. 		var vue = new Vue({
    21. 			el:'#aa',// 挂载点/管理边界
    22. 			
    23. 			data:function(){
    24. 				return{
    25. 					    id:'bb',
    26. 					    href:"http://www.baidu.com",
    27. 					    color:'color:red'
    28. 				}
    29. 			}
    30. 		});
    31. 	script>
    32. html>

    页面运行效果： 

     控制台查看效果：


    5.v-on

    给目标元素绑定事件。

    Vue为v-on指令提供了特定简写
    简写前：...
    简写后：... 

    案例：

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 		
    7. 		<script type="text/jscript" src="js/vue.js">script>
    8. 	head>
    9. 	<body>
    10. 		<div id="aa">
    11. 			
    12.             
    13. 			<button v-on:click="click">点击button>
    14. 		div>
    15. 	body>
    16. 	<script type="text/jscript">
    17. 		// 创建Vue实例
    18. 		var vue = new Vue({
    19. 			el:'#aa',// 挂载点/管理边界
    20. 			
    21. 			methods:{
    22. 				click:function(){
    23. 					alert("你点了我~");
    24. 				}
    25.                 
    26.                 // 也可以简写为
    27. 				// click(){
    28. 				// 	alert("你点了我~");
    29. 				// }
    30. 			}	
    31. 		});
    32. 	script>
    33. html>

    页面运行效果（点击按钮弹出对话框）：

    如果要绑定其他事件，修改click的值就可以了。

    例如（双击事件）：

    <button v-on:dblclick="click">双击button>

    6.v-model

            用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。

    案例一：双向数据绑定姓氏和名字

    1. html>
    2. <html>
    3.     <head>
    4.         <meta charset="utf-8" />
    5.         <title>双向数据绑定title>
    6.         <script type="text/javascript" src="js/vue.js">script>
    7.     head>
    8.     <body>
    9. 		<div id="aa">
    10. 			
    11. 			姓氏：<input type="text" v-model="xs" />
    12. 			<br/>
    13. 			
    14. 			名字：<input type="text" v-model="mz" />
    15. 			<br/>
    16. 			
    17. 			姓名：<div v-text="xs+mz">div>
    18. 		div>
    19.     <script type="text/jscript">
    20.         // 创建Vue实例
    21.         var vue = new Vue({
    22. 			el:'#aa',// 挂载点
    23. 			data:{// JSON格式
    24. 				xs:'',
    25. 				mz:''
    26. 			}
    27. 		});
    28.     script>
    29. html>

    页面运行效果：

    双向数据绑定

    案例二：v-for/v-model一起绑定[多选]复选框

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 		
    7. 		<script type="text/jscript" src="js/vue.js">script>
    8. 	head>
    9. 	<body>
    10. 		<div id="aa">
    11. 			
    12. 			<div v-for="cm in catandmouse">
    13. 				<input type="checkbox" v-bind:value="cm.name" v-model="array"  />{{cm.name}}
    14. 			div>
    15. 			<h1 v-if="array.length > 0">{{array}}h1>
    16. 		div>
    17. 	body>
    18. 	<script type="text/jscript">
    19. 		// 创建Vue实例
    20. 		var vue = new Vue({
    21. 			el:'#aa',// 挂载点/管理边界
    22. 			
    23. 			data:function(){
    24. 				return{
    25. 					catandmouse:[
    26. 								{id:1,name:"图多盖洛",sex:"母",age:1},
    27. 								{id:2,name:"天使杰瑞",sex:"公",age:2},
    28. 								{id:3,name:"剑客莉莉",sex:"母",age:1},
    29. 								{id:4,name:"国王杰瑞",sex:"母",age:1},
    30. 								{id:5,name:"泰妃",sex:"公",age:0},
    31. 								{id:6,name:"布奇",sex:"公",age:1}
    32. 					],
    33. 					array:[]
    34. 				}
    35. 			}
    36. 		});
    37. 	script>
    38. html>

    页面显示效果：

    7.v-html

    用于输出html代码。

    案例：

    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. 		<div id="app">
    11. 			<h1 v-html="msg">h1>
    12. 		div>
    13. 	body>
    14. 	<script type="text/javascript">
    15. 		vue = new Vue({
    16. 			data:{
    17. 				msg: ''
    18. 			}
    19. 		}).$mount("#app");
    20. 	script>
    21. html>

    三、参数

    一些指令能够接收一个“参数”，在指令名称之后以冒号表示。

    例如：
    ...
    在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定；


    ...
    在这里 click 参数是监听的事件名。

    四、动态参数

    从2.6.0开始，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数。

    例：
    ...

    同样地，你可以使用动态参数为一个动态的事件名绑定处理函数

    例：
    ...

    注：动态参数表达式有一些语法约束，回避大写。

    例：

    evName无效,evname有效

    案例：

    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. 		<div id="aa">
    11. 			
    12. 			<a :[href]="link">百度一下a>
    13. 		div>
    14. 	body>
    15. 	<script type="text/javascript">
    16. 		// 创建Vue实例
    17. 		var vue = new Vue({
    18. 			el:"#aa",// 挂载点/管理边界
    19. 			data:{
    20. 				  href:'href',
    21. 				  link:'http://www.baidu.com'
    22. 			}
    23. 		});
    24. 	script>
    25. html>

    五、过滤器

    1.全局过滤器

    语法：
    Vue.filter('filterName', function (value) {
         // value 表示要过滤的内容
    });


    2.局部过滤器

    语法：
    new Vue({
         filters:{'filterName1':function(value){}}，
         filters:{'filterName2':function(value){}}
       });

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

    {{ name | capitalize }}


    注1：过滤器函数接受表达式的值作为第一个参数 
    注2：过滤器可以串联     
            {{ message | filterA | filterB }}
    注3：过滤器是JavaScript函数，因此可以接受参数： 
            {{ message | filterA('arg1', arg2) }}

    案例：

    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. 		<div id="aa">
    11. 			
    12. 			<h1>{{str|toUpper|slice}}h1>
    13. 			
    14. 			<h1>{{str2|toUpper2}}h1>
    15. 		div>
    16. 	body>
    17. 	<script type="text/javascript">
    18. 		// 全局过滤器
    19. 		Vue.filter('toUpper2',function(value){
    20. 			return value.toUpperCase();
    21. 		});
    22. 		// 创建Vue实例
    23. 		var vue = new Vue({
    24. 			el:"#aa",// 挂载点/管理边界
    25. 			data:{// JSON格式
    26. 				  str:'abcdefg',
    27. 				  str2:'abcdefg'
    28. 			},
    29. 			// 局部过滤器
    30. 			filters:{
    31. 				'toUpper':function(value){
    32. 					return value.toUpperCase();
    33. 				},
    34. 				'slice':function(value){
    35. 					return value.slice(2,4);
    36. 				}
    37. 			}
    38. 		});
    39. 	script>
    40. html>

    页面显示效果：


    六、计算属性

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

    语法：
    computed:{
           xxx1:function(v){
              
           },
           xxx2:function(v){
              
           }
    }

     案例：求出学生的总成绩

    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. 		<div id="aa">
    11. 			
    12. 			<h1>学生的总成绩是：{{scoreSum}}。h1>
    13. 		div>
    14. 	body>
    15. 	<script type="text/javascript">
    16. 		// 创建Vue实例
    17. 		var vue = new Vue({
    18. 			el:"#aa",// 挂载点/管理边界
    19. 			data:{
    20. 				  students:[
    21. 				  			{id:1,name:"图多盖洛",sex:"母",score:100},
    22. 				  			{id:2,name:"天使杰瑞",sex:"公",score:100},
    23. 				  			{id:3,name:"剑客莉莉",sex:"母",score:90},
    24. 				  			{id:4,name:"国王杰瑞",sex:"公",score:50},
    25. 				  			{id:5,name:"泰妃",sex:"公",score:10},
    26. 				  			{id:6,name:"布奇",sex:"公",score:88}
    27. 				  ]
    28. 			},
    29.  
    30. 			// 计算属性
    31. 			computed:{
    32. 				// 求出学生的总成绩
    33. 				scoreSum:function(){
    34. 					var sum = 0;
    35. 					// 循环遍历学生对象
    36. 					for(var i = 0; i < this.students.length; i ++){
    37. 						// 取出成绩并和sum进行求和
    38. 						sum += this.students[i].score;
    39. 					}
    40. 					return sum;// 返回总成绩
    41. 				}
    42. 			}
    43. 		});
    44. 	script>
    45. html>

    七、监听属性

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

    语法：
    watch:{
          xxx:function(v){

          }
    }

    xxx：代表被监听的属性，必须存在

    案例：通过监听属性完成天、小时、分钟、秒的转换

    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. 		<div id="aa">
    11. 			
    12. 			<input type="text" v-model="day" />：天，
    13. 			<input type="text" v-model="hour" />：小时，
    14. 			<input type="text" v-model="minute" />：分钟，
    15. 			<input type="text" v-model="second" />：秒。
    16. 		div>
    17. 	body>
    18. 	<script type="text/javascript">
    19. 		// 创建Vue实例
    20. 		var vue = new Vue({
    21. 			el:"#aa",// 挂载点/管理边界
    22. 			data:{// JSON格式
    23. 				  catandmouse:[
    24. 				  			{id:1,name:"图多盖洛",sex:"母",age:1},
    25. 				  			{id:2,name:"天使杰瑞",sex:"公",age:2},
    26. 				  			{id:3,name:"剑客莉莉",sex:"母",age:1},
    27. 				  			{id:4,name:"国王杰瑞",sex:"母",age:1},
    28. 				  			{id:5,name:"泰妃",sex:"公",age:0},
    29. 				  			{id:6,name:"布奇",sex:"公",age:1}
    30. 				  ],
    31. 				  day:'',
    32. 				  hour:'',
    33. 				  minute:'',
    34. 				  second:''
    35. 			},
    36. 			// 监听
    37. 			watch:{
    38. 				day:function(arg){// 天
    39. 					this.hour = arg * 24;
    40. 					this.minute = this.hour * 60;
    41. 					this.second = this.minute * 60;
    42. 				},
    43. 				hour:function(arg){// 小时
    44. 					this.day = arg / 24;
    45. 				},
    46. 				minute:function(arg){// 分钟
    47. 					this.day = arg / 60 / 24;
    48. 				},
    49. 				second:function(arg){// 秒
    50. 					this.day = arg / 60 / 60 / 24;
    51. 				}
    52. 			}
    53. 		});
    54. 	script>
    55. html>

    完。

  • 相关阅读:
    河北省技能大赛-大数据赛项环境搭建
    【Linux】进程控制
    Fastmoe安装
    无人机+自组网：2U机架车载式自组网电台技术详解
    企业工厂如何逆风翻盘：VR全景打破多重桎梏
    分布式应用之监控平台zabbix的认识与搭建
    MySQL (十四) 两阶段提交
    红黑树(Red Black Tree)
    LeetCode 热题 HOT 100：滑动窗口专题
    【Docker】学习笔记
  • 原文地址：https://blog.csdn.net/weixin_62332711/article/details/126078190