Vue基础-day01

Vue的基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--1.引入vue.js-->
<!--2.new Vue({}) 创建vue的实例对象-->
<!--3.使用el选项,指定被vue控制的dom区域-->
<!--4.声明一个被vue控制的dom区域-->

<!--模板-->
<div id="app">
    <p>{{username}}</p>
</div>

<script src="./lib/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            username: 'zhangsan'
        }
    })
</script>

</body>
</html>

Vue的基本指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--1.引入vue.js-->
<!--2.new Vue({}) 创建vue的实例对象-->
<!--3.使用el选项,指定被vue控制的dom区域-->
<!--4.声明一个被vue控制的dom区域-->

<!--模板-->
<div id="app">
    <p>{{username}}</p>
    <!--  v-html:将一个带有标签的字符串渲染成为一个真正的Html元素-->
    <p v-html="str"></p>

    <!--  字面量-->
    <div>{{1}}</div>
    <div>{{'abc'}}</div>
    <div>{{true}}</div>
    <div>{{[1, 2, 3]}}</div>
    <div>{{ {a: 1} }}</div>
    <!--    表达式:能够得到一个值的式子-->
    <!--    数学式子-->
    <div>{{1 + 2}}</div>
    <!--    字符串的拼接-->
    <div>{{'a' + 'bc'}}</div>
    <!--    三元表达式-->
    <div>{{ age > 18 ? '成年' : '未成年'}}</div>
    <!--    函数调用-->
    <div>{{['a', 'b', 'c'].join('')}}</div>
    <!--    对象取值-->
    <div>{{obj.a}}</div>
</div>

<script src="./lib/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            username: 'zhangsan',
            str: '<h3 style="color: red">黑马程序员</h3>',
            obj: {
                a: 1
            }
        }
    })
</script>

</body>
</html>

Vue的其他指令

属性绑定指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <!--    属性绑定指令,可以为标签动态绑定属性-->
    <!--    语法:v-bind:属性名="属性值"-->
    <input type="text" v-bind:placeholder="placeholderValue">

    <hr>

    <!--    简写-->
    <!--    语法: :属性名="属性值"-->
    <input type="text" :placeholder="placeholderValue">
</div>

<script src="./lib/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            placeholderValue: '请输入姓名'
        }
    })
</script>

</body>
</html>

事件绑定指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

    <p>{{count}}</p>

    <!--    事件绑定指令:v-on:事件名="事件处理函数"-->
    <button v-on:click="addCount">+1</button>
    <hr>
    <!--    简写形式: @事件名="事件处理函数"-->
    <button @click="addCount">+1</button>
    <hr>
    <!--    如果时间处理函数中只用一行代码,可以直接写在行内(模板),且不用写this,下方methods中也不用再声明-->
    <button @click="count++">+1</button>
    <hr>
    <!--    传递参数-->
    <button @click="addCount(1)">+1</button>
    <button @click="addCount(2)">+2</button>
    <button @click="addCount(3)">+3</button>
</div>

<script src="./lib/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            count: 0
        },
        //vue项目中使用到的方法和函数,都需要在methods中声明
        methods: {
            // addCount: function (n) {
            // this.count++
            //简写形式
            addCount(n) {
                this.count += n
                //    this就是vue的实例对象
                //    我们声明的data数据和methods方法都会被挂载到vue实例对象上面
                //    在methods定义的方法中,使用this.数据名来获取data中的数据
            }
        }
    })
</script>

</body>
</html>

事件修饰符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .outer {
        padding: 50px;
        background-color: blue;
    }

    .inner {
        height: 100px;
        background-color: pink;
    }
</style>
<body>

<div id="app">
    <!--    .prevent:阻止默认行为-->
    <a href="http://www.ruruzi.com" @click.prevent>去博客</a>
    <!--    .stop:组织冒泡-->
    <div class="outer" @click="outerClick">
        <div class="inner" @click.stop="innerClick">
        </div>
    </div>
</div>

<script src="./lib/vue.js"></script>

