前端基础必会教程-4个小时带你快速入门vue

Posted on 2020-11-01 23:24  锦喵卫指挥使  阅读(212)  评论(0)  编辑  收藏  举报

目录

简介

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)

Copyright © 2024 锦喵卫指挥使
Powered by .NET 8.0 on Kubernetes