Vue简单运用

1.插值表达式

插值表达式：数据绑定【插值表达式中一般指定变量，也可以指定表达式等等。】

插值闪烁

当数据不是预定义的时候，而是通过网络进行获取的，那么当网络延迟加载时，页面中会显示插值表达式的语法，等网络加载完毕后，数据进行渲染，这种现象称之为：插值闪烁

2.v-text&v-html

<div id="app">
    <h1 v-text="name"></h1>
    <h2 v-text="age"></h2>

</div>

<script>
 new Vue({
        el:"#app",
        data:{
          name:"王向晚",
          age:`<a href="www.baidu.com">百度</a>`

        }

    })


</script>

<div id="app">
    <h1 v-html="name"></h1>
    <h2 v-html="age"></h2>

</div>

<script>
 new Vue({
        el:"#app",
        data:{
          name:"王向晚",
          age:`<a href="www.baidu.com">百度</a>`

        }

    })


</script>

v-text不能读取标签 而v-html可以读取标签

3.v-if&v-show

v-if

<div id="app">
    <h1>吃饭了吗？</h1>
    <h1 v-if="ob">吃了</h1>
    <h1 v-else-if="ob">没吃</h1>
    <h1 v-else>没吃</h1>



</div>

<script>
 new Vue({
        el:"#app",
        data:{
         ob:false,


        }

    })


</script>

v-show

<div id="app">


<!--    今天做核酸了吗？-->
    <h1>今天做核酸了吗？</h1>
    <h1 style="color: green" v-show="bo">做核酸了</h1>

</div>


<script>

        new Vue({
            el:"#app",
            data:{
                bo:true
            }
        });



</script>

v-if于v-show的区别

v-if只有条件达成时会创建标签，v-show无论是否达成都会创建标签 只是通过操作css来显示隐藏

4.v-for

循环遍历数据

v-if不要和v-for同时在同一个元素上使用

1.遍历普通数组

<div id="app">
    <ul>
        <li v-for="(item,index) in array">{{item}}>>>>>{{index}}</li>
    </ul>

</div>

<script>
    new Vue({
        el:"#app",
        data:{
            array:["张三","李四","王五","尼日"]
        }


    })

</script>

2.遍历对象数组

<div id="app">
    <table border="1" cellspacing="0">
        <thead>
            <tr>

                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>

        </thead>
        <tbody>
        <tr v-for="(item,index) in array">
            <td>{{index+1}}</td>
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
            <td>{{item.sex}}</td>

        </tr>

        </tbody>


    </table>

</div>

<script>
    new Vue({
        el:"#app",
        data:{
            array:[
                {
                  name:"张三",
                  age:18,
                  sex:"男"
                },
                {
                    name:"李四",
                    age:28,
                    sex:"男"
                },
                {
                    name:"小六子",
                    age:16,
                    sex:"男"
                },
                {
                    name:"建房",
                    age:18,
                    sex:"男"
                },
                {
                    name:"翠花",
                    age:18,
                    sex:"女"
                },
            ]
        }


    })

</script>

 3.遍历对象

<div id="app">
    <ul v-if="obj.code==200">
        <li v-for="(item,steat,index) in obj">{{item}}>>>{{steat}}>>>{{index}}</li>
    </ul>

</div>

<script>
    new Vue({
        el:"#app",

        data:{
            obj:{
                code:200,
                message:"查询成功",
                array:"思雨"
            }




        }


    })

</script>

5.v-on

事件绑定

JavaScript中的onClick

jQuery中的click()

vue中的v-on:click

<div id="app">
    <h1>{{message}}</h1>
    <button v-on:click="alert(11)">点击事件</button>
    <button v-on:click="getData(11)">点击事件获取数据</button>
    <button v-on:click="setData('我真的服了')">点击事件获取数据</button>
    <button @click="getData('艹')">点击事件获取数据</button>
    <button @click="setData('我真的服了')">点击事件获取数据</button>

</div>


<script>

      let vm =   new Vue({
            el:"#app",
            data:{
                message:"真的吗？"
            },
            methods:{
                getData(params){
                    alert(params)

                },
                setData(params){
                    this.message=params;
                }
            }
        })

</script>