<script>
    new Vue({
        el: '#app',
        data: {
        },
        //vue项目中使用到的方法和函数,都需要在methods中声明
        methods: {
            outerClick() {
                console.log('点击了outer')
            },
            innerClick() {
                console.log('点击了inner')
            }
        }
    })
</script>

</body>
</html>

按键修饰符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <input type="text" @keyup.enter="submit">

    <hr>

    <input type="text" @keyup.esc="clear">
</div>

<script src="./lib/vue.js"></script>

<script>
    new Vue({
        el: '#app',
        data: {
        },
        //vue项目中使用到的方法和函数,都需要在methods中声明
        methods: {
            submit(){
                console.log('触发了enter抬起事件')
            },
            clear(e){
                console.log('触发了esc抬起事件')
                e.target.value=''
            }
        }
    })
</script>

</body>
</html>

双向绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <div id="app">
        <!-- v-model 的使用 -->
        <input type="text" v-model="username">
        <!-- 注意:v-model 只能配合表单元素一起使用 -->
        <!-- <div v-model="username"></div> -->
      </div>
    
      <script src="./lib/vue.js"></script>
      <script>
        const vm = new Vue({
          el: '#app',
          data: {
            username: 'zhangsan'
          }
        })
      </script>

</body>
</html>

双向数据绑定的专属修饰符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <!--    .number:将输入框的内容自动转换成数字类型-->
    <input type="text" v-model.number="num1">+<input type="text" v-model.number="num2">={{num1 + num2}}
    <hr>
    <!--    .trim:去掉首尾空格-->
    <input type="text" v-model.trim="username">

    <hr>
    <!--    .lazy:让v-model绑定的值,在触发change时再更新,而不是input时更新-->
    <input type="text" v-model.lazy="str">

    <hr>
    <input type="text" @input="handleInput">
    <input type="text" @change="handleChange">

</div>

<script src="./lib/vue.js"></script>

<script>
    new Vue({
        el: '#app',
        data: {
            num1: 0,
            num2: 0,
            username: 'zhangsan',
            str: 'abc'
        },
        //vue项目中使用到的方法和函数,都需要在methods中声明
        methods: {
            handleInput() {
                console.log('触发了input事件')
            },
            handleChange() {
                console.log('触发了change事件')
            }

        }
    })
</script>

</body>
</html>

条件渲染指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <button @click="flag=!flag">toggle切换</button>
    <!--    v-if="表达式" v-if后表达式的值如果是true,被他控制的元素就显示,否则就隐藏-->
    <p v-if="flag">这是被v-if控制的元素</p>
    <!--    v-show="表达式" v-show,被他控制的元素就显示,否则就隐藏-->
    <p v-show="flag">这是被v-show</p>
</div>

<script src="./lib/vue.js"></script>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            flag: true
        }
    })
</script>
</body>
</html>

v-if的配套指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--    v-if的配套指令只能和v-if配套使用,不能单独使用-->
    <p v-if="score==='A'">优秀</p>
    <p v-else-if="score==='B'">良好</p>
    <p v-else-if="score==='C'">及格</p>
    <p v-else>不及格</p>
</div>
<script src="./lib/vue.js"></script>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            score: 'A'
        }
    })
</script>

</body>
</html>

列表的渲染指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <ul>
        <!--       列表渲染指令:循环渲染一个列表结构-->
        <!--       你要渲染哪个列表,就在那个元素上面加上v-for-->
        <!--       语法:v-for="数组中的每一项 in 数组"-->
        <li v-for="item in arr">名字是{{item.name}}---年龄是{{item.age}}</li>
    </ul>

    <ul>
        <!--    获取索引-->
        <li v-for="(item,index) in arr">索引是{{index}}---名字是{{item.name}}---年龄是{{item.age}}</li>
    </ul>
</div>
<script src="./lib/vue.js"></script>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            arr: [
                {id: 1, name: '蜘蛛侠', age: 20},
                {id: 2, name: '钢铁侠', age: 30},
                {id: 3, name: '绿巨人', age: 40},
                {id: 4, name: '奥特曼', age: 10}
            ]
        }
    })
</script>

</body>
</html>

Q.E.D.