Vue学习笔记(一)

boy快快长大

已于 2023-04-14 16:45:02 修改

阅读量666

点赞数

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

于 2023-01-06 16:11:30 首次发布

本文链接：https://blog.csdn.net/Blue_Pepsi_Cola/article/details/128420504

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

1. 什么是Vue

官网
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

2. 安装Vue

Vue.js的安装有三种方式

使用独立版本
使用CDN的方式
使用NPM的方式

2.1 使用独立版本

直接从Vue官网上下载Vue的JavaScript脚本文件，然后再页面中通过<script>引入。官网提供了两个不同的版本：开发版和生产版。
1.开发版本
包含了完成的警告和调式模式，用于开发模式。
2.生产版本
删除了告警，进行了代码压缩，文件较小。
在这里插入图片描述

2.2 使用CDN方式

CDN(Content Delivery NetWork)即内容分发网络。CDN是构建在现有网络基础上的智能虚拟网络，依靠在部署各地的边缘网络，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问的响应速度和命中率。
国内两个稳定的CDN

Staticfile CDN
BootCDN

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

<script src="https://unpkg.com/vue@next"></script>

2.3 使用NPM方式

NPM全称是Node Package Manager是一个Node.js包管理和分发工具，也是整个Node.js社区最流行，支持第三方模块最多的包管理器。

3.Vue语法

Hello World

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue 基础</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
    {{ message }}
</div>

<script>
    var app = new Vue({
        el: "#app",
        data: {
            message: "Hello Vue!"
        }
    })
</script>

</body>
</html>

3.1 el挂载点

id的选择器是 el:"# "
class的选择器是 “.app” 如：

<div class="c">
    {{ message }}
</div>

<script>
    var app = new Vue({
        el: ".c",
        data: {
            message: "Hello Vue!"
        }
    })
</script>

结果： Hello Vue

的挂载点是 el:"div"
挂载点不要在body 或者 html 标签中

3.2 data数据对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue 急促</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

</head>
<body>
    <div id="app">
        {{ message }}
        <h2>{{address.name}} {{address.telephone}}</h2>
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "Hello Lixiang!",
                address: {
                    name: "北京",
                    telephone: "110"
                },
                part: ["企业系统", "研发四部", "研发二组"]
            }
        })
    </script>

</body>
</html>

3.3 V-text 设置标签内的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h2 v-text="message">厉害了</h2>  //标签里面的内容被覆盖
        <h2 v-text="info"> 厉害了</h2>    //标签里面的内容被覆盖
        <h2>{{message}} 最棒</h2>         //不会把最棒替代掉
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "北京理想汽车",
                info: "最好的新能源汽车"
            }
        })
    </script>

</body>
</html>

3.4 V-html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
        <div id="app">
            <p v-html="content"></p>
        </div>

        <script>
            //创建Vue实例
            var app = new Vue({
                el:"#app",
                data:{
                    content:"<a href='https://www.baidu.com'>百度</a>"
                }
            })
        </script>

</body>
</html>

3.5 V-on

v-on的指令作用是为元素绑定事件，事件名不需要写on指令可以简写为@,绑定的方法定义在methods属性中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
<!--        <input type="button" value="V-on指令" v-on:click="doit" >-->
        <input type="button" value="V-on指令" @click="doit" >
<!--        <input type="button" value="事件绑定" v-on:monseenter="dolt">-->

        <!-- <input type="button" value="事件绑定" v-on:dblclick="dolt">  
         与下面是等价的 双击事件 -->
        <input type="button" value="事件绑定" @dblclick="doit">

        <h2 @click="changedFood">{{ food }}</h2>
    </div>

    <script>
        // 创建示例
        var app = new Vue({
            el:"#app",
            data:{
                food:"西兰花炒鸡蛋"
            },
            methods:{
                doit:function(){
                    alert("做IT")
            },
            changedFood:function (){
                   // console.log(this.food)
                this.food += "好好吃！";
            }
          }
       });
    </script>
</body>
</html>

