weixin_40725706

这个屌丝很懒，什么也没留下！

热门标签

VUE学习(完结）

作者：weixin_40725706 | 2024-02-18 12:09:33

踩

VUE学习(完结）

VUE使用步骤

初始化一个新的项目

主文件App.vue

App.vue 是vue框架下面的主文件，其包含三个部分，分别是template、script和style
template是用来存放组件模板的
script是用来存放非显示的逻辑，用来注册组件、定义属性、处理本地状态
style部分是用来存放CSS的，用来表述网页或者文档的颜色、样式。

开始使用 Vue

在你的终端中，尝试运行 npm run serve
在这里插入图片描述
至此，VUE已经可以启动了，接下来学习VUE如何使用

VUE学习笔记

特点

JavaScript框架
无需获取元素，操作元素------使用特殊语法直接操作。
页面是由数据来生成的

简单尝试

vue的运行流程是，先在body中定义一个元素div，然后在script中定义要命中哪个元素，el：元素名称。data：{变量标签：“变量值”}

el挂载点

1.vue的作用范围是el选项命中的元素及其内部的后代元素
2.通常使用id选择器，使用#id名词来选择元素，除此之外还可以用class选择器用.class名词或者标签选择器。
3.也可以不使用div标签，但是一定要是双标签的否则作用域不好确定，通常就用div标签。

在这里插入图片描述

调用:

本地应用

v-test指令

文本替换指令，与双大括号作用类似，但是双大括号是可以部分替换的，而v-test指令则会将该标签下的所有内容替换掉

在这里插入图片描述

v-html指令

专门用来解析html格式的指令，如果data是纯文本，那么其作用和v-test作用一致，如果是html格式的那么会自动解析。
在这里插入图片描述

v-on指令

这个指令是用来将事件挂在到元素上的，可以用“@”代替。初学会用到，后续开发基本用不到。准备一个vue挂在的标签，作为vue实例。为元素绑定事件。可以使用v-on也可以直接用@事件名=“方法”来绑定。
在这里插入图片描述

练习-------计数器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue基微</title>
</head>
<body>
    <div id="app">
        <div id="counter">
            <button @click="add">
                +
            </button>
            <span>{{num}}</span>
            <button @click="sub">
                -
            </button>


        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <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<1){
                        alert('别点啦，最小啦！！！！！！');
                    }else{
                        this.num--;
                    }
                },

            },

              
           
        })
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

vue-show指令和vue-if 指令

这两个指令的效果是一样的，区别在于vue-show操作的是DOM树而vue-if操作的是DOM树中的结构。
在使用的时候，首先要创建vue实例，利用var关键字创建app变量，使用new Vue的方法创建实例。使用el将实例挂载到上面的id为app的一个元素上。这个实例具有一个message属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue基微</title>
</head>
<body>
    <div id="app">
        <input type="button" value="切换显示" @click="toggleIsShow">
        <p v-if="isShow">黑马程序员</p>
        <p v-show="isShow">黑马程序员 - V-show修饰</p>
       <h2 v-if="temperature>=35">热死啦</h2>  
        
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data: {
                isShow:false,
                temperature:40
              },
            methods:{
                toggleIsShow:function(){
                    this.isShow = !this.isShow;
                },

            },

              
           
        })
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

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">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-bind指令</title>
    <style>
        .active{
            border: 5px solid red;
        }
    </style>
</head>
<body>
    <div id="app">
        <img src="imgSrc" alt="">
        <br>
        <img :src="imgSrc" :alt="imgTitle+'!!!!!!!!!'">
        <br>
        <img :src="imgSrc" :alt="imgTitle+'!!!!!!!!!'" :class="isAcitvate?'active':' '"  @click="toggleActivate">
        <br>
        <img :src="imgSrc" :alt="imgTitle+'!!!!!!!!!'" :class="{active:isAcitvate} "@click="toggleActivate">
        
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                imgSrc:"http://www.itheima.com/images/logo.png",
                imgTitle:"黑马程序员",
                isAcitvate:false
            },
            methods:{
                toggleActivate:function(){
                    this.isAcitvate = !this.isAcitvate;
                }
            }

              
           
        })
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

效果如下图所示：
在这里插入图片描述

图片切换实例

通过箭头来完成图片切换。创建一个图片数组，通过索引切换图片。
效果图：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-bind指令</title>
    <style>
        .active{
            border: 20px solid red;
        }

        #mask {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh; /* Make #mask take the full height of the viewport */
        }

        #mask div {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        #mask button {
            padding: 10px 20px;
            font-size: 160px;
        }
    </style>
</head>
<body>
    <div id="mask">
        <div>
            <button @click="prev">
                上一页
            </button>
            <img :src="imgArr[index]" alt="">
            <button @click="next">
                下一页
            </button>

        </div>
        
        

        
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#mask",
            data:{
                imgArr:[
                    "./img/1.jpg",
                    "./img/2.jpg",
                    "./img/3.jpg",
                    "./img/4.jpg",
                    "./img/5.jpg",
                    "./img/6.jpg",
                    "./img/7.jpg",
                    "./img/8.jpg",
                    "./img/9.jpg",
                    "./img/10.jpg",
                ],
                index: 0,
            },
            methods:{
                prev:function(){
                    this.index--;
                },
                next:function(){
                    this.index++;
                }
            }

              
           
        })
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

v-for指令

这个指令是根据数据生成列表结构，类似一个for循环遍历数组所有的数据。
首先在一个ul（Unordered List）表格中生成li（List Item列表项目）列表。
表格或者标题文档都可以用v-for遍历，可以用（it，index）来对变量名称和索引遍历，也可以只用it来索引名称。
效果如图所示：
在这里插入图片描述

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-for</title>
    <style>
        .active{
            border: 20px solid red;
        }

        #mask {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh; /* Make #mask take the full height of the viewport */
        }

        #mask div {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        #mask button {
            padding: 10px 20px;
            font-size: 160px;
        }
    </style>
</head>
<body>
    <div id="mask">
        <input type="button" value="添加数据" @click="add">
        <input type="button" value="删除数据" @click="remove">
        <ul>
            <li v-for="(item,index) in arr">
                {{index+1}}徐工：{{item}}

            </li>
        </ul>
        <h2 v-for="it in vegetables">
            {{it.name}}
        </h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#mask",
            data:{
                arr:[
                    "朔州","徐州","苏州","深圳"
                ],
                vegetables:[
                    {name:"西红柿"},
                    {name:"黄瓜"}
                ]
            },
            methods:{
                add:function(){
                    this.vegetables.push({name:"花菜炒蛋"});
                },
                remove:function(){
                    this.vegetables.shift();
                }
            }
            

              
           
        })
    </script>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

v-on指令补充说明

这个指令可以用来自定义一些函数，
@click=“doIt（666，‘老铁’）”
methods：{
doIt：function（）{
console.log

常用的标签名

ul> 用于创建无序列表，其中项目没有特定的顺序，通常用圆点表示。
ol> 用于创建有序列表，其中项目按照特定的顺序编号，默认使用数字。

<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul>
<ol>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ol>

1
2
3
4
5
6
7
8
9
10
11

，

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/107802

VUE学习(完结）

这里写目录标题

VUE使用步骤

初始化一个新的项目

主文件App.vue

开始使用 Vue

VUE学习笔记

特点

简单尝试

el挂载点

本地应用

v-test指令

v-html指令

v-on指令

练习-------计数器

vue-show指令和vue-if 指令

v-bind指令

图片切换实例

v-for指令

v-on指令补充说明

常用的标签名