自学vue的第一天

最新推荐文章于 2024-08-25 09:57:22 发布
最新推荐文章于 2024-08-25 09:57:22 发布
阅读量59 收藏
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_56556879/article/details/131830891
版权

v指令

v-html：设置innerhtml

内容中有html结构会被解析成标签

v-text：无论内容是什么，都会被解析成文本。

所以，解析文本用v-text，解析html结构用v-html；

如果解析纯文本，v-text与v-html没有任何区别；

如果解析html结构则有所不一样

v-show实例

根据真假切换元素的显示状态

原理是通过display，实现显示隐藏

指令后面的内容最终都会解析为布尔值；

值为True元素显示，值为false元素隐藏

<!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@2/dist/vue.js"></script>

 

</head>

<body>

      <div id ="app">

        <img v-show = "isShow" src="./1678990507455.jpg" alt="">

        <input type="button" value="改变显示状态" @click = "changeIsShow">

      </div>

</body>

<script>

    var app = new Vue({

        el:'#app',

        data:{

            isShow:false

        },

        methods:{

           changeIsShow:function(){

            this.isShow = !this.isShow

           }

        }

    });

</script>

</html>

v-on实例：

<!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@2/dist/vue.js"></script>

 

</head>

<body>

      <div id ="app">

        <button @click = "sub"> - </button>

        <span>{{ num }}</span>

        <button @click = "add"> + </button>

      </div>

</body>

<script>

    var app = new Vue({

        el:'#app',

        data:{

           num:1

        },

        methods:{

            add:function(){

                if(this.num<10){

                    this.num++;

                }else{

                    alert('别点了，最大啦！');

                }

            },

            sub:function(){

                if(this.num>0){

                    this.num--;

                }else{

                    alert('别点了，最小啦！');

                }

            },

        }

    });

</script>

</html>

v-if

根据表达值的真假，切换元素的显示状态，直接操控dom

频繁切换元素的显示状态用v-show，否则用v-if；

v-bind

为元素绑定属性，

完整写法v-bind：属性名 简写的话可以省略v-bind，只保留：属性名

<!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@2/dist/vue.js"></script>

    <style>

        .active{

            border: 1px solid red;

        }

    </style>

</head>

<body>

      <div id ="app">

        <img :src="imgSrc" alt="">

        <br>

        <img :src="imgSrc" alt="" :title = "imgTitle+'!!!'">

        <br>

        <img :src="imgSrc" alt="" :title = "imgTitle+'!!!'"

        :class="{active:isActive}" @click="toggleActive">

      </div>

</body>

<script>

    var app = new Vue({

        el:'#app',

        data:{

           imgSrc:"https://www.itheima.com/images/logo.png",

           imgTitle:"黑马程序员",

           isActive:false

        },

        methods:{

            toggleActive:function(){

                this.isActive = !this.isActive

            }

        }

    });

</script>

</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/index.css">

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

</head>

<body>

    <div id="mask">

        <div class="center">

            <h2 class="title"> <img src="./images/logo.png" alt=""> 深圳创维校区环境 </h2>

            <img :src="imgList[index]" alt="">

            <a 

            href="javascript:void(0)" 

            @click="prev"

            class="left"

            v-show="index>0"

            >

                <img src="./images/prev.png" alt="">

            </a>

            <a 

            href="javascript:void(0)" 

            @click="next"

            class="right"

            v-show="index<imgList.length-1"

            >

                <img src="./images/next.png" alt="">

            </a>

           

        </div>

    </div>

   

</body>

<script>

    const app = new Vue({

        el: "#mask",

        data: {

            imgList:[

            "./images/00.jpg",

            "./images/01.jpg",

            "./images/02.jpg",

            "./images/03.jpg",

            "./images/04.jpg",

            "./images/05.jpg",

            "./images/06.jpg",

            "./images/07.jpg",

            "./images/08.jpg",

            "./images/09.jpg",

            "./images/10.jpg",

        ],

        index: 0

        },

        methods:{

            prev(){

                this.index--;

            },

            next(){

                this.index++;

            }

        }

    });

</script>

</html>

Css代码：

* {

  margin: 0;

  padding: 0;

}

html,

body,

#mask {

  width: 100%;

  height: 100%;

}

#mask {

  background-color: #c9c9c9;

  position: relative;

}

#mask .center {

  position: absolute;

  background-color: #fff;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%);

  padding: 10px;

}

#mask .center .title {

  position: absolute;

  display: flex;

  align-items: center;

  height: 56px;

  top: -61px;

  left: 0;

  padding: 5px;

  padding-left: 10px;

  padding-bottom: 0;

  color: rgba(175, 47, 47, 0.8);

  font-size: 26px;

  font-weight: normal;

  background-color: white;

  padding-right: 50px;

  z-index: 2;

}

#mask .center .title img {

  height: 40px;

  margin-right: 10px;

}

#mask .center .title::before {

  content: "";

  position: absolute;

  width: 0;

  height: 0;

  border: 65px solid;

  border-color: transparent transparent white;

  top: -65px;

  right: -65px;

  z-index: 1;

}

#mask .center > img {

  display: block;

  width: 700px;

  height: 458px;

}

#mask .center a {

  text-decoration: none;

  width: 45px;

  height: 100px;

  position: absolute;

  top: 179px;

  vertical-align: middle;

  opacity: 0.5;

}

#mask .center a :hover {

  opacity: 0.8;

}

#mask .center .left {

  left: 15px;

  text-align: left;

  padding-right: 10px;

  border-top-right-radius: 10px;

  border-bottom-right-radius: 10px;

}

#mask .center .right {

  right: 15px;

  text-align: right;

  padding-left: 10px;

  border-top-left-radius: 10px;

  border-bottom-left-radius: 10px;

}

