Vue基础语法01

^O^——

已于 2022-08-14 21:54:53 修改

阅读量625

点赞数

文章标签： vue.js javascript 前端

于 2022-08-14 20:28:51 首次发布

本文链接：https://blog.csdn.net/weixin_62332711/article/details/126078190

版权

一、插值

二、指令

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

三、参数

五、过滤器

一、插值

1.插入文本内容

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

例：

v-text="msg"

插入多个值：

{{ }}：

v-text=" "

区别：

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

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

案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
        <!-- 引入vue.js文件 -->
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
	<body>
		<div id="aa">
			<!-- 1.{{msg}} 插值 -->
			<h1>{{msg}}我是字？</h1>
			<!-- 2.v-text 插值 -->
			<h1 v-text="msg">我是字？</h1>
			<!--
				{{msg}}和v-text插值的区别：
										 1.用{{msg}}页面加载页面时会有闪烁的问题，v-text不会有；
										 2.用{{msg}}页面可以编辑，v-text不可编辑。 
			 -->
			 
			<!-- 3.v-html 插入html代码，例：文本框-->
			<h1 v-html="input"></h1>
			<!-- 4.v-bind 给标签添加HTML属性，例：v-bind:id="值来自Vue实例里面定义的属性，如（id、color）-->
			<!-- 4.1.一个标签可以添加多个v-bind -->
			<!-- 4.2.v-bind 可以忽略 v-bind 不写  -->
			<h1 v-bind:id="id">bb</h1>
			<h1 :style="color">bb</h1>
			<br/>
			<!-- 5.表达式 -->
			{{2>1?"正确":"错误"}}<br/>
			{{substr.substr(0,2)}}<br/>
			{{slice.slice(0,6).toUpperCase()}}<br/>
			{{number + 1}}<br/>
			{{ok ? 'YES' : 'NO'}}
		</div>
	</body>
	<script type="text/javascript">
		setTimeout(()=>{
			// 创建Vue实例
			var vue = new Vue({
				el:"#aa",// 挂载点/管理边界
				data:{// JSON格式
					msg:"Hellow Vue!",
					input:"<input type=text/>",
					id:"bb",
					color:'color:red',
					substr:'abcdefg',
					slice:'abcdefg',
					number:1,
					ok:'ok'
				}
			});
		},400)
	</script>
</html>

页面运行效果：

二、指令

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

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

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

案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <!-- 引入vue.js文件 -->
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
	<body>
		<div id="aa">
			<!-- 1.v-if|v-else|v-else-if -->
			<h1 v-if="score>90">你太棒了！</h1>
			<h1 v-else-if="score<90">继续努力哦！</h1>
			<h1 v-else>还行吧！</h1>
		</div>
	</body>
	<script type="text/javascript">
		// 创建Vue实例
		var vue = new Vue({
			el:"#aa",// 挂载点/管理边界
			data:{
				  score:99
			}
		});
	</script>
</html>

打印结果为：你太棒了！

2.v-show

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

案例：显示/隐藏组件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <!-- 引入vue.js文件 -->
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
	<body>
		<div id="aa">
			<!-- 图片的显示/隐藏 -->
			<button v-on:click="flag=!flag">图片的显示/隐藏</button>
			<div v-html="img" v-show="flag"></div>
		</div>
	</body>
	<script type="text/javascript">
		// 创建Vue实例
		var vue = new Vue({
			el:"#aa",// 挂载点/管理边界
			data:{
				  flag:true,
				  img:'<img src="图片路径.jpg" />'
			}
		});
	</script>
</html>

页面运行效果：

3.v-for

类似JS的遍历。

案例：

1.遍历数组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入vue.js文件 -->
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
	<body>
		<div id="aa">
			<!-- v-for -->
			<!-- 遍历数组 -->
			<ul>
				<!-- 循环遍历li，把array数组里面的每个值赋给li -->
				<li v-for="item in array">{{item}}</li>
				<br/>
				<!-- 取出遍历的li的下标 -->
				<li v-for="(item,i) in array">{{item}} 下标：{{i}}</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		// 创建Vue实例
		var vue = new Vue({
			el:"#aa",// 挂载点/管理边界
			data:{
				  array:['wq','jm','ly','zt','wxy','zcs']
			}
		});
	</script>
</html>

页面运行效果：

2.遍历对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入vue.js文件 -->
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
	<body>
		<div id="aa">
			<!-- v-for -->
			<!-- 遍历对象 -->
			<ul>
				<!-- v-for="key,val,i in Dog"中，val是键，kay是值，i是下标 -->
				猫：<li v-for="val,key,i in cat">{{key}}={{val}} 下标：{{i}}</li>
				</br>
				老鼠：<li v-for="val,key,i in mouse">{{key}}={{val}} 下标：{{i}}</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		// 创建Vue实例
		var vue = new Vue({
			el:"#aa",// 挂载点/管理边界
			data:{
				  cat:{
					   name:'汤姆',
					   sex:'公',
					   age:2
				  },
				  mouse:{
					  name:'杰瑞',
					  sex:'公',
					  age:1
				  }
			}
		});
	</script>
