vue语法学习

{{ }} 两个大括号获取数据
声明式渲染

<div id="app">
    {{ meassage }}
</div>
<script>
var app = new Vue({
    el:"#app",
	data:{
	    meassage:"这是我要显示的内容"
}})
</script>

v-bind指令

用法：v-bind:title="message"

该指令的意思是将元素的属性与vue实例绑定，保持一致！

<div id="app2">
	<span v-bind:title="message">
   		鼠标悬停几秒查看此处绑定的提示信息！
   	</span>
</div>

<script>
	var app2 = new Vue({
		el:'#app2',
		data:{
			message:"ceshissadla"
		}
	})
</script>

v-if 判断语句指令

用法：v-if="seen"
v-show 判断是否显示

<div id="app3">
	<p v-if="seen">现在你看到我了</p>
	<p v-show="seen">现在你看到我了</p>
</div>

<script>
	var app3 = new Vue({
        el:"#app3",
        data:{
            seen:true
        }
    })
</script>

备注：两者的不同是v-if为false时直接从dom树中删除整个元素，而v-show只是在元素行内添加了一个样式display=none.

v-for 循环遍历指令(遍历数组对象)
- 用法：v-for="list in lists"
- 向列表添加数据：app4.todos.push({text:"新项目"})

<div id="app4">
    <ol>
   		<li v-for="todo in todos">
   			{{ todo.text }}
    	</li>
    </ol>
</div>
<script>
	var app4 = new Vue({
		el:"#app4",
		data:{
			todos:[
				{text:"学习javascript"},
				{text:"学习Vue"},
				{text:"整个牛项目"}
			]
		}
	})
</script>

v-for 遍历数组

div id="app">
	<ul>
	<!-- 在遍历过程中没有使用下标值 -->
		<li v-for="name in names"> {{ name }}</li>
	</ul>
			
	<!-- 在便利的过程中获取索引值 -->
	<ul>
		<li v-for="(name, index) in names">{{index+1}}.{{ name }}</li>
	</ul>
			
			
</div>
<script type="text/javascript">
	const app = new Vue({
	el:"#app",
	data:{
		names:['刘德华', '张惠妹', '伍佰']
	    }
    })
		</script>

v-for 遍历对象

<div id="app">
	<!-- 在遍历对象过程中，只获取一个值那么直接获取的就是value -->
	<ul>
		<li v-for="name in info"> {{ name }}</li>
	</ul>
	<!-- 获取key 和 value  一般value在前-->
	<ul>
		<li v-for="(value, key) in info"> {{ value}}== {{ key }} </li>
	</ul>
</div>
<script type="text/javascript">
	const app = new Vue({
		el:"#app",
		data:{
			info:{
				name:'why',
				age:18,
			    height:1.88
			}
		}
	})
</script>

push() 向数组最后添加数据(可以同时添加多个)
pop() 从数组最后删除数据
shif() 删除数组中的第一个元素
unshift() 在数组最前边添加元素(可以同时添加多个)
splice() 删除元素/插入元素/ 替换语速
删除元素：第二个参数传入你要删除的几个元素
sort() 排序
reverse() 反转
set(要修改的对象，索引值，修改后的值)
Vue.set(this, 0, 'bbb')

v-on指令，添加事件监听器,绑定事件
- 用法：v-on:click="mouse"

<div id="app5">
	<p>{{ link }}</p>
	<button v-on:click="mouse">点击弹窗</button>
</div>
<script>
var app5 = new Vue({
	el:"#app5",
	data:{
		link:"测试数据"
	},

	methods : {
		mouse:function(){
			alert("tanchuang")
		}
	}
})
</script>

@click.stop="mouse"
- 假如有一组嵌套的点击事件，点击外边的只执行外围的，阻止里边的.
@click.prevent="fun"
- 阻止html标签的默认行为，例如a标签的默认链接跳转，表单提交的跳转等
@click.once="btn2click"
- 只允许点击一次，只在第一次点击的时候监听事件

<div id="app">
	<div @click="divclick()">
		aaaa
		<button @click.stop="btn1click()" type="button">点击</button>
	</div>
	
	<!--.prevent的用法-->
	<a href="http://www.sxggz.com" @click.prevent="abtn()">点击前往</a>
	<form action="baidu" method="post">
		<input type="submit" value="tijiao" @click.prevent="submitClick()"/>
	</form>
</div>
		
<script type="text/javascript">
	const app = new Vue({
		el:"#app",
		data:{
			message:"你好啊"
		},
		methods:{
			btn1click:function(){
				console.log('asdja')
			},
			divclick:function(){
			    console.log('divclick')
			}，
			submitClick(){
				console.log('阻止默认行为')
			},
			abtn(){
				console.log('阻止默认行为')
			}
		}
	})
</script>

@keyup.enter="keyclick()"

监听键盘回车键，如果后边不写.enter则监听所有的键盘按键

<input @keyup.enter="keyclick()" type="text" />

v-model指令，实现表单输入和应用状态之间的双向绑定。

用法：v-model="content"

<div id="app6">
	<p> {{ content }} </p>
	<input v-model="content">
</div>

<script>
var app6 = new Vue({
	el:"#app6",
	data:{
		content:"这是表单输入的内容！"
	}
})
</script>

vue语法总结大全

vue语法学习