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

一、条件与循环

1.1 条件语句

1.1.1 v-if、v-else、v-else-if

    <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>

1.1.2 v-show

1.2 模板语法

1.2.1 template v-if

<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>

1.2.1 Key管理可复用的元素

key:key的name相同时表示是为同一属性赋值，切换时保留值；不同则切换时不保留。

<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>

运行效果
key不同时：

key相同时即key=“username-input”

2.循环语句

2.1 v-for

<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>

二、处理用户输入

2.1 {{message}}

<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>

2.2 v-model

数据和dom 双向绑定

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

三、组件化应用构建

---

# 问题记录 ## 问题 1：new vue 是否全局只能有一个？ ## 问题 2：el语句的含义是？ ## 问题3：v-show和v-if使用区别？

v-show：经常需要显示Dom时，减少底层渲染。
v-if：非必须显示内容，显示次数较少时。

未完待续…