3.6 计数器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<!-- html结构 -->
<div id="app">
    <!-- 计算器功能区域 -->
    <div class="input-num">
        <button @click="sub">
            -
        </button>
        <span>{{ num }}</span>
        <button @click="add">
            +
        </button>
    </div>
</div>
<script>
    //创建Vue实例
    var app = new Vue({
        el: "#app",
        data: {
            num: 1
        },
        methods:{
            add:function () {
               this.num++;
               if(this.num<10){
                   console.log('add');
               }else {
                   alert("别点了，最大了！")
               }
            },
            sub:function () {
                console.log('sub');
                if(this.num>0){
                    this.num--;
                }else {
                    alert("别点了，最小了！")
                }

            }
        }
    })
</script>

</body>
</html>

其中，创建Vue时，el(挂载点),data(数据),methods(方法)
v-on指令的作用是绑定事件,简写为@
方法中通过this关键字获取data中的数据
v-text指令的作用是，设置元素的文本值，简写为{{}}

3.7 v-show

根据表达式的真假，切换元素的显示和隐藏,原理是修改元素的display,实现显示隐藏，指令后面的内容最终都会被解析为布尔值，true显示，false隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" value="切换显示状态" @click="changeIsShow">
        <img v-show="isShow" src="https://inews.gtimg.com/newsapp_bt/0/15137112504/1000" alt="">
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                isShow : false
            },
            methods:{
                changeIsShow:function(){
                    this.isShow = !this.isShow;
                }
            }
        })
    </script>

</body>
</html>

3.8 V-if

根据表达式的真假，切换元素的显示和隐藏(操纵Dom元素)

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

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>

    <div id="app">
        <input type="button" value="切换显示" @click="toggleIsShow">
        <p v-if="isShow">这是一个p标签</p>
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                isShow:false
            },
            methods :{
                toggleIsShow:function (){
                    this.isShow = !this.isShow;
                }
            }

        })
    </script>

</body>
</html>

3.9 v-bind

v-bind指令的作用是为元素绑定属性，完整写法是v-bind:属性名，简写的话可以省略v-bind，只保留：属性名

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>v-bind指令</title>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
        <div id="app">
            <img v-bind:src="imgSrc" alt="">
            <!-- 可以省略v-bind 直接使用:src -->
            <img :src="imgSrc" alt="">
            <img v-bind:title="imgTitle + '!!!!!!' " alt="">
        </div>

        <script>
            //创建Vue实例
            var app = new Vue({
                el:"#app",
                data:{
                    imgSrc:"https://inews.gtimg.com/newsapp_bt/0/15137112504/1000",
                    imgTitle:"哈哈哈哈哈哈"
                }
            })
        </script>
</body>

</html>

在这里插入图片描述

3.10 v-for

v-for指定的作用是：根据数据生成列表结构
数组经常和v-for结合使用，语法是(item,index) in 数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <ul>
            <!--  item是里面的内容  Index是数据里面个数0 1 2 3 4 5-->
            <li v-for="(item,index) in arr">{{ item }}:{{index}}</li>
        </ul>
        <h2 v-for="item in vegetables" :title="item.name" >{{ item.name }}</h2>
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                arr:["大豆","小麦",3,4,5],
                vegetables:[
                    {name:"蛋炒饭"},
                    {name:"好吃"}
                ]
            },

        })
    </script>
</body>
</html>

3.11 V-model

获取和设置表单元素的值(双向数据绑定)，更改任何一边都会同步更改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <intput type="button" value="修改message" @click="setM">
        <input type="text" v-model="message" @keyup.enter="getM">
        <h2>{{ message }}</h2>
    </div>

<script>
    var app = new Vue({
        el: "#app",
        data: {
            message: "哈哈哈哈哈哈哈"
        },
        methods:{
            getM:function () {
                alert(this.message);
            },
            setM:function () {
                this.message = "酷丁鱼";
            }
        },
    })
</script>
</body>
</html>

4.class与style绑定

HTML元素有两个设置样式的属性:class和style

