vue下拉框动态数据绑定_vue开端 -- 做个工匠 - 1 数据绑定 以及 指令

于 2021-02-01 08:40:41 发布
阅读量8.1k 收藏 4
点赞数
文章标签： vue下拉框动态数据绑定
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_33800724/article/details/113492749
版权
本文是Vue.js的基础教程，介绍了Vue的安装、数据绑定、指令如v-html、v-text、v-pre、v-bind、v-model、v-if、v-show、v-for等，并通过实例演示了它们的使用方法，适合初学者入门。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

嗨朋友！感谢光临我的博客 还没上岸的我 还在努力之中，本文中理解有错的时候还请您指点 本人也很喜欢爬虫 欢迎来到本人的公众号 一起交流 公众号：Linux下撸python 能得指点是晚辈荣幸

  • 絮叨一下
  • 简单介绍
  • 安装方法
    • script
    • npm下载
  • 创建一个实例
    • 挂载点el
    • 存放数据data
    • 函数methods
  • 第一个hello vue
  • 指令v-xx
    • v-html
    • v-text
    • v-pre填充原始信息
    • v-bind 动态数据绑定
    • v-model 双向数据绑定
    • v-if 是否渲染
    • v-show 是否隐藏
    • v-if vs v-show
    • v-for循环
  • 写给看到最后的你

絮叨一下

嗨你好 突然就很喜欢工匠这个词，但似乎缺少了一些工匠的心，努力做一个工匠 开始学习vue这个主流框架，希望我的这篇文章对屏幕前的你有所启发

简单介绍

官网：vue官网

什么是vue.js 其后缀 是.js 也就是可以当成是一个js库

其数据是响应的 数据的变化直接改变页面的内容

并不用去关心dom 而是关注 其 数据

如果你是一名萌新 可以会感觉我英语不好 文档翻译不过来 不过学习vue是完全不用考虑这个问题的毕竟尤大大 是中国 的 大大 来吧 废话不多说开始吧 当然啦 一下文章均以 vue2系列做为教程

安装方法

script

可以使用script直接引入使用，当然啦 这种方法优点缺点也是很明显的 不占空间 但是需要记载时间 网络差 体验不好

  • 可以使用最新版 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  • 当然也可以使用稳定版本 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>

npm下载

官网这样解释到

在用 Vue 构建大型应用时推荐使用 NPM 安装。 NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。 同时 Vue 也提供配套工具来开发单文件组件。
  • 下载最新 npm install vue
  • 下载稳定版本 npm install vue --save

这样就会下载到本地

dd1798aec4f68e420cad3b58bb9b6f5f.png

引入的话就是 <script src="/node_modules/vue/dist/vue.js"></script> 作为初学者还是不要使用压缩版本也就是 vue.min.js

创建一个实例

new Vue({
    // 挂载点
    el:"css选择器",
    // 数据
    data:{
        属性名:属性值,
    }，
    // 函数
    methods:{
        fn(){
            console.log("这个就是点击触发的函数")
        }
    }

挂载点el

  • 提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。
  • 挂载点根据css选择器进行选择挂载 的位置当有多个挂载点的时候只会选择第一个挂载点
  • 不可以将vue挂载在body以及html上
  • 在实例挂载之后，元素可以用 vm.$el 访问。

存放数据data

data:{
        属性名:属性值,
    }

函数methods

其是一个对象 用到的函数都需要放在这个对象中

第一个hello 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>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>

    <div id="app">
        {{messige}}
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                messige: "hello vue",
            },            
        });
    </script>
</body>

</html>

d0a82276c6a1e2398ec75c6ef3a835af.png

来吧 解释一下 首先需要知道{{}}是什么

  • {{}}插值表达式 也就是数据绑定
  • 获取data中的数据 只需要键一致即可
  • 这个里面可以使用字符串拼接
  • 注意不能使用<只能使用>
  • 可以使用 表达式
  • 不能识别标签
  • 首屏会出现{{}}

通过el 挂载 其作用域只能在id为app 标签的作用域范围内使用 data 用来存放数据 这样第一个vue程序就完成了

指令v-xx

  • 指令就是带有 v- 前缀的特殊 attribute
  • 其根本原理就是自定义属性 常用的指令 有以下一些

v-html

  • 相当于innerHTML
  • 可以解析标签
  • 不安全容易引发xss攻击

v-text

  • 不能解析标签
  • 首屏不会出现{{}}

v-pre填充原始信息

  • 跳过解析过程 {{}} 是什么就是什么

v-bind 动态数据绑定

  • 动态地绑定一个或多个 attribute
  • 简写：一个：
  • 还可以绑定自定义属性
<img v-bind:src="imgsrc"></img>
data:{
    imgsrc:"路径"
}

v-model 双向数据绑定

  • 在文本区域插值 (<textarea>{{text}}</textarea>) 并不会生效，应用 v-model 来代替。
  • v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

