首页 博客列表 精选博客 智能问答 chat-GPT 关于我
vue下拉框动态数据绑定_vue开端 -- 做个工匠 - 1 数据绑定 以及 指令
发布日期：2021-06-24 16:21:54 浏览次数：2 分类：技术文章

本文共 8070 字，大约阅读时间需要 26 分钟。

嗨朋友！感谢光临我的博客 还没上岸的我 还在努力之中，本文中理解有错的时候还请您指点 本人也很喜欢爬虫 欢迎来到本人的公众号 一起交流 公众号：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

    
         
         Document        
     
              {
    {messige}}

d0a82276c6a1e2398ec75c6ef3a835af.png

来吧 解释一下 首先需要知道{

{}}是什么

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

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

指令v-xx

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

v-html

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

v-text

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

v-pre填充原始信息

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

v-bind 动态数据绑定

  • 动态地绑定一个或多个 attribute
  • 简写：一个：
  • 还可以绑定自定义属性
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 的元素的后面，否则它将不会被识别。
     
    
      {
    {name}}    
      dadasd

v-show 是否隐藏

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

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

    
         
         Document

看完之后是不是感觉 比原生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
    
         
         Document        
     
        
      
                
           
  •                 {
        {"我叫"+item.name+"我今年"+item.age+"岁我的爱好"+item.hobby}}            
    •

408fa9ef8236e7ebbacd9aa8f6943558.png

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

    
         
         Document        
     
        
      
{
    {name}},{
    {value}}

cbb188f354c211bcc8c60b6d7cd15d49.png

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

db5316a02b6f572f9ab31ebf858b5e9f.png

就是这个效果啦

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

来看一下具体的代码

这里我分离开写

也就是js css html 分开

         
         
         Document    
             
     
            
          
  •                         
           
                    
                        
           
                
                
            
    •
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

转载地址：https://blog.csdn.net/weixin_33800724/article/details/113492749 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！

上一篇：python中print又可将数据写入文件_如何使用python将数据写入txt文件
下一篇：postgres 显示变量_postgresql SQL语句变量的使用说明

发表评论

最新留言

路过按个爪印，很不错，赞一个！
[***.219.124.196]2024年04月22日 00时33分02秒

关于作者

    喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！
-- 愿君每日到此一游！

推荐文章

vsftp快速配置 2019-04-28
asm rebalance 三个阶段 2019-04-28
12c以后ASM单盘大小可超2TB 2019-04-28
Pin-point安装参考 2019-04-28
在线快速清理listener.log日志 2019-04-28
oracle的字段类型number,number(*),number(*,0) 2019-04-28
oracle查看带末尾下划线的表名和字段名 2019-04-28
nfs挂接命令参考 2019-04-28
oracle一体机(exdata)创建ACFS文件系统 2019-04-28
xshell起图形界面后，鼠标点击不了 2019-04-28
limit资源限制ulimit 详解 2019-04-28
MAX_STRING_SIZE controls the maximum size of VARCHAR2, NVARCHAR2, and RAW data types in SQL. 2019-04-28
How to estimate RMAN incremental backup size using block change tracking file (Doc ID 1938079.1) 2019-04-28
rman备份分配指定操作 2019-04-28
rman备份指定备份集对应文件 2019-04-28
ffmpeg分割mp4视频方便快速 2019-04-28
使用 ffmpeg 快速合并视频文件 2019-04-28
diff对比二进制文件 2019-04-28
centos7.x添加sftp用户允许上传下载但不允许ssh登录 2019-04-28
【英语学习】【化学】几个与氮(Nitrogen)有关的化学词汇 (1) 2019-04-28
白红宇的个人博客 - 记录点点滴滴的事 - 您是第 308879319 位访客
访问时间: 2024-04-29 07:30:38 访问IP: 3.16.83.150     Copyright © 2020 - 2023 blog.css8.cn 京ICP备2021015314号-1 手机版