3、Vue：Vue基本语法

最新推荐文章于 2024-08-23 18:51:34 发布

很皮的皮蛋瘦肉粥

最新推荐文章于 2024-08-23 18:51:34 发布

阅读量128

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/cxycxytony/article/details/108136995

版权

Vue 专栏收录该内容

10 篇文章 3 订阅

订阅专栏

文章目录

3.1、v-bind
3.2、v-if,v-else
3.3、v-for
3.4、v-on事件绑定

3.1、v-bind

我们已经成功创建了第一个Vue应用!看起来这跟渲染一个字符串模板非常类似,但是Vue在背后做了大量工作。现在数据和DOM已经被建立了关联，所有东西都是响应式的。我们在控制台操作对象属性,界面可以实时更新!

我们还可以使用v-bind来绑定元素特性!

上代码

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

</head>
<body>

<!--view层 模板-->
<div id="app">
    <span v-bind:title="message">
        鼠标悬停几秒后查看此处动态代码绑定的提示信息！
    </span>
</div>


<!--导入Vue.js-->
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>

<script>
    var vm = new Vue({
        el: "#app",
        //Model：数据
        data:{
            message:"hello,vue！"
        }
    });
</script>

</body>
</html>

你看到的v-bind等被称为指令。指令带有前缀v-,以表示它们是Vue提供的特殊特性。可能你已经猜到了，它们会在渲染的DOM上应用特殊的响应式行为。在这里，该指令的意思是:“将这个元素节点的title特性和Vue实例的message属性保持一致"

如果你再次打开浏览器的JavaScript控制台，输入app.message = ‘新消息’，就会再一次看到这个绑定了title 特性的HTML已经进行了更新。

3.2、v-if,v-else

条件判断语句，以下两个属性！

v-if
v-else

上代码

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

<!--view层 模板-->
<div id="app">
    <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.bootcss.com/vue/2.5.16/vue.min.js"></script>

<script>
    var vm = new Vue({
        el: "#app",
        //Model：数据
        data:{
            type: 'A'
        }
    });
</script>

</body>
</html>

3.3、v-for

上代码

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

<!--view层 模板-->
<div id="app">
    <li v-for="item in items">
        姓名：{{item.name}} | 年龄：{{item.age}}}
    </li>
<!--  <li v-for="item,index in items"> 如果这样写，还可以通过{{index}}获得数组下标  -->
</div>


<!--导入Vue.js-->
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>

<script>
    var vm = new Vue({
        el: "#app",
        //Model：数据
        data:{
            items:[{name:'张三',age:"18"},
                   {name:'李四',age:"18"},
                   {name:'王五',age:"18"}
            ]
        }
    });
</script>

</body>
</html>

3.4、v-on事件绑定

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


<!--view层 模板-->
<div id="app">
    <button v-on:click="sayHi()">Click Me</button>
</div>


<!--导入Vue.js-->
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
s
<script>
    var vm = new Vue({
        el: "#app",
        //Model：数据
        data: {
            message: "chen"
        },
        method: { // 方法必须定义在Vue的 Method对象中,
            sayHi: function (event) {
                alert(this.message)
            }

        }
    });
</script>

</body>
</html>