5个案例快速入门Vue.js(1)

第一章Vue基础

第一个Vue程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue基础</title>
    <!-- 开发环境vue版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        {{message}}
        <h2>{{school.name}} {{school.email}}</h2>
        <ul>
            <li>{{arrs[0]}}</li>
            <li>{{arrs[2]}}</li>
        </ul>
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"你好，没头脑！",
                school:{
                    name:"猪礼",
                    email:"1476182789@qq.com"
                },
                arrs:['北京','上海','深圳']
            }
        })
    </script>
</body>
</html>

el挂载点

el是用来设置Vue实例挂载的元素
Vue会管理el选项命中的元素及其内部的后代元素
可以使用其他选择器，但是建议使用ID选择器
可以使用其他的双标签，不能使用html和body

data:数据对象

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

　　第二章本地应用

v-text

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

v-html

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

v-on

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

<!--
 * @Descripttion: 
 * @version: 
 * @Author: 会飞的猪礼
 * @Date: 2021-08-14 12:51:00
 * @LastEditors: 会飞的猪礼
 * @LastEditTime: 2021-08-14 13:23:14
-->
<!DOCTYPE html>
<html lang="zh-CN">

<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-text、v-html、v-on实例</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <h2 v-text="message+'@'">达八八八</h2>
        <h2 v-text="todo+'@'">达八八八</h2>
        <h2>{{message+'@'}}{{todo}}达八八八</h2>

        <h2 v-html="content"></h2>
        <h2 v-text="content"></h2>

        <input type="button" value="v-on元素绑定" v-on:click="doIt">
        <input type="button" value="简写元素绑定" @click="doIt">
        <input type="button" value="双击元素绑定" @dblclick="doIt">
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data:{
                message:"会飞的猪礼",
                todo:"要去打豆豆",
                content:'<a href="https://www.cnblogs.com/staryin/">会飞的猪礼个人博客</a>'
            },
            methods: {
               doIt:function(){
                   alert("搞it的小菜鸟")
               }
            }
        })
    </script>
</body>

</html>

　　第一个实例——计算器

思路

data中定义数据，比如num
methods中添加两个方法：比如add(递增),sub(递减)
使用插值表达式将num设置给span标签
使用v-on将add,sub分别绑定给+，-按钮
累加的逻辑：小于10累加，否则提示
递减的逻辑：大于0递减，否则提示

计数器

创建Vue实例时：el(挂载点)，data(数据)，methods(方法)　
v-on指令的作用是绑定事件，简写为@
方法中通过this，关键字获取data中的数据
v-text指令的作用是：设置元素的文本值，简写为{{}}
v-html指令的作用是：设置元素的innerHTML

<!--
 * @Descripttion: 
 * @version: 
 * @Author: 会飞的猪礼
 * @Date: 2021-08-14 13:33:30
 * @LastEditors: 会飞的猪礼
 * @LastEditTime: 2021-08-14 14:15:15
-->
<!DOCTYPE html>
<html lang="zh-CN">

<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>计算器</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<style>
    .input-num{
        width: 200px;
        height: 50px;
        margin: 0 auto;
    }
</style>
<body>
    <div id="app">
        <div class="input-num">
            <button @click="sub">-</button>
            <span>{{num}}</span>
            <button @click="add">+</button>
        </div>
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
               num:1
            },
            methods:{
                // *做个判断，数字增加最大不能超过10，最小不能超过0
                sub:function(){
                    // console.log('sub')
                    if(this.num>0){
                         this.num--;
                    }else{
                        alert("已经到0了，不能再减了")
                    }
                   
                },
                add:function(){
                    // console.log('add')
                    if(this.num<10){
                         this.num++;
                    }else{
                        alert("已经到10了，不能再加了")
                    }
                }
            }
        })
    </script>
</body>

</html>

v-show

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

<!--
 * @Descripttion: 
 * @version: 
 * @Author: 会飞的猪礼
 * @Date: 2021-08-14 18:56:12
 * @LastEditors: 会飞的猪礼
 * @LastEditTime: 2021-08-14 19:08:37
-->
<!DOCTYPE html>
<html lang="zh-CN">

