VUE学习(完结）

qsl56789

已于 2023-12-15 14:35:27 修改

阅读量186

点赞数

文章标签： vue

于 2023-10-11 16:06:12 首次发布

本文链接：https://blog.youkuaiyun.com/qsl56789/article/details/133772664

版权

这里写目录标题

VUE使用步骤
- 初始化一个新的项目
- - 主文件App.vue
  - 开始使用 Vue
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>

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>

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>

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

图片切换实例

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

<!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>

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>

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>

，