Vue基础语法

最新推荐文章于 2022-09-12 20:32:16 发布

zhengyanyan123

最新推荐文章于 2022-09-12 20:32:16 发布

阅读量225

点赞数 1

分类专栏：笔记 Vue学习文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/zhengyanyan123/article/details/122523788

版权

笔记同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

Vue学习

2 篇文章 0 订阅

订阅专栏

前端页面页面渲染方式

数据：数据绑定
选择
循环
事件

数据绑定

双括号显示数据
v-bind

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue取值和v-bind</title>
</head>

<body>

<!--view层-->
<div id="app">
    {{message}}

    <br>

    <span v-bind:title="message">
        鼠标悬浮时显示message中的内容。
    </span>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        //Model层
        data: {
            message: "hello,vue!"
        }
     });
</script>

</body>
</html>

上面这段代码就把数据绑定的两种方式都用上了，可以使用{{}}方式取数据显示在页面中，也可以通过v-bind指令来取数据。

选择：v-if指令

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

<!--view层-->
<div id="app">
    <h1 v-if="ok">Yes</h1>
    <h1 v-else>No</h1>

    <h1 v-if="type=='A'">A</h1>
    <h1 v-else-if="type=='B'">B</h1>
    <h1 v-else-if="type=='C'">C</h1>
    <h1 v-else>D</h1>
</div>

<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            ok: true,
            type: 'A'
        }
     });
</script>

</body>
</html>

通过v-if指令、v-else-if指令、v-else指令可以实现选择条件渲染数据。

循环：v-for

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

<!--view层-->
<div id="app">
    <li v-for="item in items">
        {{item.message}}
    </li>
</div>

<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            items: [
                {message: 'Java'},
                {message: 'Vue'},
                {message: '运维'}
            ]
        }
     });
</script>

</body>
</html>

数据的遍历可以通过v-for指令来实现，关键词是in。

事件：v-on指令绑定事件方法

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>v-on</title>
</head>
<body>

<!--view层-->
<div id="app">
    <button v-on:click="sayHi">click me</button>
</div>

<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: "hello"
        },
        methods: { //方法必须定义在vue的method中
            sayHi: function(){
                alert(this.message);
            }
        }
     });
</script>

</body>
</html>

事件绑定可以通过v-on指令实现，将方法写在vue对象的methods属性中，在通过v-on指令绑定事件。