稻草人966
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue第一章 技术文档.pdf
08-12
Vue 入门到进阶第一章 #资源达人分享计划 # 技术文档
Vue第一天学习笔记.txt
09-07
click函数定义在Vue实例 methods里面 调用函数方法形式:函数名:function(参数){内容} 属性绑定和数据双向绑定： v-bind:title v-bind:title缩写法 :title v-model 模板指令，数据双向绑定 计算属性和侦听器 计算...
自学Vue第一天
yhr0322的博客
09-22 254
第一天： APP类型 webAPP -> 移动端/M站 原生APP -> 通过IOS或Android语言开发的 hybridAPP -> webapp + 原生APP 什么是Vue Vue有点 两个核心点： 响应式 组件 其他优点： 易用 虚拟DOM 双向数据绑定 体积小 生态圈繁荣、学习成本低 SEO -> 搜索引擎优化## 标题 ...
自学vue第一天
niuzhao123654的博客
07-13 25
每一种解析器都是一个运行环境。在Node.js的帮助下，开发人员可以使用JavaScript进行后端开发，同时，Node.js还提供了丰富的模块库。首先需要了解Vue的渲染逻辑：将模板template解析成AST(抽象语法树)；再将AST转化为Render函数；通过Watcher监听数据的变化；当数据发生变化时，Render函数执行生成虚拟VNode节点，该节点包含创建DOM节点所需信息；通过patch方法，对比新旧VNode对象，通过DOM diff算法，添加、修改、删除真实DOM节点。
vue自学的第一天
iblackboy的博客
01-13 163
两种使用vue的方式： 1.直接使用<script>引入 这种适合做练习和小项目，结合vue开发，不需要使用到vue家族中的其他成员。代码示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewpo...
VUE的第一天
Lydia
12-09 687
Vue第一天,安装环境.脚手架,学习一系列vue指令
自学Vue.js第一天
qq_43664684的博客
05-24 112
自学Vue.js第一天 创建Vue对象的时候，传入了一些options:{} {}中包含了el属性：改属性决定了这个Vue对象挂载到哪一个元素上，很明显，我们挂载了id为app的元素上 {}中包含了date属性：改属性中通常会存储一些数据 这些数据可以是我们直接定义的 也可能来自网络，从服务器加载的 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <t
自学Vue第三天
yhr0322的博客
09-22 231
自定义指令 --初识Vue 除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令 基本用法 <div id="app"> <input type="text" v-focus> ...
自学Vue第二天
yhr0322的博客
09-22 398
第二天 选项对象 <div id="app"> <p v-on:click="clickHandle">{{ message }}</p> </div> <script> const vm = new Vue({ el: '#app', // 挂载点 data: { // 咱们的数据 这里是...
小白自学vue的第一天，加油！
啊对对对的博客
07-04 184
一、插值的操作 1.Mustache语法 也就是双大括号(翻译过来就是胡须的意思) 2.v-once指令 加了v-once数据不会随着数据的改变而改变，只会渲染一次 3.v-html指令 可以解析HTML并且渲染出来 4.v-text指令 直接渲染文本数据 和胡子语法相似，但是只会接受一个String类型 5.v-pre指令 把内容原封不动的输出，不会做任何的解析 6.v-cl...
自学Vue的第03天
weixin_34275734的博客
06-07 367
单向数据流 v-bind:属性 绑定属性值，简写::属性 单向数据绑定：内存改变影响页面 <body> <div id="app"> </div> <script> new Vue({ el: '#app', template: ` ...
自学vue的第一个项目——-vue商城
01-20
文章目录一、首页header、tabbar区域1、header（顶部导航栏）区域用的是mint-ui中的Header组件2、tabbar区域引用的是ui组件mui中的案例tabbar.html，拷贝到App.vue二、在中间区域放置一个router-view来展示路由匹配...
vue项目中使用天地图
01-08
在Vue项目中集成天地图，可以为Web应用提供丰富的地理信息展示功能。下面将详细介绍如何在Vue项目中实现这一过程，以及如何添加一些基本的地图操作。 首先，你需要在天地图官方网站...
基于vue3和audio封装的简易音频播放器
weixin_43734732的博客
08-23 269
【代码】基于vue3和audio封装的简易音频播放器。
vue ref和reactive区别
最新发布
灰海
08-25 240
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
Ant Design Vue 快速上手指南与常见问题排查
windowshht的博客
08-22 1143
Ant Design Vue 是一款功能强大的 Vue 组件库，能够帮助开发者快速构建高质量的用户界面。通过本文的快速上手指南，您可以轻松地在项目中集成 Ant Design Vue，并解决常见问题。希望这篇文章能为您的开发工作提供帮助，提升您的开发效率。如需深入了解 Ant Design Vue 的更多功能和组件，请参考Ant Design Vue 官方文档。
实现el-table 两列多选框且不可同时勾选，可单选，可多选
weixin_52740695的博客
08-21 305
审核通过可批量处理，可单选；审核不通过，单选，但两者不可同时勾选☑️。
vue export的用法
weixin_41203765的博客
08-23 291
在Vue.js中，export关键字主要用于模块化编程，它允许你将一个文件（模块）中的代码、组件、函数、变量等导出，以便在其他文件中通过import语句来使用。这在Vue项目中非常常见，特别是当你需要重用组件、工具函数或配置时。
vue 获取当月第一天
07-15
你可以使用 JavaScript 的 Date 对象来获取当月的第一天。以下是一个使用 Vue 的示例代码： ```javascript // 在 Vue 组件中的某个方法中 getFirstDayOfMonth() { const now = new Date(); const firstDay = new ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值