<style> 标签定义 HTML 文档的样式信息。
在 <style> 元素中，您可以规定在浏览器中如何呈现 HTML 文档。
每个 HTML 文档能包含多个 <style> 标签。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title>
<style type="text/css">
    h1 {color:red;}
    p {color:blue;}
</style>
</head>

<body>
    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
</body>

</html>

class 属性定义了元素的类名。
class 属性通常用于指向样式表的类。但是，它也可以用于 JavaScript 中（通过 HTML DOM）, 来修改 HTML 元素的类名。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title>
    <style>
        h1.intro 
                {
                        color:blue;
                }
                p.important 
                {
                        color:green;
        }
    </style>
    </head>
<body>

    <h1 class="intro">标题 1</h1>
    <p>段落。</p>
    <p class="important">注意：这是一个很重要的段落</p>

</body>
</html>

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

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <style>
        div.active{
            width:100px;
            height:100px;
            background:red ;
        }
    </style>
    <div id="app">
        <div v-bind:class="{ active:isActive }"></div>
    </div>
    
<script>
    var app = new Vue({
        el: "#app",
        data: {
            isActive:true
        }
    })
</script>

</body>
</html>

5.表单输入绑定

5.1 单行文本输入框

在input元素中，使用value属性设置了一个初始值"Hello Vue.js",用v-model指令绑定一个表达式message,对应的数据属性是message
在这里插入图片描述
页面的显示效果

V-model提供了一个trim修饰符，可以帮我们自动过滤数据收尾的空白字符
<input type="text" v-model.trim="message" value="Hello Vue.js">

5.2 多行文本输入框

在这里插入图片描述

5.3 复选框

复选框在单独使用和多个复选框一起使用时，v-model绑定的值会有所不同，对于前者，绑定的是布尔值，选中则值为true,未选中则为false;后者绑定的是同一个数组，选中的复选框的值将被保存到数组中。

5.4 单选按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <input id="male" type="radio" value="1" v-model="gender">
        <label for="male">男</label>
        <br>
        <input id="female" type="radio" value="0" v-model="gender">
        <label for="female">女</label>
        <br>
        <span>性别：{{ gender }}</span>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                gender: ''
            }
        });
    </script>
</body>
</html>

5.5 选择框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h3>单选选择框</h3>
        <select v-model="education">
            <option disabled value="">请选择您的学历</option>
            <option>高中</option>
            <option>本科</option>
            <option>硕士</option>
            <option>博士</option>
        </select>
        <p> 您的学历是 :{{ education }} </p>
        <h3>多选选择框</h3>
        <select v-model="searches" multiple>
            <option v-for="option in options" v-bind:value="option.value">
                {{ option.text }}
            </option>
        </select>
        <p> 您选择的搜索引擎是 :{{searches}} </p>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                education:'',
                searches:[],
                options:[
                    {text:'百度', value:'baidu.com'},
                    {text:'谷歌', value:'google.com'},
                    {text:'必应', value:'bing.com'}
                ]
            }
        });
    </script>
</body>
</html>

其中disabled标签属性
在这里插入图片描述

5.6 值绑定

v-model针对不同的表单控件，绑定的值都有默认的约定，在单个复选框中，绑定的是布尔值，多个复选框中绑定的是一个数组，选中的复选框value属性的值被保存到数组中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <input id="agreement" type="checkbox" v-model="isAgree"
        true-value="yes"
        false-value="no">
        <label for="agreement">{{isAgree}}</label>
    </div>

    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                isAgree:false
            }
        });
    </script>

</body>
</html>

6.补充部分

6.1 html与text

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 插值语法本质: DOM的 innerText - 原样输出 -->
        <div>插值语法: {{word}}</div>
        <!-- 同 {{}} 的效果,  由于字母更多, 大家不愿意写.. -->
        <div v-text="word"></div>
        <!-- 类似于 innerHTML 效果: 可以被浏览器解析 -->
        <div v-html="word"></div>
    </div>

    <script>
        new Vue({
            el: "#app",
            data: {
                word: "<h1>Hello World!</h1>",
            },
        })
    </script>
</body>

</html>

在这里插入图片描述

