Vue的基本使用

引入vue.js

 <script src="vue.min.js"></script>
<script src="vue-router.min.js"></script>

创建vue对象，绑定id

 <body>
    <div id="app"> 
    </div>
	
    <script src="vue.min.js"></script>
    <script src="vue-router.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
            },
            methods:{   
            },
        })
    </script>
</body>

Vue的语法

插值绑定

 {{message}}

单向绑定

 <h1 v-bind:title="message">标题</h1>
<h1 :title="message">标题</h1>//可省略v-bind,用:代替

双向绑定

 <input type="text" v-model="text"/>{{text}}

事件绑定

 <button type="submit" v-on:click="fun()">提交</button>
//使用@替换v-on:
<button type="submit" @click="fun()">提交</button>
 
//阻止事件的提交，执行自定义的方法
<form action="save" v-on:submit.prevent="onSubmit">
            <input type="text" id="name" v-model="user.name" />
            <button type="submit">保存</button>
</form>

v-if

 <input type="checkbox" v-model="ok" />是否同意
<h1 v-if="ok">同意</h1>
<h1 v-else>不同意</h1>

v-for

 <table>
    <tr v-for="(user,index) in userList">
        <td>{{index}}</td>
	<td>{{user.id}}</td>
	<td>{{user.username}}</td>
    </tr>
</table>

posted @ 2022-11-18 22:27 风一样的男子、阅读(16) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· Vue3中使用路由跳转页面router

· Swagger的基本使用

· VUE基本使用

· Vue基础语法+双向绑定+小练习

· vue基础用法-初步使用vue

公告

昵称：风一样的男子、
园龄： 2年3个月
粉丝： 0
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

风一样的男子、

Vue的基本使用

公告

搜索

常用链接

我的标签

随笔分类

随笔档案

阅读排行榜

	<script src="vue.min.js"></script>
	<script src="vue-router.min.js"></script>

	<body>
	<div id="app">
	</div>

	<script src="vue.min.js"></script>
	<script src="vue-router.min.js"></script>
	<script>
	new Vue({
	el: '#app',
	data: {
	},
	methods:{
	},
	})
	</script>
	</body>

	<h1 v-bind:title="message">标题</h1>
	<h1 :title="message">标题</h1>//可省略v-bind,用:代替

	<button type="submit" v-on:click="fun()">提交</button>
	//使用@替换v-on:
	<button type="submit" @click="fun()">提交</button>

	//阻止事件的提交，执行自定义的方法
	<form action="save" v-on:submit.prevent="onSubmit">
	<input type="text" id="name" v-model="user.name" />
	<button type="submit">保存</button>
	</form>

	<input type="checkbox" v-model="ok" />是否同意
	<h1 v-if="ok">同意</h1>
	<h1 v-else>不同意</h1>

	<table>
	<tr v-for="(user,index) in userList">
	<td>{{index}}</td>
	<td>{{user.id}}</td>
	<td>{{user.username}}</td>
	</tr>
	</table>