vue框架初学

最新推荐文章于 2022-12-13 22:13:45 发布

今天学习了没_

最新推荐文章于 2022-12-13 22:13:45 发布

阅读量100

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_44756893/article/details/117249039

版权

vue笔记-1

特点
1.js框架
2.简化Dom操作
3.响应式数据驱动

（1）导入开发版本的Vue.js

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

（2）创建Vue实例对象，设置el属性和data属性

<div id="app">
        {{ message }}
      </div>

（3）使用简洁的模板语法把数据渲染到页面上

<script>
        var app = new Vue({
            el: '#app',
            data: {
                 message: 'Hello world!'
                }
            })
    </script>

el挂载点

vue实例的作用范围：
el命中元素及后代元素，外部不可以

是否可以使用其他的选择器：
可以，建议使用id选择器。

是否可以设置其他的Dom元素：
可以，支持双标签（除了html和body），不支持单标签

data

vue中用到的数据定义在data中，data中可以写复杂类型数据，渲染复杂数据类型，遵守js的语法就ok。

 <div id="app">
        {{message}}
        <h5>{{person.name}}{{person.age}}</h5>
        <ul>
            <li>{{color[0]}}</li>
        </ul>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"你好",
                person:{
                    name:"jack",
                    age:"18"
                },
                color:["red","pink","black"]
            }
            
        })
    </script>

v-text指令

设置标签的文本值（textContent)
v-text会替换{{}}里面全部的值

<div id="app">
        <h2 v-text="message+'!'">猫猫</h2>//不会显示猫猫
        <h2 v-text="name+'!'">狗狗</h2>//不会显示狗狗
        <h2>{{message+'!'}}汪汪</h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"小花猫",
                name:"fafa"
            }
        })
    </script>

v-html

设置标签的innerHTML值
（如果设置文本和 v-text没什么区别但v-html会渲染html结构)

 <div id="app">
        <p v-html="content"></p>//有百度链接可以点击
        <p v-text="content"></p>//没有百度链接 展现的是文本
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                // content:"小花猫"
                content:"<a href='http://www.baidu.com'>百度</a>"

            }
        })

v-on

为元素绑定事件(可以替换为@) 绑定的方法定义在methods属性中。
重点不是更改dom元素，而是更改数据
数据更新时，使用的dom元素会同步更新，拿到这个数据需要用到this。

 <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>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                food:"韭菜炒鸡蛋"
            },
            methods:{
                doIt:function(){
                    alert("做打工人");
                },
                changeFood:function(){
                    // console.log(this.food);
                    //更改数据
                    this.food +="不好吃"
                }
            }

        })
    </script>

传递自定义参数，事件修饰符。
事件绑定的方法写成函数调用的形式，可以传入自定义参数；
定义方法时需要定义形参来接收传入的实参；
事件的后面跟上 .修饰符 可以对事件进行限制(.enter 可以限制事件触发的案件为回车)

<div id="app">
        <input type="button" value="别点我" @click="cook('蛋挞',300)">
        <input type="text" @keyup.enter="sayHi">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            methods:{
                cook:function(food,price){
                    alert(food);
                    alert(price);
                },
                sayHi:function(){
                    alert("学习真令人快乐啊 啊啊啊啊啊")
                }
            }
        })
    </script>

计数器

<div id="app">
        <div class="input-num">
            <button @click="sub">
                ➖
            </button>
            <!-- v-text 设置元素的文本值，简写为{{}} -->
            <span>{{num}}</span>  
            <button @click="add">
                ➕
            </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 //错误写法：num=1
            },
            methods:{
                add:function(){
                    this.num++;  //通过this获取data中的数据
                },
                sub:function(){
                    if(this.num>0){
                        this.num--;
                    }else{
                        alert("别点了");
                    }
                    
                }
            }
        })
    </script>

v-show

根据真假切换元素的显示状态（修改元素的display，实现隐藏)
true显示元素，false隐藏元素

<div id="app">
        <input type="button" value="切换显示状态" @click = "changeIsShow">
        <input type="button" value="累加年龄" @click = "addAge">
        <img v-show="isShow" src="mimi.jpg" alt="">
        <img v-show="age>=18" src="mimi.jpg" alt="">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            methods:{
                changeIsShow:function(){
                    this.isShow = !this.isShow;
                },
                    addAge:function(){
                        this.age++;
                    }
            },
            data:{
                isShow:false,
                age:17
            }
        })
    </script>

v-if

v-if：操纵的是dom树表达式值为true时，元素存在于dom树中，false时，从dom树中移除.
v-show:操纵的是样式(用于频繁操作的元素）

<div id="app">
        <input type="button" value="显示文字" @click="toggleShow">
        <p v-if="isShow">今天也是快乐学习的一天</p>
        <!-- 并不会显示下面这个p标签，因为temperature没有达到设置的值 -->
        <p v-if="temperature>=35">热死了</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                isShow:false,
                temperature:30
            },
            methods:{
                toggleShow:function(){
                    this.isShow = !this.isShow
                }
            }
        })
    </script>

v-bind

为元素绑定属性
简写 ：src=“属性名”；
如果是class :class="{active:isActive}"

<div id="app">
        <img v-bind:src="imgSrc" alt="" v-bind:title="imgTitle">
        <br>
        <img :src="imgSrc" alt="" :title="imgTitle" :class="{active:isActive}" @click="toggleActive">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                imgSrc:"mimi.jpg",
                imgTitle:"小猫猫",
                isActive:false
            },
            methods:{
                toggleActive:function(){
                    this.isActive = !this.isActive;
                }
            }   
        })
    </script>

照片切换

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

<div id="mask">
        <div class="center">
            <h2 class="title">
                喵喵品种
            </h2>
            <img :src="imgArr[index]" alt="">
            <!-- 左箭头 -->
            <!-- 错误：@click="prev"写到了img里面 -->
            <a href="javascript:void(0)" class="left" @click="prev" v-show="index!=0">
                <img src="images/left.jpg" alt="" >
            </a>
            <!-- 右箭头 -->
            <a href="javascript:void(0)" class="right" @click="next" v-show="index<imgArr.length-1">
                <img src="images/right.jpg" alt="" >
            </a>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var mask = new Vue({
            el:"#mask",
            data:{
                imgArr:[
                    "images/01.jpg",
                    "images/02.jpg",
                    "images/03.jpg"
                ],
                index:0
            },
            methods:{
                prev:function(){
                    this.index--;
                },
                next:function(){
                    this.index++;
                }
            }
        })
    </script>

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="(item,index) in arr">
                {{index+1}}猫咪品种:{{item}}
            </li>
        </ul>
        <h2 v-for="item in vegetable" v-bind:title="item.name">
            {{item.name}}
        </h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                arr:["暹罗","布偶","英短"],
                vegetable:[
                    {name:"韭菜炒鸡蛋"},
                    {name:"鸡蛋炒韭菜"}
                ]
            },
            methods:{
                add:function(){
                    this.vegetable.push({name:"鸡蛋炒蛋花"});
                },
                remove:function(){
                    this.vegetable.shift();
                }
            }
        })
    </script>

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 src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"天天学习我可真快乐"
            },
            methods:{
                getM:function(){
                    alert(this.message);
                },
                setM:function(){
                    this.message = "真的快乐"
                }
            }
        })
    </script>