前端基础必会教程-4个小时带你快速入门vue - 锦喵卫指挥使

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

目录

      • 简介
  • js框架

    简化DOM操作

    双向数据绑定

        • 地址
      • 1.01.课程介绍(Av76249419,P1)
      • 2.02.Vue基础-简介(Av76249419,P2)
      • 3.03.Vue基础-第一个Vue程序(Av76249419,P3)
      • 4.04.Vue基础-el挂载点(Av76249419,P4)
        • 第一个程序
      • 5.05.Vue基础-data数据对象(Av76249419,P5)
      • 6.06.本地应用-介绍(Av76249419,P6)
      • 7.07.本地应用-v-text指令(Av76249419,P7)
        • v-text指令.png
        • 运行结果：
      • 8.08.本地应用-v-html指令(Av76249419,P8)
        • v-html指令.png
      • 9.09.本地应用-v-on指令基础(Av76249419,P9)
        • 为元素绑定事件.png
        • 简写方式.png
        • 双击事件.png
        • 点击更新数据.png
      • 10.10.本地应用-计数器(Av76249419,P10)
        • 计数器.png
        • 计数器txt.png
        • 计数器txt2.png
      • 11.11.本地应用-v-show指令(Av76249419,P11)
        • 根据表达式的真假，切换元素的显示和隐藏
      • 12.12.本地应用-v-if指令(Av76249419,P12)
        • v-if.png
      • 13.13.本地应用-v-bind指令(Av76249419,P13)
        • 设置元素的属性v-bind
        • v-bind样式.png
        • 样式active是否生效取决于isactive.png
      • 14.14.本地应用-图片切换(Av76249419,P14)
        • 图片切换.png
        • 图片切换2.png
      • 15.15.本地应用-v-for指令(Av76249419,P15)
      • 16.16.本地应用-v-on补充(Av76249419,P16)
        • 传递自定义参数
        • 事件修饰符@keyup.enter，就是特定输入触发函数如inter
      • 17.17.本地应用-v-model指令(Av76249419,P17)
        • 获取和设置表单元素的值，双向数据绑定
      • 18.18.本地应用-小黑记事本-介绍(Av76249419,P18)
      • 19.19.本地应用-小黑记事本-新增(Av76249419,P19)
      • 20.20.本地应用-小黑记事本-删除(Av76249419,P20)
      • 21.21.本地应用-小黑记事本-统计(Av76249419,P21)
      • 22.22.本地应用-小黑记事本-清空(Av76249419,P22)
      • 23.23.本地应用-小黑记事本-隐藏(Av76249419,P23)
      • 24.24.网络应用-介绍(Av76249419,P24)
      • 25.25.网络应用-axios基本使用(Av76249419,P25)
        • get请求.png
        • post请求.png
      • 26.26.网络应用-axioxs加vue(Av76249419,P26)
      • 27.27.网络应用-天知道-介绍(Av76249419,P27)
      • 28.28.网络应用-天知道-回车查询(Av76249419,P28)
      • 29.29.网络应用-天知道-点击查询(Av76249419,P29)
      • 30.30.综合应用-介绍(Av76249419,P30)
      • 31.31.综合应用-音乐查询(Av76249419,P31)
      • 32.32.综合应用-音乐播放(Av76249419,P32)
      • 33.33.综合应用-歌曲封面(Av76249419,P33)
      • 34.34.综合应用-歌曲评论(Av76249419,P34)
      • 35.35.综合应用-播放动画(Av76249419,P35)
      • 36.36.综合应用-播放mv(Av76249419,P36)
      • 37.37.总结(Av76249419,P37)

简介

js框架

简化DOM操作

双向数据绑定

地址

https://www.bilibili.com/video/BV12J411m7MG?from=search&seid=17754323736039504500

1.01.课程介绍(Av76249419,P1)

2.02.Vue基础-简介(Av76249419,P2)

3.03.Vue基础-第一个Vue程序(Av76249419,P3)

4.04.Vue基础-el挂载点(Av76249419,P4)

第一个程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="vue_det">
    <h1>site : {{site}}</h1>
    <h1>url : {{url}}</h1>
    <h1>{{details()}}</h1>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: \'#vue_det\',
        data: {
            site: "菜鸟教程",
            url: "www.runoob.com",
            alexa: "10000"
        },
        methods: {
            details: function () {
                return this.site + " - 学的不仅是技术，更是梦想！";
            }
        }
    })
</script>
</body>
</html>

5.05.Vue基础-data数据对象(Av76249419,P5)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>A02</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="vue_det">
    <h1>site : {{site}}</h1>
    <h1>{{school.name}}</h1>
    <h1>{{school.mobile}}</h1>
    <ul>
        <li>{{campus[0]}}</li>
        <li>{{campus[1]}}</li>
        <li>{{campus[2]}}</li>
    </ul>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: \'#vue_det\',
        data: {
            site: "vue教程",
            school:{
                name:"hello",
                mobile:"10000"
            },
            campus:["111","bbb","ccc"]
        }
    })
</script>
</body>
</html>

6.06.本地应用-介绍(Av76249419,P6)

7.07.本地应用-v-text指令(Av76249419,P7)

v-text指令.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>A02</title>
    <script src="./vue.js"></script>