</html>

页面运行效果：

3.遍历数组对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入vue.js文件 -->
		<script type="text/jscript" src="js/vue.js"></script>
	</head>
	<body>
		<div id="aa">
			<!-- 遍历数组对象 -->
			<ul>
				<li v-for="cm in catandmouse">
					编号：{{cm.id}}；名字：{{cm.name}}；性别：{{cm.sex}}；年龄：{{cm.age}}。
				</li>
			</ul>
		</div>
	</body>
	<script type="text/jscript">
		// 创建Vue实例
		var vue = new Vue({
			el:'#aa',// 挂载点/管理边界
			
			data:function(){
				return{
					    catandmouse:[
								    {id:1,name:"图多盖洛",sex:"母",age:1},
								    {id:2,name:"天使杰瑞",sex:"公",age:2},
								    {id:3,name:"剑客莉莉",sex:"母",age:1},
								    {id:4,name:"国王杰瑞",sex:"母",age:1},
								    {id:5,name:"泰妃",sex:"公",age:0},
								    {id:6,name:"布奇",sex:"公",age:1}
					    ]
				}
			},
			
		});
	</script>
</html>

页面运行效果：

4.v-bind

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

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

简写前：<a v-bind:href="url">...</a>

简写后：<a :href="url">...</a>

案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入vue.js文件 -->
		<script type="text/jscript" src="js/vue.js"></script>
	</head>
	<body>
		<div id="aa">
			<!-- v-bing -->
			<!-- 1.一个标签可以添加多个v-bind -->
			<!-- v-bind 可以简写，例：v-bind:id="id" 可以写成 :id="id" -->
			<a :id="id" v-bind:href="href">百度一下</a>
			<h1 :style="color">哈哈</h1>
		</div>
	</body>id
	<script type="text/jscript">
		// 创建Vue实例
		var vue = new Vue({
			el:'#aa',// 挂载点/管理边界
			
			data:function(){
				return{
					    id:'bb',
					    href:"http://www.baidu.com",
					    color:'color:red'
				}
			}
		});
	</script>
</html>

页面运行效果：

控制台查看效果：

5.v-on

给目标元素绑定事件。

Vue为v-on指令提供了特定简写
简写前：<a v-on:click="doSomething">...</a>
简写后：<a @click="doSomething">...</a>

案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入vue.js文件 -->
		<script type="text/jscript" src="js/vue.js"></script>
	</head>
	<body>
		<div id="aa">
			<!-- v-on -->
            <!-- v-on 可以简写，例：v-on:click="click" 可以写成 @click="click" -->
			<button v-on:click="click">点击</button>
		</div>
	</body>
	<script type="text/jscript">
		// 创建Vue实例
		var vue = new Vue({
			el:'#aa',// 挂载点/管理边界
			
			methods:{
				click:function(){
					alert("你点了我~");
				}
                
                // 也可以简写为
				// click(){
				// 	alert("你点了我~");
				// }
			}	
		});
	</script>
</html>

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

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

例如（双击事件）：

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

6.v-model

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

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>双向数据绑定</title>
        <script type="text/javascript" src="js/vue.js"></script>
    </head>
    <body>
		<div id="aa">
			<!-- 姓氏：文本框 -->
			姓氏：<input type="text" v-model="xs" />
			<br/>
			<!-- 名字：文本框 -->
			名字：<input type="text" v-model="mz" />
			<br/>
			<!-- 插值 -->
			姓名：<div v-text="xs+mz"></div>
		</div>
    <script type="text/jscript">
        // 创建Vue实例
        var vue = new Vue({
			el:'#aa',// 挂载点
			data:{// JSON格式
				xs:'',
				mz:''
			}
		});
    </script>
</html>

页面运行效果：

双向数据绑定

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入vue.js文件 -->
		<script type="text/jscript" src="js/vue.js"></script>
	</head>
	<body>
		<div id="aa">
			<!-- 复选框 -->
			<div v-for="cm in catandmouse">
				<input type="checkbox" v-bind:value="cm.name" v-model="array"  />{{cm.name}}
			</div>
			<h1 v-if="array.length > 0">{{array}}</h1>
		</div>
	</body>
	<script type="text/jscript">
		// 创建Vue实例
		var vue = new Vue({
			el:'#aa',// 挂载点/管理边界
			
			data:function(){
				return{
					catandmouse:[
								{id:1,name:"图多盖洛",sex:"母",age:1},
								{id:2,name:"天使杰瑞",sex:"公",age:2},
								{id:3,name:"剑客莉莉",sex:"母",age:1},
								{id:4,name:"国王杰瑞",sex:"母",age:1},
								{id:5,name:"泰妃",sex:"公",age:0},
								{id:6,name:"布奇",sex:"公",age:1}
					],
					array:[]
				}
			}
		});
	</script>
</html>

页面显示效果：

