vue实战学习（一）第一个Vue程序

最新推荐文章于 2022-07-20 11:00:52 发布

褚念荣

最新推荐文章于 2022-07-20 11:00:52 发布

阅读量178

点赞数

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

本文链接：https://blog.csdn.net/weixin_43064364/article/details/104384176

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

vue基础学习笔记

摘自： vue.js官方网站、极客时间的vue开发实战视频

1.script 的 src属性值可分为：

开发版本：包含完整的警告和调试模式

 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

生产版本：删除了警告，33.30KB min+gzip

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

在vscode编辑第一个vue页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">{{message}}</div> <!-- 这里的双括号使用的是mustache模板渲染引擎--->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm= new Vue({//Vue 会被注册为一个全局变量
            el:"#app",
            data:{
                message:"hello world"
            }
        })
    </script>
</body>
</html>

浏览器打开，页面打印出hello world

控制台改变message的值，页面内容也实时改变
在这里插入图片描述

mustache实现字符串拼装

<div id="app">{{message}} {{message +message}}</div>

浏览器页面效果
在这里插入图片描述

v-bind指令

新增一个div <div id="message" ></div> 浏览器访问id值为message，使用v-bind后id值为vm.message值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">{{message}} {{message +message}}
        <div v-bind:id='message'></div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm= new Vue({
            el:"#app",
            data:{
                message:"hello world"
            }
        })
    </script>
</body>
</html>

浏览器访问为：
浏览器检查元素
简写一个冒号“：” <div :id="message" > </div>

v-bind也可以运用到class、href、src 等属性上，新建一个home.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div :title="message" :class="{class1:isTrue,'class2':haha}">sssss</div>
        <div :class="sssss">lllll</div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm=new Vue({
            el:"#app",
            data:{
                message:'hi 请检验',
                isTrue:true,
                class1:'icon',
                haha:true,
                sssss:'hat'
            },
        })

    </script>
</body>
</html>

浏览器显示结果：一个div的class值为 class1 class2 ，而不是 icon class2
在这里插入图片描述

v-if 、v-else指令

v-if可以实现条件渲染，Vue会根据表达式的值的真假条件来渲染元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <ul>
            <li>
                <span v-if="item.flag">{{item.title}}</span>
                <span v-else style="text-decoration:line-through">{{item.title}}</span>
                <!-- <span v-else="!flag">{{item.title}}</span>错误示例 -->
            </li>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm= new Vue({
            el:"#app",
            data:{
                item: {
                    title:'解除隔离',
                    flag:true
                }
            }
        })
    </script>
</body>
</html>

v-show

v-show也是用于根据条件展示元素。和v-if不同的是，如果v-if的值是false，则这个元素被销毁，不在dom中。但是v-show的元素会始终被渲染并保存在dom中，它只是简单的切换css的dispaly属性。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">{{message}} {{message +message}}
        <div v-bind:id='message'></div>
        <div v-show="show">hi</div>
       
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm= new Vue({
            el:"#app",
            data:{
                message:"hello world",
                show:false
            }
        })
    </script>
</body>
</html>

v-for

解释：数据都放到data：{ } 里，字符串用message:" 字符串内容" 示例data：{message："hello world"} ；对象用{} 示例data：{ item：{ title："图书",flag:true}} ；数组用[ ] ,示例data :[{title :"图书"},{title: "陶瓷"}]
用v-for指令根据遍历数组来进行渲染
有下面两种遍历形式

<div v-for="(item,index) in items"></div>   //使用in，index是一个可选参数，表示当前项的索引
<div v-for="item of items"></div>

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">{{message}} {{message +message}}
        <div v-bind:id='message'></div>
        <ul>
            <li  v-for="item of list"> 
                <span v-if="item.flag">{{item.title}}</span>
                <span v-else style="text-decoration:line-through">{{item.title}}</span>
            </li>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm= new Vue({
            el:"#app",
            data:{
                message:"hello world",
                list:[
                    {
	                    title:'解除隔离',
	                    flag:true
                    },
                    {
                        title:'可以出去买菜下·',
	                    flag:false
                    }
                ]
            }
        })
    </script>
</body>
</html>