Vue的基本使用

  1. 引入vue.js
<script src="vue.min.js"></script>
<script src="vue-router.min.js"></script>
  1. 创建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  风一样的男子、  阅读(24)  评论(0)    收藏  举报