6.2 遮罩隐藏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>
        /* 属性选择器:  [属性名] 选择带有 指定属性的元素 */
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <!-- 现象: 实际工作时, 通常JS文件不会直接书写在 HTML 中, 而是通过引入的方式, 把JS制作为独立的JS文件 -->
    <!-- 极少见的状况: 网速极慢; HTML加载完毕 但是JS未加载完毕 -->
    <!-- 解决: 在 vue 未加载完毕之前, 先隐藏DOM元素 -->
    <!-- v-clock: 需要搭配 css 实现隐藏 -->
    <div id="app" v-cloak>
        <!-- 本质: new Vue() 完成后, 会自动删除 v-cloak 属性 -->
        <h1>Welcome to {{message}}</h1>
    </div>

    <script>
        // 加载 vue 的代码存储在外部的css 文件中, 引入加载耗时2s
        setTimeout(() => {
            new Vue({
                el: "#app",
                data: { message: "2107" }
            })
        }, 2000)
    </script>
</body>

</html>

v-pre原模原样输出，忽略vue关键词专门针对{{}}插值语法，让标签中的语法不解析

在这里插入图片描述

6.3 一次性渲染

值只会更新一次，后续DOM不会修改

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <!-- 一次性: 值的变化只更新一次 DOM,  后续不会修改 -->
    <div id="app">
        <h3 v-once>页面显示时间: {{time}}</h3>
        <h3>当前系统时间: {{time}}</h3>
    </div>

    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                time: new Date().toLocaleString(),
            }
        });
        console.log(vm);
        // 定时器更新时间
        setInterval(() => {
            vm.time = new Date().toLocaleString();
        }, 1000);
    </script>
</body>

</html>

6.4 输入框内容实时监听

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 
        双向数据绑定:
        1. 数据 显示到 DOM 元素中
        2. 用户修改DOM元素的值 实时更新到 绑定的数据项
       -->
        <!-- @input: 输入框内容变化时 触发 -->
        <input type="text" v-model="word" @input="wordChanged" />
        <p>{{word}}</p>
    </div>

    <script>
        new Vue({
            el: "#app",
            data: { word: "111" },
            methods: {
                wordChanged() {
                    console.log(this.word)
                },
            },
        })
    </script>
</body>

</html>

6.5 键盘事件监听

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="text" v-model="word" @keyup="doEnter" />
        <hr />
        <!-- 作者知道 用户通常需要过滤 keyCode, 所以提供了简化写法 
      @keyup.13: 会自动过滤出 keyCode=13的 事件
      -->

        <p>{{word}}</p>
    </div>

    <script>
        new Vue({
            el: "#app",
            data: { word: "111" },
            methods: {
                doEnter(e) {
                    if (e.keyCode == 13) {
                        // console.log(e)
                        alert("回车触发事件"),
                        console.log("回车触发:", this.word)
                    }
                },
            },
        })
    </script>
</body>

</html>

6.6 watch监听器

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <div>
            <span>{{count}}</span>
            <button @click="changeCount(+1)">+1</button>
            <button @click="changeCount(-1)">-1</button>
            <br />
            <input type="text" v-model="count" />
        </div>
    </div>

    <script>
        new Vue({
            el: "#app",
            data: { count: 5 },
            methods: {
                changeCount(delta) {
                    // 字符串转数字:  parseInt(字符串) Number(字符串)
                    // 取巧:  *1    隐式转换: 乘法的结果必定是数字
                    this.count = this.count * 1 + delta
                }
            },
            // watch: 监听器.  监听data中属性的变化
            watch: {
                // 要监听的属性名: 变化时触发的事件
                // count: function () {
                //   console.log("侦测到 count 发生变更:", this.count)
                // },
                // 简化: 去掉 function 关键词
                count() {
                    console.log("侦测到 count 发生变更:", this.count)
                },
            }
        })
    </script>
</body>

</html>