MVVM

  • M model 模型 就是data中的数据
  • V view 视图 就是dom节点
  • VM 视图模型
  • 模型可以控制视图
  • 视图也可以改变模型
  • 通过视图模型进行改变 作为中间的桥梁

model到view使用的是数据绑定 view到model使用的是事件绑定

复选框

  • 单个复选框绑定布尔值
  • 多个复选框绑定到一个数组

单选按钮

v-if 是否渲染

  • v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy(真) 值的时候被渲染。惰性加载
  • 也可以用 v-else 添加一个“else 块”：
  • v-else 要紧跟 v-if
  • v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
<div id="app">
    <span v-if="true">{{name}}</span>
    <span v-else>dadasd</span>
</div>

v-show 是否隐藏

  • 不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。
  • v-show 不支持<template>元素，也不支持 v-else。

这里举一个 图片的显示跟隐藏的案例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/node_modules/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <button @click="fn">点击显示和隐藏</button>
        <img v-show="flag" src="https://img-blog.csdnimg.cn/20190915215521261.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3piYnpi,size_16,color_FFFFFF,t_70"
            alt="">
    </div>

    <script>
        new Vue({
            el:"#app",
            data:{
                flag:true
            },
            methods:{
                fn(){
                    this.flag = !this.flag
                }
            }
        })
    </script>
</body>

</html>

看完之后是不是感觉 比原生js 容易很多

v-if vs v-show

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

v-for循环

  • 我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 (item,index) in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。
  • 循环的是谁就加在谁的身上
  • 循环的是 一个对象的时候可以是三个参数 value，name，index
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/node_modules/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <ul>
            <li v-for="item in num">
                {{"我叫"+item.name+"我今年"+item.age+"岁我的爱好"+item.hobby}}
            </li>
        </ul>
    </div>

    <script>
        new Vue({
            el: "#app",
            data: {
                num: [
                    {
                        name: "张姨",
                        hobby: "吃**",
                        age: 18
                    }, {
                        name: "张三",
                        hobby: "吃**",
                        age: 14
                    }, {
                        name: "王二",
                        hobby: "吃**",
                        age: 12
                    }, {
                        name: "吕四",
                        hobby: "吃**",
                        age: 11
                    }
                ]
            }

        })
    </script>
</body>

</html>

408fa9ef8236e7ebbacd9aa8f6943558.png

当然 他也可以是一个对象 那么他就有 三个参数

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/node_modules/vue/dist/vue.js"></script>
</head>

<body>


    <div id="forobj">
        <p v-for="(value,name,index) in obj">{{name}},{{value}}</p>
    </div>



    <script>
        new Vue({
            el:"#forobj",
            data:{
                obj:{
                    name:"cc",
                    age:18
                }
            }
        })
    </script>
</body>

</html>

cbb188f354c211bcc8c60b6d7cd15d49.png

这里我们可以做一个效果运用一下上面的知识点

db5316a02b6f572f9ab31ebf858b5e9f.png

就是这个效果啦

其实分析一下很简单就是 data中放一个数组，数组中存放 10个对象然后使用 v-for循环就是啦

来看一下具体的代码

这里我分离开写

也就是js css html 分开

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./作业.css">
    <script src="../../node_modules/vue/dist/vue.js"></script>
</head>

<body>
    <ul class="w fixclear">
        <li v-for="item in items">
            <img class="img" :src="item.img">
            <div class="xiaotu">
                <img class="logo" :src="item.logo">
            </div>
            <p class="title" v-text="item.name"></p>
            <p v-text="item.desc"></p>
        </li>
    </ul>

    <script src="./作业.js"></script>
</body>


</html>
css 
* {
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
    width: 100%;
}

