Vue入门第一章（附带详细代码讲解，安装教程请看前瞻）

张的俊.

已于 2023-03-31 11:48:12 修改

阅读量326

点赞数 4

分类专栏： Vue 文章标签：前端 javascript vue.js 前端框架 html

于 2022-09-19 20:31:10 首次发布

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/a2499797637/article/details/126940245

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

CSDN话题挑战赛第2期

参赛话题：学习笔记

目录

一、Vue简介：

二、插值语法：

四、事件参数

七、属性绑定

八、大小图

九、动态绑定class

10、动态style

12、显示与隐藏

13、一次性渲染

一、Vue简介：

定位: 生产力工具：优点: `搬砖使用` -- 开发项目挣钱, 码农专属
Vue发展到现在分三个版本:
1. Vue1:已经淘汰
2. Vue2: `过渡期间` 逐步从 vue2 过渡到Vue3
3. Vue3: `最新主推版本` 以后的主流
Vue的开发方式分两种:
1. 脚本模式: 类似jQuery, 通过引入脚本来完成开发 -- 适合`入门阶段`
2. 脚手架模式: 生产场景中使用, 专业的工程化开发模式

二、插值语法：

新语法: {{ }} 类似模板字符串的${ }，允许在 HTML的标签内容中, 书写 JS 代码
new: 用于触发构造函数, 创建出对象
1. Vue: 类似一个生产智能机器人的工厂
2. new Vue(): 下订单, 生产一个机器人
3. el: 指定当前vue对象服务的 DOM元素
4. data: 用于存储使用到的各种数据
5. 数据最终会存储在生成的 vue 对象中

<div id="box">
    <h1>{{msg}}</h1>
    <h3>{{name}}</h3>
    <p>{{num}}</p>
  </div>

  <script src="./vue.js"></script>
  <script>

var vm = new Vue({
      // el: 指定当前vue对象服务的 DOM元素
      el: '#box', //值是 id选择器
      // data: 用于存储使用到的各种数据
      // 数据最终会存储在生成的 vue 对象中
      data: {
        msg: '欢迎学习Vue',
        num: 1,
        name: '张的俊'
      }
    })
  </script>

三、事件

vue1语法: v-on:事件名="JS代码"
1. 自动化数据驱动: 当数据变化时,自动更新相关的DOM元素
vue2语法: @事件名="JS代码"
1. <button @click="num++">+1</button>
注意: vue只对管辖DOM元素内的代码生效

<p>{{num}}</p>
<button @click="num++">点我num++</button>

四、事件参数

如果不需要传参, 可以省略() -- 作者提供的语法糖福利
带参数的不能省略()
methods: 用于存放函数
show（）{ }语法糖, 完整格式 show: function(){ }

<div id="app">
    <!-- 如果不需要传参, 可以省略() -- 作者提供的语法糖福利 -->
    <button @click="show">Click Me</button>
    <button @click="show()">Click Me</button>
    <!-- 带参数的 不能省略() -->
    <hr>
    <button @click="add(8,11)">8+11</button>
  </div>

  <script src="./vue.js"></script>
  <script>
    var v = new Vue({
      el: '#app',
      data: {
        num: 1
      },
      // methods: 用于存放函数
      // 最终保存在 vue 对象里
      methods: {
        // 不带参数
        // 语法糖, 完整格式 show: function(){}
        show() { alert("我是show") },
        // 带参数
        add(x, y) {
          alert(`${x} + ${y} = ${x + y}`)
        }
      },
    })
  </script>

五、this

this的含义
1. - 函数()
  1. 非严格: window
  2. 严格: undefined
2. 对象.函数() : 对象
3. new 函数() : 实例对象
4. 箭头函数 : 自身没有, 通过作用域链原则就近查找
所以methods中函数使用时, 其this就是vue对象

六、$event

不带(): 默认参数1是事件对象
1. <button @click="show">Click</button>
带() : 自定义传参模式, 则没有默认的事件对象
自定义传参模式下, 传递事件对象需传入$event参数
1. <button @click="add(100, 200, $event)">Click</button>

var vm = new Vue({
      el: '#app',
      data: { num: 1 },
      methods: {
        // 触发后, 给 num + 1
        // add1函数最终存储在vue对象里
        // 所以add1使用时, 其this就是vue对象
        add1() {
          // this: 这个;  函数运行时所在的这个对象
          console.log('this:', this)
          this.num++
        }
      }
    })