<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-show实例</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>
        div{
            width: 200px;
            height: 200px;
            margin: 0 auto;
        }
        img{
            width: 200px;
            height: 200px;
        }
        
    </style>
</head>

<body>
    <div id="app">
        <input type="button" value="切换显示状态" @click="changeIsShow">
        <img v-show="isShow" src="./img/yue.jpg" alt="">
        <input type="button" value="累加年龄" @click="addAge">
        <img v-show="age>=18" src="./img/yue.jpg" alt="">
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
               isShow:false , //true显示图片  false隐藏图片
               age:15 //当年龄>=18了，图片就会一直显示
            },
            methods:{
                changeIsShow:function(){
                    this.isShow = !this.isShow  //切换显示/隐藏
                },
                addAge:function(){
                    this.age++;
                }
            }
        })
    </script>
</body>

</html>

v-if

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

<!--
 * @Descripttion: 
 * @version: 
 * @Author: 会飞的猪礼
 * @Date: 2021-08-14 21:16:07
 * @LastEditors: 会飞的猪礼
 * @LastEditTime: 2021-08-14 21:45:22
-->
<!DOCTYPE html>
<html lang="zh-CN">

<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-if实例</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<!-- 
    v-if控制的是DOM树，整个HTML页面的DOM元素 显示标签就存在，隐藏标签就消失，比较耗能
    v-show控制的是元素的display属性，display:block显示，display:none隐藏
 -->
<body>
    <div id="app">
        <input type="button" value="切换显示" @click="toggleIsShow">
        <p v-if="isShow">使用v-if修饰</p>
        <p v-show="isShow">使用v-show修饰</p>
        <h2 v-if="temperature>=35">太热啦!</h2> <!-- data下面的温度的值写的大于或等于35度就可以显示，小于35度的就不显示 -->
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
               isShow:false,  //这里设置的默认为false不显示，如果是true,就是默认显示
               temperature:20 //40 h2标签显示，20 h2标签不显示
            },
            methods:{
                toggleIsShow:function(){ //点击切换时，不显示就是this.isShow,显示就是取反
                    this.isShow = !this.isShow;
                }
            }
        })
    </script>
</body>

</html>

v-bind

v-bind指令的作用是：为元素绑定属性
完整写法是v-bind:属性名
简写的话可以直接省略v-bind,只保留:属性名
需要动态的增删class建议使用对象的形式

<!--
 * @Descripttion: 
 * @version: 
 * @Author: 会飞的猪礼
 * @Date: 2021-08-14 22:11:00
 * @LastEditors: 会飞的猪礼
 * @LastEditTime: 2021-08-14 22:36:09
-->
<!DOCTYPE html>
<html lang="zh-CN">

<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>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>
        img{
            width: 200px;
            height: 200px;
        }
        /* 点击图片的时候会出现一个红色的边框 */
        .active{
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div id="app">
        <img v-bind:src="imgSrc" alt="">
        <br> 
        <!-- v-bind可以简写为:(冒号) 可以在字符串里添加表达式-->
        <img :src="imgSrc"  alt="" :title="imgTitle+'!!!'"
        :class="isActive?'active':''" @click="toggleActive">
        <!-- 这里可以写三元表达式或者对象的形式 -->
        <br>
        <!-- :title="imgTitle+'!!!'" 鼠标放在图片上会出现月上美如画！！！ -->
        <img :src="imgSrc" :title="imgTitle+'!!!'" alt="" 
        :class="{active:isActive}" @click="toggleActive">
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
               imgSrc:"./img/yue.jpg",
               imgTitle:"月上美如画",
               isActive:false //默认为false不显示红色边框
            },
            methods:{
                toggleActive:function(){
                    this.isActive = !this.isActive; //绑定点击事件，默认无边框，点击有边框
                }
            }
        })
    </script>
</body>

</html>

　　第二个实例——图片切换

思路

定义图片数组
添加图片索引
绑定src属性
图片切换逻辑
显示状态切换

图片切换

列表数据使用数组保存
v-bind指令可以设置元素属性，比如src
v-show和v-if都可以切换元素的显示状态，频繁切换使用v-show

