vue的简单初使用

一般用于标签属性中

单向绑定

<h1 v-bind:title="message">
    {{content}}
</h1>

<!-- 简写 -->
<h1 :title="message">
    {{content}}
</h1>

<script>
        new Vue({
            el: '#app',
            data: {
                content: '我是标题',
                message: '页面加载于 ' + new Date().toLocaleString()
            }
        })
 </script>

双向绑定

<!-- 双向绑定 -->
        <input type="text" v-model:value="searchMap.keyWord"/>

        <p>{{searchMap.keyWord}}</p>

<script>
        new Vue({
            el: '#app',
            data: {
                searchMap:{
                    keyWord: 'starcpdk'
                }
            }
        })
</script>

事件绑定

 <div id="app">
        <!-- vue中绑定事件 -->
        <button v-on:click="search()">查询</button>
 </div>

<!-- 简写 -->

 <div id="app">
        <!-- vue中绑定事件 -->
        <button @click="search()">查询</button>
 </div>

<script>
        new Vue({
            el: '#app',
            data: {
                searchMap:{
                    keyword:'峡谷'
                },
                result:{}
            },
            methods:{//定义多个方法
                search(){
                    console.log('searche.........')
                },
                f1(){
                    console.log('f1111111')
                }
            }
        })
 </script>

vue修饰符
v-on:submit.prevent限制原方法的功能让其执行自己定义的方法

<div id="app">
        <form action="save" v-on:submit.prevent="onSubmit()">
            <input type="text" v-model="user.name" id="name"/>
            <button type="submit">保存</button>
        </form>
    </div>

<script>
        new Vue({
            el: '#app',
            data: {
                user:{}
            },
            methods:{
                onSubmit(){
                    if(this.user.name){
                        console.log("提交表单")
                    }else{
                        alert("请输入用户名")
                    }
                }
            }
        })
    </script>

v-if指令

<div id="app">
        <input type="checkbox" v-model="ok"/>
        <!-- 条件指令 v-if  v-else -->
        <h1 v-if="ok">姚云峰</h1>
        <h1 v-else>starcpdk</h1>
</div>

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

v-for指令

<div id="app">
        <ul>
            <li v-for="n in 10">{{n}}</li>
        </ul>

        <ol>
            <li v-for="(n,index) in 10">{{n}}--{{index}}</li>
        </ol>

        <hr/>

        <table border="1">
            <tr v-for="user in userList">
                <td>{{user.id}}</td>
                <td>{{user.username}}</td>
                <td>{{user.age}}</td>
            </tr>
        </table>
</div>

<script>
        new Vue({
            el: '#app',
            data: {
                userList: [
                    { id: 1, username: 'helen', age: 18 },
                    { id: 2, username: 'peter', age: 28 },
                    { id: 3, username: 'andy', age: 38 }
                ]
            }
        })
    </script>