7.v-html

用于输出html代码。

案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入vue.js文件 -->
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h1 v-html="msg"></h1>
		</div>
	</body>
	<script type="text/javascript">
		vue = new Vue({
			data:{
				msg: '<input></input>'
			}
		}).$mount("#app");
	</script>
</html>

三、参数

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

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

<a v-on:click="doSomething">...</a>
在这里 click 参数是监听的事件名。

四、动态参数

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

例：
<a v-bind:[attrname]="url"> ... </a>

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

例：
<a v-on:[evname]="doSomething"> ... </a>

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

例：

evName无效,evname有效

案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入vue.js文件 -->
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
	<body>
		<div id="aa">
			<!-- 动态参数 -->
			<a :[href]="link">百度一下</a>
		</div>
	</body>
	<script type="text/javascript">
		// 创建Vue实例
		var vue = new Vue({
			el:"#aa",// 挂载点/管理边界
			data:{
				  href:'href',
				  link:'http://www.baidu.com'
			}
		});
	</script>
</html>

五、过滤器

1.全局过滤器

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

2.局部过滤器

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

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

{{ name | capitalize }}

<div v-bind:id="rawId | formatId"></div>

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

案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入vue.js文件 -->
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
	<body>
		<div id="aa">
			<!-- 局部过滤器 -->
			<h1>{{str|toUpper|slice}}</h1>
			<!-- 全局过滤器 -->
			<h1>{{str2|toUpper2}}</h1>
		</div>
	</body>
	<script type="text/javascript">
		// 全局过滤器
		Vue.filter('toUpper2',function(value){
			return value.toUpperCase();
		});
		// 创建Vue实例
		var vue = new Vue({
			el:"#aa",// 挂载点/管理边界
			data:{// JSON格式
				  str:'abcdefg',
				  str2:'abcdefg'
			},
			// 局部过滤器
			filters:{
				'toUpper':function(value){
					return value.toUpperCase();
				},
				'slice':function(value){
					return value.slice(2,4);
				}
			}
		});
	</script>
</html>

页面显示效果：

六、计算属性

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

语法：
computed:{
xxx1:function(v){

},
xxx2:function(v){

}
}

案例：求出学生的总成绩

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入vue.js文件 -->
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
	<body>
		<div id="aa">
			<!-- 计算属性 -->
			<h1>学生的总成绩是：{{scoreSum}}。</h1>
		</div>
	</body>
	<script type="text/javascript">
		// 创建Vue实例
		var vue = new Vue({
			el:"#aa",// 挂载点/管理边界
			data:{
				  students:[
				  			{id:1,name:"图多盖洛",sex:"母",score:100},
				  			{id:2,name:"天使杰瑞",sex:"公",score:100},
				  			{id:3,name:"剑客莉莉",sex:"母",score:90},
				  			{id:4,name:"国王杰瑞",sex:"公",score:50},
				  			{id:5,name:"泰妃",sex:"公",score:10},
				  			{id:6,name:"布奇",sex:"公",score:88}
				  ]
			},

			// 计算属性
			computed:{
				// 求出学生的总成绩
				scoreSum:function(){
					var sum = 0;
					// 循环遍历学生对象
					for(var i = 0; i < this.students.length; i ++){
						// 取出成绩并和sum进行求和
						sum += this.students[i].score;
					}
					return sum;// 返回总成绩
				}
			}
		});
	</script>
</html>

七、监听属性

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

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

}
}

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

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入vue.js文件 -->
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
	<body>
		<div id="aa">
			<!-- 通过监听属性完成天、小时、分钟、秒的转换 -->
			<input type="text" v-model="day" />：天，
			<input type="text" v-model="hour" />：小时，
			<input type="text" v-model="minute" />：分钟，
			<input type="text" v-model="second" />：秒。
		</div>
	</body>
	<script type="text/javascript">
		// 创建Vue实例
		var vue = new Vue({
			el:"#aa",// 挂载点/管理边界
			data:{// JSON格式
				  catandmouse:[
				  			{id:1,name:"图多盖洛",sex:"母",age:1},
				  			{id:2,name:"天使杰瑞",sex:"公",age:2},
				  			{id:3,name:"剑客莉莉",sex:"母",age:1},
				  			{id:4,name:"国王杰瑞",sex:"母",age:1},
				  			{id:5,name:"泰妃",sex:"公",age:0},
				  			{id:6,name:"布奇",sex:"公",age:1}
				  ],
				  day:'',
				  hour:'',
				  minute:'',
				  second:''
			},
			// 监听
			watch:{
				day:function(arg){// 天
					this.hour = arg * 24;
					this.minute = this.hour * 60;
					this.second = this.minute * 60;
				},
				hour:function(arg){// 小时
					this.day = arg / 24;
				},
				minute:function(arg){// 分钟
					this.day = arg / 60 / 24;
				},
				second:function(arg){// 秒
					this.day = arg / 60 / 60 / 24;
				}
			}
		});
	</script>
</html>

完。