<!--
 * @Descripttion: 
 * @version: 
 * @Author: 会飞的猪礼
 * @Date: 2021-08-14 22:36:54
 * @LastEditors: 会飞的猪礼
 * @LastEditTime: 2021-08-14 23:28:30
-->
<!DOCTYPE html>
<html lang="zh-CN">

<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>图片切换</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>
        .left{
            margin-left: -705px;
        }
        .right{
            margin-left: 605px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="center">
            <h2 class="title">
                <img src="./img/logo.png" alt="">
            </h2>
            <!-- 图片 -->
            <img :src="imgArr[index]" alt="">
            <!-- 左箭头  index!=0的时候第一张没有左箭头-->
            <a href="#" class="left" @click="prev" v-show="index!=0">
                <img src="./img/prev.png" alt="">
            </a>
             <!-- 右箭头 index<imgArr.length-1最后一张没有右箭头-->
             <a href="#" class="right" @click="next" v-show="index<imgArr.length-1"> 
                <img src="./img/next.png" alt="">
            </a>
        </div>
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
               imgArr:[ //引入所有切换图片路径
                    "./img/00.jpg",
                    "./img/01.jpg",
                    "./img/02.jpg",
                    "./img/03.jpg",
                    "./img/04.jpg",
                    "./img/05.jpg",
                    "./img/06.jpg",
                    "./img/07.jpg",
                    "./img/08.jpg",
                    "./img/09.jpg",
                    "./img/10.jpg",
               ],
               index:0
            },
            methods:{
                // 声明上一个和下一个的方法
                prev:function() {
                    this.index--;
                },
                next:function(){
                    this.index++;
                }
            }
        })
    </script>
</body>

</html>

v-for

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

<!--
 * @Descripttion: 
 * @version: 
 * @Author: 会飞的猪礼
 * @Date: 2021-08-14 23:37:54
 * @LastEditors: 会飞的猪礼
 * @LastEditTime: 2021-08-14 23:45:51
-->
<!DOCTYPE html>
<html lang="zh-CN">

<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>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="button" value="添加数据" @click="add">
        <input type="button" value="移除数据" @click="remove">
        <ul>
             <li v-for="(item,index) in arr"> <!-- item这个参数名可以随便起，对应下面的arr -->
                {{index +1}}{{item}}
            </li>
        </ul>
        <h2 v-for="fs in fruit" :title="fs.name">
            {{fs.name}}
        </h2>
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
               arr:["北京","上海","广州","深圳"],//对应item
               fruit:[
                   {name:"西瓜"},
                   {name:"香蕉"},
                   {name:"苹果"}
               ]
            },
            methods:{
                add:function(){
                    this.fruit.push({name:"哈密瓜"}); //push添加数据
                },
                remove:function(){
                    this.fruit.shift({name:"哈密瓜"}); //shift移除数据
                }
            }
        })
    </script>
</body>

</html>

v-on补充

事件绑定的方法写出函数调用的形式，可以传入自定义参数
定义方法时需要定义形参来接收传入的实参
事件的后面跟上.修饰符可以对事件进行限制
.enter可以限制触发的按键为回车
事件修饰符有多种

<!--
 * @Descripttion: 
 * @version: 
 * @Author: 会飞的猪礼
 * @Date: 2021-08-14 23:51:44
 * @LastEditors: 会飞的猪礼
 * @LastEditTime: 2021-08-14 23:54:57
-->
<!DOCTYPE html>
<html lang="zh-CN">

<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></title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="button" value="点击" @click="doThings(999,'哈哈哈')">
        <!-- 鼠标回车事件 -->
        <input type="text" @keyup.enter="sayHi">
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
               doThings:function(p1,p2){
                   console.log("lalala");
                   console.log("p1");
                   console.log("p2");
               },
               sayHi:function(){
                   alert("干啥呢？")
               }
            }
        })
    </script>
</body>

</html>

posted @ 2021-08-14 23:58 会飞的猪礼阅读(168) 评论(0) 收藏举报

刷新页面返回顶部

会飞的猪礼

5个案例快速入门Vue.js(1)

公告