body {
    height: 100%;
    width: 100%;
    background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.w {
    width: 1010px;
    margin: 0 auto;
}

.fixclear::after,.fixclear::before{
    content: "";
    display: block;
    clear: both;
}

ul {
    width: 100%;
    list-style: none;
}

li{
    background-image: linear-gradient(to right, #6a11cb 0%, #2575fc 100%);
    overflow: hidden;
    position: relative;
    border-radius: 10px;
    width: 190px;
    height: 280px;
    margin-right: 10px;
    float: left;
    margin-bottom: 20px;
    border: 1px solid #fff;
}

.datu{
    width: 100%;
    height: 190px;
}

.xiaotu{
    
    position: absolute;
    bottom: 70px;
    left: 42px;
    width: 100px;
    height: 40px;
    border-radius: 30px 30px;
    background: #fff;
}

.logo{
    position: absolute;
    left: 14px;
    top: 3px;
}

p{
    font-size: 16px;
    width: 100%;
    text-align: center;
    color: #fff;
}

.title{
    margin-top: 20px;
}
js 
new Vue({
    el: ".w",
    data: {
        items: [
            {
                "img": "https://img.alicdn.com/bao/upload/TB19T_1VwHqK1RjSZFEXXcGMXXa.jpg_190x190Q75s0.jpg_.webp",
                "logo": "https://img.alicdn.com/bao/upload/TB1MJZoVxnaK1RjSZFtXXbC2VXa.png_70x70Q75s0.jpg_.webp",
                "name": "顺钦银楼旗舰店",
                "desc": "满300减60元"
            },
            {
                "img": "https://img.alicdn.com/bao/upload/TB10t5Mi13tHKVjSZSgXXX4QFXa.jpg_190x190Q75s0.jpg_.webp",
                "logo": "https://img.alicdn.com/bao/upload/TB1GrubV4naK1RjSZFBXXcW7VXa.png_70x70Q75s0.jpg_.webp",
                "name": "种善堂大药房",
                "desc": "爆款第2件半价"
            },
            {
                "img": "https://img.alicdn.com/bao/upload/TB1bNnhVIbpK1RjSZFyXXX_qFXa.jpg_190x190Q75s0.jpg_.webp",
                "logo": "https://img.alicdn.com/bao/upload/TB1gMeGVSzqK1RjSZPcXXbTepXa.png_70x70Q75s0.jpg_.webp",
                "name": "美乐棵旗舰店",
                "desc": "全店享满赠"
            },
            {
                "img": "https://img.alicdn.com/bao/upload/TB1mAL.b2c3T1VjSZPfXXcWHXXa.jpg_190x190Q75s0.jpg_.webp",
                "logo": "https://img.alicdn.com/bao/upload/TB1A7D.b2c3T1VjSZPfXXcWHXXa.png_70x70Q75s0.jpg_.webp",
                "name": "Sparllo海外旗舰店",
                "desc": "每满299减5元"
            },
            {
                "img": "https://img.alicdn.com/bao/upload/TB1aBnGVrPpK1RjSZFFXXa5PpXa.jpg_190x190Q75s0.jpg_.webp",
                "logo": "https://img.alicdn.com/bao/upload/TB1qfMJiu3tHKVjSZSgXXX4QFXa.png_70x70Q75s0.jpg_.webp",
                "name": "古尚古旗舰店",
                "desc": "全场满88减10"
            },
            {
                "img": "https://img.alicdn.com/bao/upload/TB17dX1WlLoK1RjSZFuXXXn0XXa.jpg_190x190Q75s0.jpg_.webp",
                "logo": "https://img.alicdn.com/bao/upload/TB1ryWsWhnaK1RjSZFtXXbC2VXa.png_70x70Q75s0.jpg_.webp",
                "name": "如喜旗舰店",
                "desc": "满300减30不封顶"
            },
            {
                "img": "https://img.alicdn.com/bao/upload/TB1csu3VSrqK1RjSZK9XXXyypXa.jpg_190x190Q75s0.jpg_.webp",
                "logo": "https://img.alicdn.com/bao/upload/TB19QLdVFzqK1RjSZFCXXbbxVXa.png_70x70Q75s0.jpg_.webp",
                "name": "张裕官方旗舰店",
                "desc": "抢店铺双重赠品"
            },
            {
                "img": "https://img.alicdn.com/bao/upload/TB1z_bEXUGF3KVjSZFvXXb_nXXa.jpg_190x190Q75s0.jpg_.webp",
                "logo": "https://img.alicdn.com/bao/upload/TB1ejDFXQ5E3KVjSZFCXXbuzXXa.png_70x70Q75s0.jpg_.webp",
                "name": "虹越旗舰店（天猫）",
                "desc": "满300减30"
            },
            {
                "img": "https://img.alicdn.com/bao/upload/TB1nHV1V4jaK1RjSZKzXXXVwXXa.jpg_190x190Q75s0.jpg_.webp",
                "logo": "https://img.alicdn.com/bao/upload/TB1tARCVYrpK1RjSZTEXXcWAVXa.png_70x70Q75s0.jpg_.webp",
                "name": "婷妃内衣旗舰店",
                "desc": "满一百减十元"
            },
            {
                "img": "https://img.alicdn.com/bao/upload/TB1kQGbVyLaK1RjSZFxXXamPFXa.jpg_190x190Q75s0.jpg_.webp",
                "logo": "https://img.alicdn.com/bao/upload/TB14bFWVwHqK1RjSZJnXXbNLpXa.png_70x70Q75s0.jpg_.webp",
                "name": "韩雅伊人旗舰店",
                "desc": "满99-10元"
            }
        ]
    }
})

然后看一下最终的效果

2eddcc450e792bb6903f6acdca81f85f.png

这个就很nice啦

写给看到最后的你

朋友，感谢你看到了最后，新手报道，技术不成熟的地方请多多指点，感谢！

有问题可以私信我、大家一起交流 前端知识 以及 爬虫 python知识。

公众号：Linux下撸python 期待和你再次相遇 愿你学的愉快

b574ac9fe19aaa13bc1fecabd27efc16.png
qiuyaofeng2012
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值