[笔记]vue从入门到入坟《三》条件与循环、处理用户输入、组件化应用构建

<h2>v-if</h2>
    <h1 v-if="awesome">Vue is awesome!</h1>
    <h1 v-else>Oh no 😢</h1>
    <h2>template</h2>
    <h2>v-else</h2>
    <div v-if="Math.random() > 0.5">
        Now you see me
    </div>
    <div v-else>
        Now you don't
    </div>
    <h2>v-else-if</h2>
    <div v-if="type === 'A'">
        A
    </div>
    <div v-else-if="type === 'B'">
        B
    </div>
    <div v-else-if="type === 'C'">
        C
    </div>
    <div v-else>
        Not A/B/C
    </div>
</div>
<script type="text/javascript" src="js/vue2.6.js"></script>
<script type="text/javascript">
    new Vue({
        el:'#app',
        data:{
            awesome:true,
            ok:true,
            type:'A'
        }
    })
</script>

<template v-if="ok">
    <h1>Title</h1>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
</template>
<script type="text/javascript">
 new Vue({
     el:'#app',
     data:{
         ok:true
     }
})
</script>

<h2> key 管理可复用的元素</h2>
<template v-if="loginType === 'username'">
        <label>Username</label>
        <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
        <label>Email</label>
        <input placeholder="Enter your email address" key="email-input">
</template>
<script type="text/javascript">
    new Vue({
        el:'#app',
        data:{
            loginType:'username'
        },
        methods:{
            toggle(){
                this.loginType =this.loginType=='username'?'email':'username';
            }
        }
    });
</script>

<h2>v-for</h2>
    <div id="app-4">
        <ol>
            <li v-for="todo in todos">
                {{ todo.text }}
            </li>
        </ol>
</div>
<script type="text/javascript">
    new Vue({
        el:'#app',
        data:{
            awesome:true,
            ok:true,
            type:'A',
            todos:[
                {
                    text:'学习javascript'
                },
                {
                     text:'学习vue'
                },
                {
                    text:'学习c++'
                }
            ]
        }
    })
</script>

<h2>用户输入</h2>
<div id="app-5">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">反转消息</button>
</div>
<script type="text/javascript">
    new Vue({
        el:'#app-5',
        data:{
            message:'hello vue.js!'
        },
        methods:{
            reverseMessage(){
                this.message = this.message.split('').reverse().join(' ');
            },
        }
    });
</script>

<h2>v-model</h2>
<div>
        <p>{{ message }}</p>
        <input v-model="message" />
</div>