【Vue】

最新推荐文章于 2024-09-30 11:04:46 发布

玖念＾

最新推荐文章于 2024-09-30 11:04:46 发布

阅读量43

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_74996586/article/details/132758426

版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

Vue

一、指令
二、应用

一、指令

1.1 el挂载点

<body id="body">
    {{ message }}
    <h2 id="app" class="app">
        {{ message }}
        <span> {{ message }} </span>
        <!-- el命中的元素内部可以任意嵌套任何标签 -->
    </h2>
        <script>
            var app = new Vue({
                // el:"#app",
                // el:".app",
                // el:"div",
                el:"#body",
                data:{
                    message:"黑马程序员"
                }
            })
        </script>

Vue会管理el选项命中的元素及其内部
可以使用其他选择器，但建议使用ID选择器
可以使用其他的双标签，不能使用HTML和BODY

1.2data数据对象

在这里插入图片描述

    <div id="app">
        {{ message }}
        <h2>
            {{ school.name }}{{ school.mobile }}
        </h2>
        <ul>
            <li>{{ campus[0] }}</li>
            <li>{{ campus[3] }}</li>
        </ul>
    </div>
        <script>
            var app = new Vue({
                el:"#app",
                data:{
                    message:"你好，小黑！",
                    school:{
                        name:"黑马程序员",
                        mobile:"400-618-9090"
                    },
                    campus:["北京校区","上海校区","广州校区","深圳校区"]
                }
            })

        </script>

Vue中用到的数据定义在data中
data中可以写复杂类型地数据
渲染复杂类型的数据时，遵守js的语法即可

1.3 v-text指令

在这里插入图片描述

  <div id="app">
        <h2 v-text="message+'！'">深圳</h2>
        <h2 v-text="info+'！'">深圳</h2>
        <h2>{{ message+'!' }}深圳</h2>
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"黑马程序员！！！",
                info:"前端与移动教研部"
            }
        })  
    </script>

v-text指令的作用：设置标签的内容
默认写法会替换全部的内容，使用差值表达式{{}}可以替换指定的内容

1.4 v-html指令

v-html作用：设置元素的innerHTML,内容中有html结构会被解析为标签

    <div id="app">
        <p v-html="content"></p>
        <p v-text="content"></p>
    </div>
</script>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            // content:"黑马程序员"
            content:"<a href='http://www.itheima.com'>黑马程序员</a>"
        }
    })

1.5 v-on指令

v-on指令的作用：为元素绑定事件，事件名不需要写on
模版：

<input type=“button” value=“事件绑定” v-on:monseenter="方法
<input type=“button” value=“事件绑定” v:dbclick-on=“方法”

    <div id="app">
        <input type="button" value="v-on指令" v-on:click="doIt">
        <input type="button" value="v-on简写" @click="doIt">
        <input type="button" value="双击事件" @dblclick="doIt">
        <h2 @click="changeFood">{{ food }}</h2>
        <input type="button" value="鼠标移入事件" v-on:monseenter="doIt">
    </div> 
</script>
<script>
    var app=new Vue({
    el:"#app",
    data:{
        food:"西蓝花炒蛋"
    },
    methods: {
        doIt:function(){
            alert("做It");
        },
        changeFood:function(){
           console.log("好好吃！");
            // this.food+="好好吃！"
        }
    },
})
</script>

1.6 v-show指令

v-show指令的作用：根据真假切换元素的显示状态
原理是修改元素的display,实现显示隐藏

<div id="app">
    <input type="button" value="切换显示状态" @click="changeisShow">
    <input type="button" value="累加年龄" @click="addAge">
    <img v-show="isShow" src="http://www.itheima.com/images/logo.png" alt="">
    <img v-show="age>=18" src="http://www.itheima.com/images/logo.png" alt="">
</div>
</script>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            isShow:false,
            age:17
        },
        methods:{
            changeisShow:function(){
                this.isShow = !this.isShow;
            },
            addAge:function(){
                this.age++;
            }
        }
    })
</script>

1.7 v-if指令

v-if指令的作用：根据表达式的真假切换元素的显示状态
本质是通过操纵dom元素来切换显示状态
表达式的值为true,元素存在于DOM树中，为false,从DOM树中移除
频繁的切换使用v-show，反之使用v-if,前者的切换消耗小

    <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:20

        },
        methods:{
            toggleIsShow:function(){
                this.isShow = !this.isShow;
            }
        }
    })
</script>

1.8 v-bind指令