</head>
<body>
<div id="vue_det">
    <h1 v-text="site"></h1>
    <h1 >{{site}}</h1>
    <h1 v-text="site">学习</h1>
    <h1 >{{site}}学习</h1>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: \'#vue_det\',
        data: {
            site: "vue教程"
        }
    })
</script>
</body>
</html>

运行结果：

vue教程
vue教程
vue教程
vue教程学习

8.08.本地应用-v-html指令(Av76249419,P8)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>A02</title>
    <script src="./vue.js"></script>
</head>
<body>
<div id="vue_det">
    <h1 v-html="content"></h1>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: \'#vue_det\',
        data: {
            content: "<a href=\"#\"> hello content</a>"
        }
    })
</script>
</body>
</html>

v-html指令.png

v-html指令的作用是：设置元素的innerHTML
内容中有html结构会被解析为标签
v-text指令无论内容是什么，只会解析为文本
解析文本使用v-text，需要解析html结构使用v-html

9.09.本地应用-v-on指令基础(Av76249419,P9)

为元素绑定事件.png

简写方式.png

双击事件.png

点击更新数据.png

v-on指令的作用是：为元素绑定事件
事件名不需要写on
指令可以简写为@
绑定的方法定义在methods属性中
方法内部通过this关键字可以访问定义在data中数据

10.10.本地应用-计数器(Av76249419,P10)

计数器.png

计数器txt.png

计数器txt2.png

11.11.本地应用-v-show指令(Av76249419,P11)

根据表达式的真假，切换元素的显示和隐藏

v-show指令的作用是：根据真假切换元素的显示状态
原理是修改元素的display，实现显示隐藏
指令后面的内容，最终都会解析为布尔值
值为true元素显示，值为false元素隐藏
数据改变之后，对应元素的显示状态会同步更新

12.12.本地应用-v-if指令(Av76249419,P12)

v-if.png

v-if指令的作用是：根据表达式的真假切换元素的显示状态
本质是通过操纵dom元素来切换显示状态
表达式的值为true，元素存在于dom树中，为false，从dom树中移除

13.13.本地应用-v-bind指令(Av76249419,P13)

设置元素的属性v-bind

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>A02</title>
    <script src="./vue.js"></script>
</head>
<body>
<div id="vue_det">
    <img v-bind:src="imgSrc">
    <img :src="imgSrc">
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: \'#vue_det\',
        data: {
            imgSrc: "https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1593106255,4245861836&fm=26&gp=0.jpg"
        }
    })
</script>
</body>
</html>

v-bind样式.png

样式active是否生效取决于isactive.png

14.14.本地应用-图片切换(Av76249419,P14)

图片切换.png

图片切换2.png

15.15.本地应用-v-for指令(Av76249419,P15)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>A02</title>
    <script src="./vue.js"></script>
</head>
<body>
<div id="vue_det">
<ul>
    <li v-for="(item,index) in arr " >{{index}} . {{item}}</li>
    <li v-for="(item) in obj " >{{item.name}}</li>
</ul>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: \'#vue_det\',
        data: {
            arr: ["111", "222", "333"],
            obj: [{
                name: "czl",
                age: "22"
            },{
                name: "bbb",
                age: "33"
            }]
        }
    })
</script>
</body>
</html>

16.16.本地应用-v-on补充(Av76249419,P16)

传递自定义参数

事件修饰符@keyup.enter，就是特定输入触发函数如inter

17.17.本地应用-v-model指令(Av76249419,P17)

获取和设置表单元素的值，双向数据绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>A02</title>
    <script src="./vue.js"></script>
</head>
<body>
<div id="vue_det">
<ul>
    <input type="text" v-model="txt">
    <h2>{{txt}}</h2>
</ul>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: \'#vue_det\',
        data: {
            txt: "双向数据绑定"
        }
    })
</script>
</body>
</html>

18.18.本地应用-小黑记事本-介绍(Av76249419,P18)

19.19.本地应用-小黑记事本-新增(Av76249419,P19)

20.20.本地应用-小黑记事本-删除(Av76249419,P20)

21.21.本地应用-小黑记事本-统计(Av76249419,P21)

22.22.本地应用-小黑记事本-清空(Av76249419,P22)

23.23.本地应用-小黑记事本-隐藏(Av76249419,P23)

24.24.网络应用-介绍(Av76249419,P24)

25.25.网络应用-axios基本使用(Av76249419,P25)

get请求.png

post请求.png

26.26.网络应用-axioxs加vue(Av76249419,P26)

27.27.网络应用-天知道-介绍(Av76249419,P27)

28.28.网络应用-天知道-回车查询(Av76249419,P28)

29.29.网络应用-天知道-点击查询(Av76249419,P29)

30.30.综合应用-介绍(Av76249419,P30)

31.31.综合应用-音乐查询(Av76249419,P31)

32.32.综合应用-音乐播放(Av76249419,P32)

33.33.综合应用-歌曲封面(Av76249419,P33)

34.34.综合应用-歌曲评论(Av76249419,P34)

35.35.综合应用-播放动画(Av76249419,P35)

36.36.综合应用-播放mv(Av76249419,P36)

37.37.总结(Av76249419,P37)

以上是 前端基础必会教程-4个小时带你快速入门vue - 锦喵卫指挥使 的全部内容， 来源链接： utcz.com/z/375570.html

回到顶部