6.7 单选框

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <span>性别:</span>
        <!-- label: 此标签会接受点击事件, 传递给内部的 单选框 -->
        <!-- name相同的单选框, 会被识别为一组 -->
        <label><input type="radio" value="1" name="sex" v-model="sex" /> 男</label>
        <label><input type="radio" value="0" name="sex" v-model="sex" /> 女</label>
        <br />
        <h3>您选择的性别是: {{sex}}</h3>
    </div>

    <script>
        new Vue({
            el: "#app",
            data: { sex: 0 },
        });
    </script>
</body>

</html>

6.8 下拉选框

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <span>请选择城市:</span>
        <select v-model="target">
            <option value="./img/1.jpg">上海</option>
            <option value="./img/2.jpg">北京</option>
            <option value="./img/3.jpg">深圳</option>
        </select>
        <div>选择的图片:{{target}}</div>
        <img :src="target" alt="" />
    </div>

    <script>
        new Vue({
            el: "#app",
            // 默认值:
            data: { target: "./img/1.jpg" },
        });
    </script>
</body>

</html>

6.9 多选框

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <span>选择你喜欢的队伍:</span>
        <label>
            <input type="checkbox" value="FPX" v-model="teams" />
            <span>FPX</span>
        </label>
        <label>
            <input type="checkbox" value="EDG" v-model="teams" />
            <span>EDG</span>
        </label>
        <label>
            <input type="checkbox" value="RNG" v-model="teams" />
            <span>RNG</span>
        </label>

        <p>喜欢的队伍有: {{teams}}</p>
    </div>

    <script>
        new Vue({
            el: "#app",
            // 多选操作: 需要数组来存放选项
            data: { teams: [] },
        })
    </script>
</body>

</html>

6.10 多选框单独使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <label>
            <input type="checkbox" v-model="agree" />
            <span>同意软件的用户协议</span>
        </label>
        <br />
        <p>{{agree?'同意':"不同意"}}</p>
        <button :disabled="!agree">注册</button>
    </div>
    
    <script>
        new Vue({
            el: "#app",
            // agree: 同意 - 输入框单独使用, 应该绑定boolean值
            data: { agree: false },
        })
    </script>
</body>

</html>

6.11 动态样式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>
        .danger {
            background-color: red;
            color: white;
            padding: 10px;
            border-radius: 4px;
            margin: 10px;
        }

        .success {
            background-color: green;
            color: white;
            padding: 10px;
            border-radius: 4px;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div id="app">
        <button @click="count++">{{count}}</button>
        <!-- 固定格式 :style="{属性名: 值}" -->
        <!-- 问题1: 属性名不允许有-, 可以用 小驼峰 或 字符串包围 -->
        <div :style="{fontSize: count+'px'}">Hello World!</div>
        <div :style="{'font-size': count+'px'}">Hello World!</div>
        <hr />
        <!-- count 偶数就显示 danger样式, 奇数显示 success 样式 -->
        <!-- :class="{样式类: true/false}"  true生效 false无效 -->
        <div :class="{danger:count%2==0, success: count%2==1}">WEB2107</div>
    </div>

    <script>
        new Vue({
            el: "#app",
            data: { count: 20 },
        })
    </script>
</body>

</html>

6.12 总结

双标签内容的设置方式
- 原模原样, 相当于 innerText
```
<el>{{ 值 }}</el>
<el v-text="值"></el>
```
- 解析html方式, 相当于 innerHTML
```
<el v-html="值"></el>
```
v-cloak: 在vue实例化之前, 把页面内容暂时隐藏
实例化完毕后, 会自动显示. – 网络卡顿时才会有效
v-pre: 原样输入 {{}} 符号
v-once: DOM初始化时更新一次, 之后不再更新DOM元素
双向数据绑定: 主要是form表单元素, 用户可以修改DOM元素的值
- 方向1: 数据绑定到 DOM元素
- 方向2: DOM元素变化, 变化值更新给数据
输入框实时变化监听:@input
键盘事件: @keyup.按键标识 例如回车:@keyup.13
watch监听器: 监听属性值的变化
动态样式
- 内联样式::style="{样式名: 值}"
- 样式类: :class="{样式类: true/false}"

boy快快长大

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue学习笔记(一)

官网Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
复制链接

扫一扫