vue基本参数整理

最新推荐文章于 2024-05-07 11:53:35 发布

小土豆豆丁

最新推荐文章于 2024-05-07 11:53:35 发布

阅读量1.1k

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/Oopsl/article/details/105126444

版权

Vue模板语法

{{}}：显示文本
v-html：Html原生代码
v-once：仅显示一次
事件绑定：@click / v-on:click
属性绑定：v-bind / :

class绑定 
数组方式：
      v-bind:"[class1,class2]"
      data:{class1="XXXX",class2="XXXX"}
对象方式绑定：
      v-bind:"{ class1:isclass1,class2:isclass2}"
      data:{isclass1:true,isclass2:false}
      这里使用true和false来控制是否使用class1 和class2这两个样式

style绑定
数组方式:
      v-bind:style="[style1,style2]"
      data:{style1:{},style2:{}}
对象方式绑定:
      v-bind:style="{}"
      v-bind:style="style1"

条件判断

<div id="app">
    <p v-if="name == 'lin'">我是LinOVO</p>
    <p v-else-if="name == 'san'">我是sansan！IUI</p>
    <p v-else>我是谁？我在哪？	QWQ</p>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            name: 'san'
        }
    });
</script>

想在一个条件中加载多个Html，那就使用template

<div id="app">
			<template v-if="name == 'lin'">
				<p>我是LinOVO</p>
				<p>我今年18岁</p>
			</template>
			<template v-else-if="name == 'san'">
				<p>我是sansan！IUI</p>
				<p>我今年17哦</p>
			</template>
			<p v-else>
				我是谁？我在哪？	QWQ
			</p>
		</div>
		<script>
			let vm = new Vue({
				el: "#app",
				data: {
					name: 'san'
				}
			});
		</script>

key：如果我们想要让html元素每次切换的时候都重新渲染一遍，可以在需要重新渲染的元素上加上唯一的key属性，key属性只能使用number或String。key在使用的时候，必须使用v-bind属性绑定的形式，指定key的值。
for循环

<div id="app">
			<table>
					<tr>
						<th>序号</th>
						<th>标题</th>
						<th>作者</th>
					</tr>
					<tr v-for="(book,index) in books">
					<!--这里参数顺序是不可改变的，第一个参数就是遍历的参数-->
						<td>{{index+1}}</td>
						<td>{{book.title}}</td>
						<td>{{book.author}}</td>
					</tr>
			</table>
		</div>
		<script>
			new Vue({
				el:"#app",
				data:{
					books:[
						{title:"Python",author:"XXXX",id:0},
						{title:"PHP",author:"XXX",id:1},
						{title:"Java",author:"XX",id:2}
					]
				}
			})
		</script>

视图更新

pop：删除最后一个元素元素
push：添加元素
unshift：在数组开头添加元素
shift：删除数组开头的元素
reverse：反转
sort：排序
splice ：向数组中添加或者删除或者替换元素
Vue.set：动态给对象添加属性

even参数

获取原生的 DOM事件
在html代码中调用的时候传递一个 $even参数
但在调用的方法里面的形式参数不需要加 $

Vue计算和监听

v-model ：创建双向数据绑定
计算属性默认只有get
使用set 就必须使用 get

<div id="app">
			<div>
				<label>省：</label>
				<input type="text" name="province" v-model:value="province">
			</div>
			<div>
				<label>市：</label>
				<input type="text" name="city" v-model:value="city">
			</div>
			<div>
				<label>区：</label>
				<input type="text" name="district" v-model:value="district">
			</div>
			<div>
				<label>详细地址：</label>
				<input type="text" name="address" v-model:value="address">
			</div>
		</div>
		<script>
			let vm = new Vue({
				el: "#app",
				data: {
					district: "",
					city: "",
					province: ""
				},
				computed: {
					address: {
						get: function(){
							let result = "";
							if(this.province){
								result = this.province + "省";
							}
							if(this.city){
								result += this.city + "市";
							}
							if(this.district){
								result += this.district + "区";
							}
							return result;
						},
						set: function(newValue){
							let result = newValue.split(/省|市|区/)
							if(result && result.length > 0){
								this.province = result[0];
							}
							if (result && result.length > 1){
								this.city = result[1];
							}
							if(result && result.length > 2){
								this.district = result[2];
							}
						}
					}
				}
			});
		</script>

监听:对某个属性进行监听只要属性的值发生那么就会执行相应的函数

<div id="app">
<p style="font-size: 25px;">计数器: {{counter}} </p>
<button @click="counter+=1" style="font-size: 25px;">点我</button>

千米:<input type="text" v-model="kilometers"></input>
米:<input type="text" v-model="meters"></input>
<p id="info">

</p>
    </div>
    <script>
       
        var vm =new Vue({
            el:"#app",
            data:{
                counter:1,
                kilometers:0,
                meters:0
            }
            ,watch:{
                counter:function(nval,oval){
                    alert('计数器值的变化:'+oval+'变为'+nval+'!')
                },
                kilometers:function(val){
                    this.kilometers=val;
                    this.meters=this.kilometers*1000
                },
                meters:function(val){
                    this.meters=val;
                    this.kilometers=val /1000;
                }
            }
   });
        vm.$watch('kilometers',function(newValue,oldValue){
            //这个回调在vm.kilometer改变后调用
            document.getElementById('info').innerHTML="修改前值为:"+oldValue+",修改后值为:"+newValue;
        })
       
    </script>