<div id="box">
    <!-- 不带(): 默认参数1是 事件对象 -->
    <button @click="show">Click</button>
    <!-- 带() : 自定义传参模式, 则没有默认的事件对象 -->
    <button @click="show()">Click</button>
    <hr>
    <!-- $event: 代表事件对象 -->
    <button @click="show($event)">Click</button>
    <br>
    <button @click="add(100, 200, $event)">Click</button>
  </div>

  <script src="./vue.js"></script>
  <script>
    new Vue({
      el: '#box',
      methods: {
        // 事件对象: 当函数被事件触发时, 则默认接收一个事件对象作为实参, 保存了本次事件所有的相关信息
        show(e) {
          console.log(arguments);
          console.log(e)
        },
        add(x, y, e) {
          console.log(x, y, e);
        }
      }
    })
  </script>

七、属性绑定

{{ }} : 仅限在标签内容中使用
属性语法, vue1 中: v-bind:属性名="JS代码"
1. vue2语法 :属性名="JS代码"
注意 : 和不带: 的差异
1. 不带: 是HTML语法, 值是字符串
2. 带: 是vue语法, 值是JS代码, 会运算

 <!-- {{}} : 仅限在 标签内容中使用 -->
    <!-- 属性语法, vue1中:  v-bind:属性名="JS代码" -->
    <a v-bind:href="baidu.href">{{baidu.title}}</a>
    <!-- vue2语法   :属性名="JS代码" -->
    <a :href="baidu.href">{{baidu.title}}</a>

    <!-- 注意 : 和 不带: 的差异 -->
    <!-- 不带: 是HTML语法, 值是字符串 -->
    <div xx="8+8">1111</div>
    <!-- 带: 是vue语法, 值是JS代码, 会运算 -->
    <div :xx="8+8">1111</div>
  </div>

  <script src="./vue.js"></script>
  <script>
    new Vue({
      el: "#box",
      data: {
        baidu: {
          title: "百度一下",
          href: "http://www.baidu.com"
        }
      }
    })
  </script>

八、大小图

<div id="box">
    <!-- :src  vue语法, 值是JS代码 -->
    <!-- JS代码中, 模板字符串 -->
    <img :src="`./img/${big}.jpg`" alt="">
    <div>
      <!-- 问题1: big='1_lg'  变量=值;  值是字符串 所以要引号 -->
      <img src="./img/1_sm.jpg" @mouseover="big='1_lg'" alt="">
      <img src="./img/2_sm.jpg" @mouseover="big='2_lg'" alt="">
      <img src="./img/3_sm.jpg" @mouseover="big='3_lg'" alt="">
      <img src="./img/4_sm.jpg" @mouseover="big='4_lg'" alt="">
      <img src="./img/5_sm.jpg" @mouseover="big='5_lg'" alt="">
    </div>
  </div>

  <script src="./vue.js"></script>
  <script>
    new Vue({
      el: "#box",
      // 把DOM中会变化的数据, 存储在data里
      data: { big: '1_lg' }
    })
  </script>

九、动态绑定class

<!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>动态样式</title>
  <style>
    ul,
    li {
      padding: 0;
      margin: 0;
      list-style: none;
    }

    ul {
      display: flex;
      background-color: #002c69;
      padding: 0 40px;
    }

    li {
      color: white;
      user-select: none;
      padding: 15px 25px;
    }

    li.active {
      background-color: orange;
    }
  </style>
</head>

<body>
  <div id="box">
    <h3>当前序号: {{now}}</h3>
    <ul>
      <li @click="now=0" :class="now==0?'active':''">首页</li>
      <li @click="now=1" :class="now==1?'active':''">关于净美仕</li>
      <!-- 简化语法: 本质上 判断now==几, 是真就active 不是就空 -->
      <!-- :class="{active: now==几}" -->
      <!-- 真就添加active, 假就不添加active -->
      <li @click="now=2" :class="{active: now==2}">公司动态</li>
      <li @click="now=3" :class="{active: now==3}">产品中心</li>
      <li @click="now=4" :class="{active: now==4}">联系我们</li>
    </ul>
  </div>

  <script src="./vue.js"></script>
  <script>
    new Vue({
      el: "#box",
      // 数据: 保存当前激活的 项目序号
      data: {
        now: 0 //当前序号
      }
    })
  </script>
</body>

</html>

10、动态style

