vue基本基本语法

最新推荐文章于 2023-07-04 09:47:43 发布

siiove

最新推荐文章于 2023-07-04 09:47:43 发布

阅读量841

点赞数

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

本文链接：https://blog.csdn.net/qq_46423017/article/details/127132018

版权

Vue 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

1、v-bind

2、v-if...v-else-if...v-else

v-if函数

v-if-else

v-for循环

1、v-bind

除了文本插值，我们还可以像这样来绑定元素 attribute

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>Java</h1>
<!--view层 模板-->
<div id="app">
    <span v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span>
</div>
</body>
<!--导入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",
        //Model：数据
        data: {
            message: "hello,vue1"
        }
    })
</script>
</html>

输出效果：

如果用

vm.message="hello1" 
'hello1'

这里我们遇到了一点新东西。你看到的 v-bind attribute 被称为指令。
指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute。
可能你已经猜到了，它们会在渲染的 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 title attribute 和 Vue 实例的 message property 保持一致”。
如果你再次打开浏览器的 JavaScript 控制台，输入 vm2.message = '新消息'，就会再一次看到这个绑定了 title attribute 的 HTML 已经进行了更新。

2、v-if...v-else-if...v-else

v-if函数

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

<!--view层，模板-->
<div id="app">
    <!--    v-if 默认是true-->
    <h1 v-if="ok">Yes</h1>
    <h1 v-else>No</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",
        //Model：数据
        data: {
            ok: true
        }
    })
</script>

</body>
</html>

默认是true

自己使用进行修改

vm.ok=false

false

v-if-else

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层，模板-->
<div id="app">
    <!--    v-if 默认是true-->
    <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",
        //Model：数据
        data: {
            type: 'A'
        }
    })
</script>
</body>
</html>

默认是A

如果使用

vm.type=1
1

如果使用

vm.type='B'
'B'
vm.type='C'
'C'

v-for循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层，模板-->
<div id="app">
    <!--item in items这个的意思就是在items中去创建一个新的item-->
    <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>
    let vm = new Vue({
        el: "#app",
        //Model：数据
        data: {
            items: [
                {message: '杉木爱java'},
                {message: '山姆爱vue'},
                {message: '山姆爱运维'}
            ]
        }
    });
</script>
</body>
</html>