v-bind指令的作用：为元素绑定属性完整写法是 v-bind:属性名简写形式为：属性名
需要动态的增删class建议使用对象的方式

    <div id="app">
        <img v-bind:src="imgSrc" alt="">
        <br>
        <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="isActive?'active':''" @click="toggleActive">
        <br>
        <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="{active:isActive}" @click="toggleActive">
    </div>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            imgSrc:"http://www.itheima.com/images/logo.png",
            imgTitle:"黑马程序员",
            isActive:false
        },
        methods: {
            toggleActive:function(){
                this.isActive = !this.isActive;
            }
        }
    })  
</script>

1.9 v-for指令

v-for指令的作用：根据数据生成列表结构 -->
数组经常和且v-for结合使用
语法是（item,index)in 数据
item和index可以结合其他指令一起使用
数组长度的更新会同步到页面上，是响应式的

    <div id="app">
        <input type="button" value="添加数据" @click="add">
        <input type="button" value="移除数据" @click="remove">
        <ul>
            <li v-for="(it,index) in arr">
                {{index+1}}黑马程序员校区：{{it}}
            </li>
        </ul>
        <h2 v-for="item in vegetables" v-bind:title="item.name">
            {{item.name}}
        </h2>
    </div>
</script>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            arr:["北京","上海","广州","深圳"],
            vegetables:[
                {name:"西兰花炒蛋"},
                {name:"蛋炒西兰花"}
            ]
        },
        methods:{
            add:function(){
                this.vegetables.push({name:"花菜炒蛋"})
            },
            remove:function(){
                this.vegetables.shift();
            }

            },
    })
</script>

1.10 v- model指令

v-model指令的作用是便捷的设置和获取表单元素的值，绑定的数据会和表单元素的值相关联
绑定的数据和表单元素的值双向绑定

    <div id="app">
        <input type="button" value="修改message" @click="setM">
        <input type="text" v-model="message" @keyup.enter="getM">
        <h2>{{ message }}</h2>
    </div>
</script>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            message:"黑马程序员"
        },
        methods:{
            getM:function(){
                alert(this.message);
            },
            setM:function(){
                this.message="酷丁鱼";
            }
        }
    })
</script>

1.11axios基本使用

axios必须先导入后使用使用get或post方法即可发送对应的请求
then方法中的回调函数会在请求成功或者失败时触发
通过回调函数的形参可以获取相应内容，或错误信息
在这里插入图片描述

二、应用

2 .1计数器

    <div id="app">
        <div class="input-num">
            <button @click="sub">
                -
            </button>
            <span>{{ num }}</span>
            <button @click="add"> 
                +
            </button>
        </div>
        <img src="http://www.itheima.com/images/logo.png" alt="" />
    </div>
<script>
// 创建Vue实例
var app=new Vue({
    el:"#app",
    data:{
        num:1
    },
    methods:{
        add:function(){
            // console.log('add');
            if(this.num<10){
                this.num++;
            }else{
                alert('别点啦，最大啦！');
            }
        },
        sub:function(){
            // console.log('sub');
            if(this.num>0){
                this.num--;
            }else{
                alert('别点啦，最小啦！');
            }
        }
    }
})
</script>

2.2图片切换

2.3小黑记事本

<div id="mask">
    <div class="center">
      <h2 class="title">
        <img src="./images/logo.png" alt="">
        深圳创维校区环境
      </h2>
      <!-- 图片 -->
      <img :src="imgArr[index]" alt="" />
      <!-- 左箭头 -->
      <!-- <a href="javascript:void(0)" v-show="index!=0" @click="prev" class="left">
        <img src="./images/prev.png" alt="" />
      </a> -->
      <a href="javascript:void(0)" v-if="index!=0" @click="prev" class="left">
          <img src="./images/prev.png" alt="" />
        </a>
      <!-- 右箭头 -->
      <a href="javascript:void(0)" v-show="index<imgArr.length-1" @click="next" class="right">
        <img src="./images/next.png" alt="" />
      </a>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <script>
    var app = new Vue({
      el: "#mask",
      data: {
        imgArr: [
          "./images/00.jpg",
          "./images/01.jpg",
          "./images/02.jpg",
          "./images/03.jpg",
          "./images/04.jpg",
          "./images/05.jpg",
          "./images/06.jpg",
          "./images/07.jpg",
          "./images/08.jpg",
          "./images/09.jpg",
          "./images/10.jpg",
        ],
        index: 0
      },
      methods: {
        prev:function(){
          this.index--;
        },
        next:function(){
          this.index++;
        }
      },
    })
  </script>