<!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>动态style</title>
</head>

<body>
  <div id="box">
    <button @click="size++">变大: {{size}}</button>
    <p :style="`font-size: ${size}px;`">Hello</p>
    <!-- 作者提供了优化语法: -->
    <p :style="{fontSize: size+'px'}">World</p>
    <!-- 属性名支持两种写法: 小驼峰 和 蛇形命名法 -->
    <!-- 属性名不允许中划线, 必须用字符串才合法 -->
    <p :style="{'font-size': size+'px'}">World</p>

  </div>

  <script src="./vue.js"></script>
  <script>
    new Vue({
      el: '#box',
      data: { size: 16 }
    })
  </script>
</body>

</html>

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>轮播图</title>
  <style>
    #banner {
      width: 600px;
      display: flex;
      overflow: hidden;
    }

    #banner>img {
      width: 100%;
      transition: 0.4s;
    }
  </style>
</head>

<body>
  <div id="box">
    <div id="banner">
      <!-- <img :style="`margin-left: -${now}00%;`" src="./img/banner1.png" alt=""> -->
      <img :style="{marginLeft: `-${now}00%`}" src="./img/banner1.png" alt="">
      <img src="./img/banner2.png" alt="">
      <img src="./img/banner3.png" alt="">
      <img src="./img/banner4.png" alt="">
    </div>

    <button @click="now=0">0</button>
    <button @click="now=1">1</button>
    <button @click="now=2">2</button>
    <button @click="now=3">3</button>
    <hr>
    <button @click="now==0 ? now=3 : now--">上一页</button>
    <button @click="now==3 ? now=0 : now++">下一页</button>
  </div>

  <script src="./vue.js"></script>
  <script>
    new Vue({
      el: "#box",
      data: { now: 0 }
    })
  </script>
</body>

</html>

12、显示与隐藏

指令: directive
vue为DOM元素提供了一些新的属性
1. 之前学习的 v-bind v-on 都属于新的属性, 称为指令
2. <标签属性=值属性=值>内容</标签>
v-show 会根据值来显示或隐藏元素
1. 底层实现方式: 通过 css的display:none 完成
2. <p v-show="true">Hello</p>

<!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>show</title>
</head>

<body>
  <!-- 指令: directive -->
  <!-- vue为DOM元素提供了一些新的 属性 -->
  <!-- 之前学习的 v-bind  v-on 都属于新的属性, 称为指令 -->
  <!-- <标签 属性=值 属性=值>内容</标签> -->
  <div id="box">
    <!-- v-show 会根据 值来显示或隐藏元素 -->
    <!-- 底层实现方式: 通过 css的display:none 完成 -->
    <p v-show="true">Hello</p>
    <p v-show="false">World</p>
  </div>

  <script src="./vue.js"></script>
  <script>
    new Vue({
      el: "#box"
    })
  </script>
</body>

</html>

13、一次性渲染

需求: 让DOM元素上的数据初始化后不再变化
v-once: 一次性渲染, 初次渲染后不再发生更新
<h3 v-once>起拍价: {{price}}</h3>
<button @click.once="price+=10">+10</button>

<!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>once</title>
</head>

<body>
  <div id="box">
    <!-- 需求: 让DOM元素上的数据 初始化后 不再变化 -->
    <!-- v-once: 一次性渲染, 初次渲染后不再发生更新 -->
    <h3 v-once>起拍价: {{price}}</h3>
    <h3>当前价: {{price}}</h3>
    <button @click="price+=10">+10</button>
  </div>

  <script src="./vue.js"></script>
  <script>
    new Vue({
      el: "#box",
      data: { price: 10 }
    })
  </script>
</body>

</html>

每日一句：

风声、雨声、读书声，声声入耳；家事、国事、天下事，事事关心。

风声、雨声、琅琅读书声，都进入我们的耳朵，所以，作为一个读书人，家事、国事，天下的事情，各种事情都应该关心，不能只是死读书。

关注

4
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
2
评论
Vue入门第一章（附带详细代码讲解，安装教程请看前瞻）

Vue简介：、插值语法：、事件、事件参数、this、$event、属性绑定、大小图、动态绑定class、动态style、轮播图、显示与隐藏、一次性渲染
复制链接

扫一扫

专栏目录

评论 2

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

打赏作者

张的俊. 你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20

扫码支付：¥1

获取中

扫码支付

您的余额不足，请更换扫码支付或充值

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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