Vue的简单语法

wyf.world

已于 2022-05-10 17:28:40 修改

阅读量295

点赞数 1

文章标签： vue.js 前端 javascript

于 2022-05-10 15:58:33 首次发布

本文链接：https://blog.csdn.net/weitunfei/article/details/124689402

版权

1.插值表达式

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

2.插值闪烁

当数据不是预定义的时候，而是通过网络进行获取的，那么当网络延迟加载时，页面中会显示插值表达式的语法（如图所示），等网络加载完毕后，数据进行渲染。可使用v-text或者v-html解决插值闪烁。

3.v-text

v-text：是一个指令，负责渲染数据到页面中，并且可以解决插值闪烁的问题，但是该指令只能渲染纯文本的数据。

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../public/js/vue.min.js"></script>
</head>
<body>

<div id="app">

    <h1 v-text="username"></h1>
    
    <h2 v-text="message"></h2>

</div>

<script>

        new Vue({
            el:"#app",
            data:{
                username:"使用v-text",
                message:"<a href='http://www.baidu.com'>百度</a>"
            }
        });

</script>

</body>
</html>

4.v-html

v-html：是一个指令，负责渲染数据到页面中，并且可以解决插值闪烁的问题【该指令不仅可以渲染文本也可以渲染标签】

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../public/js/vue.min.js"></script>
</head>
<body>

<div id="app">

    <h1 v-html="username"></h1>
    
    <h2 v-html="message"></h2>

</div>

<script>

        new Vue({
            el:"#app",
            data:{
                username:"使用v-text",
                message:"<a href='http://www.baidu.com'>百度</a>"
            }
        });

</script>

</body>
</html>

5.v-if

根据条件判断是否显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../public/js/vue.min.js"></script>
</head>
<body>
<div id='app'>

    <h1>今天天气怎么样？</h1>
    <h1  v-if="o1">大晴天</h1>
    <h1  v-else-if="o2">大雨天</h1>
    <h1  v-else>大雾天</h1>

</div>

<script>

        new Vue({
            el:"#app",
            data:{
                o1:false,
                o2:false
            }
        });

</script>

</body>
</html>

6.v-show

根据条件判断是否显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="./vue.min.js"></script>
</head>
<body>

<div id="app">

    <h1>今天吃饭了吗？</h1>
    <h1 v-show="bo">吃了</h1>

</div>


<script>

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

</script>

</body>
</html>

7.v-if和v-show的区别

1、v-if - 如果条件成立，那么创建该标签，如果条件不成立，那么销毁该标签【创建销毁】 - 创建和销毁，是直接操作DOM进行的 - 运行时，不经常切换或者条件不经常更改，则使用v-if

2、v-show - 如果条件成立，那么显示该标签，如果条件不成立，那么隐藏该标签【显示隐藏】 - 显示和隐藏，是通过css属性设置 - 运行时，频繁切换，则使用v-show

注意：v-if只有当条件成立，才会创建标签，v-show不管条件成立不成立，第一次都会创建该标签

8.v-for

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

风格指南 — Vue.jsVue.js - The Progressive JavaScript Frameworkhttps://cn.vuejs.org/v2/style-guide/#%E9%81%BF%E5%85%8D-v-if-%E5%92%8C-v-for-%E7%94%A8%E5%9C%A8%E4%B8%80%E8%B5%B7%E5%BF%85%E8%A6%81

8.1 v-for遍历数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue.min.js"></script>
</head>
<body>
<div id="app">
<!-- in前面如果是两个变量，那么第一个变量保存的是数组中的数据，第二个变量保存的是下标-->
    <ul>
        <li v-for="(o1,o2) in arr">{{o1}}---{{o2}}</li>
    </ul>
</div>
</body>
</html>
<script>
    new Vue({
        el:'#app',
        data:{
            arr:['魏云飞','吴陈昊','王安']
        }
    })
</script>

8.2 v-for遍历对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue.min.js"></script>
</head>
<body>
<div id="app">
<!--
    v-for="o1 in obj"          o1:属性值
    v-for="(o1,o2) in obj"     o1:属性值  o2:属性名
    v-for="(o1,o2,o3) in obj"  o1:属性值  o2:属性名  o3:下标
-->
    <ul>
        <li v-for="(o1,o2,o3) in arr">{{o1}}---{{o2}}---{{o3}}</li>
    </ul>
</div>
</body>
</html>
<script>
    new Vue({
        el:'#app',
        data:{
            arr:{
                name:'王安',
                age:23,
                sex:'男'
            }
        }
    })
</script>

8.3 v-for遍历对象数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue.min.js"></script>
</head>
<body>
<table id="app">
    <th>
        <tr>
            <td><input type="checkbox"></td>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
        </tr>
    </th>
    <tb>
        <tr v-for="(arr,index) in arr">
            <td><input type="checkbox"></td>
            <td>{{arr.name}}</td>
            <td>{{arr.age}}</td>
            <td>{{arr.sex}}</td>
        </tr>
    </tb>
</table>
</body>
</html>
<script>
    new Vue({
        el:'#app',
        data:{
            arr:[{
                name:'魏云飞',
                age:21,
                sex:'男'
            },{
                name:'吴晨皓',
                age:22,
                sex:'男'
            },{
                name:'王安',
                age:23,
                sex:'男'
            }]
        }
    })
</script>

9.v-on事件绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="./vue.min.js"></script>
</head>
<body>

<div id="app">

    <h1>{{message}}</h1>
    <button v-on:click="alert(1+1)">点击事件</button>
    <button v-on:click="getData()">点击事件获取数据</button>
    <button v-on:click="getData">点击事件获取数据</button>
    <button v-on:click="getData('我要吃雪糕')">点击事件获取数据</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>

</body>
</html>