了解vue

了解vue

1、vue关注的是视图,那么开发者只需要将你的精力集中在数据上面。因为vue是通过数据进行驱动的。(自己写一个小型vue)
2、vue和JS不是完全互通。
3、vue的特征:双向绑定,虚拟DOM
4、vue当中:指令,过滤器,计算属性,侦听器,组件等
5、当数据发生变化时,挂载的元素会被重置

如何使用vue

1、vue引入
2、创建vue实例,new vue({})
3、通过 el 属性指定vue所要挂载的元素

 new Vue({
        el:"div",// 指定要挂载的元素。 指定ID,class,标签名,DOM元素。不允许挂载到html 和body
        data:{// 用于存储实例当中的数据
            num:1// 定义了一个名字为num的数据
        }
    })

vue的注意事项

1,当多个实例指定同一个元素时,以第一次出现为主

<div id="root">
    {{num}}{{age}}
</div>
new Vue({
    el:"#root",
    data:{
        num:1,
        age:2
    }
})
new Vue({
    el:"#root",
    data:{
        num:2
    }
})

2,一个实例挂载的元素有多个,只能挂载到第一个满足条件的元素上

<div class="root">{{num}}</div>
<div class="root">{{num}}</div>
new Vue({
        el:".root",
        data:{
            num:1
        }
})

{{}}中可以写 1、输出内容 2、可以写表达式

<div id="root">
    {{userName}} | {{sex===1?"男":"女"}} | {{str.split("").reverse().join("")}}
</div>
new Vue({
        el:"#root",
        data:{
            userName:"xiaozhao",
            sex:1,
            str:"我爱你中国,我亲爱的母亲"
        }
})

一个页面多个vue实例

同一个页面可以出现多个VUE实例。el需要指定不同的元素。
指定的元素不可以是其它vue指定元素所包含的元素。

<div id="root">
    {{str}}
</div>
<div id="wrap">
    {{str}}
</div>
new Vue({
    el:"#root",
    data:{
        str:"root"
    }
})
new Vue({
    el:"#wrap",
    data:{
        str:"wrap"
    }
})

指令

是以v-开头,对元素属性的扩展。分为内置指令和自定义的指令。

v-model:用于将数据与表单元素进行绑定

<div id="root">
    <input type="text" v-model="num">
    {{num}}
    <p>{{num}}</p>
</div>
new Vue({
    el:"#root",
    data:{
        num:1
     }
})

v-if:值是一个布尔。为true渲染,否则不渲染

<div id="root">
    <input type="text" v-model.number="sex">
    <div v-if="sex===1"></div>
    <div v-if="sex===2"></div>
</div>
new Vue({
    el:"#root",
    data:{
        sex:1
    }
})

v-if v-else

v-else-if:值是一个布尔值,需要与v-if结合使用。true渲染,否则不渲染
v-else:需要与v-if或v-else-if结合使用。当上面的条件不满足时,会渲染该指令所在的元素

<div id="root">
    <div v-if="isLogin">欢迎xxx的到来</div>
    <div v-else>请登陆先</div>

    <input type="text" v-model.number="sex">
    <div v-if="sex===1"></div>
    <div v-else-if="sex===2"></div>
    <div v-else>未知</div>
</div>
new Vue({
    el:"#root",
    data:{
        isLogin:true,
        sex:1
    }
})

v-show:用于实现显示与隐藏。通过更改display样式来实现的

<div id="root">
    <div v-show="num===1">您现在学习的是v-show指令</div>
</div>
new Vue({
    el:"#root",
    data:{
        num:2
    }
})

v-bind:是用于将属性与数据进行绑定的。它的简写(冒号) :

<div id="root">
    <img src="https://www.baidu.com/img/bd_logo1.png" alt="">
    <img :src="'https://www.baidu.com/img/bd_logo1.png'" alt="">
    <p>{{imgSrc}}</p>
    <img v-bind:src="imgSrc"alt="">
    <img :src="imgSrc"alt="">
</div>
new Vue({
    el:"#root",
    data:{
        imgSrc:"https://www.baidu.com/img/bd_logo1.png"
     }
})

v-for:可以实现遍历:数组,对象,数字,字符串

<div id="root">
1,遍历数组
<div v-for="item in arr">{{item}}</div>
<div v-for="(value,index) in arr">{{value}}|{{index}}</div>
2,遍历对象
<div v-for="item in obj">{{item}}</div>//item指value
<div v-for="(value,key) in obj">{{value}}|{{key}}</div>
3,遍历数字(1开始)
<div v-for="item in pageSum">{{item}}</div>
<div v-for="(a,b) in pageSum">{{a}}|{{b}}</div>//a是item,b是index
4,遍历字符串
<div v-for="item in str">{{item}}</div>
<div v-for="(a,b) in str">{{a}}|{{b}}</div>//a是item,b是index
</div>
new Vue({
    el:"#root",
    data:{
        arr:[1,2,3,4,8,9],
        obj:{
            userName:"laotie",
            age:12
        },
        pageSum:12,
        str:"我确定你就是那只匹着羊皮的狼"
    }
})

v-for补充

<div id="root">
    <div v-for="item in bookList">
        <p>{{item.author}}:{{item.bookName}}</p>
    </div>
</div>
new Vue({
    el:"#root",
    data:{
        bookList:[
            {
                author:"唐家三少",
                bookName:"斗罗大陆"
            },
            {
                author:"猫腻",
                bookName:"庆余年,将夜"
            }
        ]
    }
})

v-on:指定事件。事件的值可以是一个函数,也可以是一条多条JS语句。简写 @

<div id="root">
    <input type="button" value="显示与隐藏" @click="isShow=!isShow">
    <div v-show="isShow" style="width:200px;height:300px;background:red;">
        莫欺少年穷!
    </div>
</div>
new Vue({
    el:"#root",
    data:{
        isShow:true
    }
})
<div id="root">
    <input type="button" value="加1" v-on:click="num++">
    <input type="button" value="加2" v-on:click="num+=2">
    <input type="button" value="加3" v-on:click="function(){num+=3}">
    <input type="button" value="加4" v-on:click="()=>{num+=4}">
    <input type="button" value="加5" v-on:click="addFive">
    <input type="button" value="加" v-on:click="add(6)">
    <input type="button" value="加" v-on:click="alert(100)">

    <h3>{{num}}</h3>
</div>
new Vue({
    el:"#root",
    data:{
        num:0
    },
    methods:{
        alert(n){
            alert(n);
        },
        add(n){
            this.num += n;
        },
        addFive(){
            this.num += 5;
            console.log("执行了addFive")
        }
    }
})

v-html v-text {{}}

v-html:可以让你的浏览器识别HTML标签,会覆盖标签内原有内容。当你要在指定的元素内支持HTML
v-text:以文本的形式输出,会覆盖标签内原有内容。指定元素内的内容。
{{}}:只是输出。:当你只是在元素内的某个位置输出。

<div id="root">
    <input type="text" v-model="str">
    <div>{{str}}</div>
    <div v-html="str">ASDFASDFASDF</div>
    <div v-text="str">DAFASFASDFASDF</div>
</div>
<script>
    new Vue({
        el:"#root",
        data:{
            // 指定你的数据属性
            str:"你今天学习了吗?"
        },
        methods:{
            // 指定方法
        },
        mounted(){
            // 当你的实例在页面当中挂载完毕之后会执行。
        }
    })
</script>

v-once v-pre

v-once: 数据只会在初始渲染时响应。(只会响应一次)
v-pre: 指定的区域不会受到数据的影响。

<div id="root">
    <input type="text" v-model="str">
    <div>{{str}}</div>
    <div v-once>{{str}}</div>
    <div v-pre>121212{{str}}12121222</div>
</div>
<script>
    new Vue({
        el:"#root",
        data:{
            // 指定你的数据属性
            str:"你们现在还好吗?"
        },
        methods:{
            // 指定方法
        },
        mounted(){
            // 当你的实例在页面当中挂载完毕之后会执行。
        }
    })
</script>

style

<body>
<div id="root">
    <p style="color:yellow;background:red;">你现在好吗?心情快乐吗?</p>
    <p :style="abc">你现在好吗?心情快乐吗?</p>
    <p :style="fn()">你现在好吗?心情快乐吗?</p>
    <p :style="'color:yellow;background:red;'">你现在好吗?心情快乐吗?</p>
    <p :style="{background:'green',color:'blue'}">你现在好吗?心情快乐吗?</p>
    <p :style="[{background:'green'},{color:'blue'}]">你现在好吗?心情快乐吗?</p>
    <p :style="[co,bg]">你现在好吗?心情快乐吗?</p>
</div>
</body>
<script>
    new Vue({
        el:"#root",
        data:{
            co:{color:'orange'},
            bg:{background:'blue'},
            abc:"color:green;background:gold;"
        },
        methods:{
            fn(){
                return "color:green;background:gold;"
            }
        }
    })
</script>

class

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .co{
           color:greenyellow;
        }
        .bg{
            background:lightskyblue;
        }
        .abc {
            background:green;
        }
    </style>
    <script src="lib/vue.js"></script>
</head>
<body>
<div id="root">
   <p class="bg co">又成同学啦,好久不见呀</p>   //有class co,bg的样式
   <p :class="'bg co'">又成同学啦,好久不见呀!</p>  //有class co,bg的样式
   <p :class="abc">又成同学啦,好久不见呀!</p>  //没有样式的.data中没有abc属性名
   <p :class="['bg','co']">又成同学啦,好久不见呀!</p> //有class co,bg的样式
   <p :class="[bg,'co']">又成同学啦,好久不见呀!111111</p> //有co的样式
   <p :class="{bg:true}">最后一个</p> //有 class bg的样式
   <p :class="myBg">走一下</p> //有 class abc的样式
   <p :class="1===2?myBg:myAbc">走一下</p>  //有class co,bg的样式
   <p :class="{abc:true}">走一下</p> //有 class abc的样式
</div>
</body>
<script>
    new Vue({
        el:"#root",
        data:{
            myAbc:"bg co",
            myBg:"abc"
        }
    })
</script>

v-model修饰符

.number:将数据转为number类型
.trim:去除左右两侧的空格
.lazy:当失去焦点时,数据才会受到影响。

<body>
<div id="root">
<input type="text" v-model.number="a">+
<input type="text" v-model.number="b">{{a+b}}
<input type="text" v-model.trim="str">
<p>青龙{{str}}白虎</p>
<input type="text" v-model.lazy="userName">
<p>{{userName}}</p>
</div>
</body>
<script>
    new Vue({
        el:"#root",
        data:{
            a:0,
            b:0,
            str:"廖志浩",
            userName:"许家量"
        }
    })
</script>

用多种方式进行tab切换

1,原生js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #root input{
            padding:5px;
            margin:5px;
        }
        #root input.active{
            background:red;
        }
        #root div{
            width:200px;
            height:200px;
            background:yellow;
        }
    </style>
</head>
<body>
<div id="root">
    <input type="button" value="娱乐">
    <input type="button" value="体育">
    <input type="button" value="财经">
    <div>娱乐新闻</div>
    <div>体育新闻</div>
    <div>财经新闻</div>
</div>
</body>
<script>
    const btns = document.querySelectorAll("#root input");
    const myDiv = document.querySelectorAll("#root div");
    let index = 2;

    for(let i=0;i<btns.length;i++){
        myDiv[i].style.display = "none";
        btns[i].onclick = function () {
            hide();
            index = i;
            show();
        }
    }
    show();
    function hide() {
        btns[index].className = null;
        myDiv[index].style.display = "none";
    }
    function show(){
        btns[index].className = "active";
        myDiv[index].style.display = "block";
    }
</script>
</html>

2,面向对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #root input{
            padding:5px;
            margin:5px;
        }
        #root input.active{
            background:red;
        }
        #root div{
            width:200px;
            height:200px;
            background:yellow;
        }
    </style>
</head>
<body>
<div id="root">
    <input type="button" value="娱乐">
    <input type="button" value="体育">
    <input type="button" value="财经">
    <div>娱乐新闻</div>
    <div>体育新闻</div>
    <div>财经新闻</div>
</div>
</body>
<script>
    //  面向对过程---》面向对象:将之前的变量作为对象的属性,将之前的函数,作为对象的方法
    function Tag() {
        this.btns = document.querySelectorAll("#root input");
        this.myDiv = document.querySelectorAll("#root div");
        this.index = 2;
        this.init = function () {
            for(let i=0;i<this.btns.length;i++){
                this.myDiv[i].style.display = "none";
                this.btns[i].onclick =  () => {
                    console.log(1111111111,this);
                    this.hide();
                    this.index = i;
                    this.show();
                }
            }
            this.show();
        }
        this.show = function () {
            this.btns[this.index].className = "active";
            this.myDiv[this.index].style.display = "block";
        }
        this.hide = function () {
            this.btns[this.index].className = null;
            this.myDiv[this.index].style.display = "none";
        }
    }
    const tag = new Tag();
    tag.init();
</script>
</html>

3,vue方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #root input{
            padding:5px;
            margin:5px;
        }
        #root input.active{
            background:red;
        }
        #root div{
            width:200px;
            height:200px;
            background:yellow;
        }
    </style>
    <script src="lib/vue.js"></script>
</head>
<body>
<div id="root">
    <input :class="{active:index===0}" type="button" @click="index=0" value="娱乐">
    <input :class="{active:index===1}" type="button" @click="index=1" value="体育">
    <input :class="{active:index===2}" type="button" @click="index=2" value="财经">
    <div v-show="index===0">娱乐新闻</div>
    <div v-show="index===1">体育新闻</div>
    <div v-show="index===2">财经新闻</div>
</div>
</body>
<script>
    new Vue({
        el:"#root",
        data:{
            index:0,// 用于决定当前选中项。
        }
    })
</script>
</html>

4,豪华版切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #root input{
            padding:5px;
            margin:5px;
        }
        #root input.active{
            background:red;
        }
        #root div{
            width:600px;
            height:200px;
            background:yellow;
        }
    </style>
    <script src="lib/vue.js"></script>
</head>
<body>
<div id="root">
    <input type="button"
           :class="{active:index===i}"
           v-for="(item,i) in newsList"
           @click="index=i"
           :value="item.type"/>
    <div v-show="index===i" v-for="(item,i) in newsList">
        <p v-for="info in item.arr">
            <a :href="info.newsHref">{{info.newsTitle}}</a>
        </p>
    </div>
</div>
</body>
<script>
    new Vue({
        el:"#root",
        data:{
            index:0,// 选 中项
            newsList:[
                {
                    type:"娱乐",
                    arr:[
                        {
                            newsTitle:"许绍洋与交往7年女友分手,43岁的他黯然搬离昔日爱巢",
                            newsHref:"https://new.qq.com/omn/20200318/20200318A01CN300.html"
                        },
                        {
                            newsTitle:"许绍洋与交往7年女友分手,43岁的他黯然搬离昔日爱巢2222",
                            newsHref:"https://new.qq.com/omn/20200318/20200318A01CN300.html"
                        }
                    ]
                },{
                    type:"体育",
                    arr:[
                        {
                            newsTitle:"中国职业足坛首例!中甲梅州巴西球员确诊新冠",
                            newsHref:"http://sports.qq.com/a/20200318/018486.htm"
                        },
                        {
                            newsTitle:"中国职业足坛首例!中甲梅州巴西球员确诊新冠222222",
                            newsHref:"http://sports.qq.com/a/20200318/018486.htm"
                        }
                    ]
                },{
                    type:"财经",
                    arr:[
                        {
                            newsTitle:"一个留观酒店经理的记“疫”:这一次,希望酒店空荡荡",
                            newsHref:"https://new.qq.com/omn/20200318/20200318A0E7ZX00.html"
                        },
                        {
                            newsTitle:"一个留观酒店经理的记“疫”:这一次,希望酒店空荡荡22222",
                            newsHref:"https://new.qq.com/omn/20200318/20200318A0E7ZX00.html"
                        }
                    ]
                }
            ]
        }
    })
</script>
</html>

5,豪华增强版切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #root input{
            padding:5px;
            margin:5px;
        }
        #root input.active{
            background:red;
        }
        #root div{
            width:600px;
            height:200px;
            background:yellow;
        }
    </style>
    <script src="lib/vue.js"></script>
</head>
<body>
<div id="root">
    <input type="button"
           :class="{active:index===i}"
           v-for="(item,i) in newsList"
           @click="index=i"
           :value="item.type"/>
    <div v-show="index===i" v-for="(item,i) in newsList">
        <p v-for="info in item.arr">
            <a :href="info.newsHref">{{info.newsTitle}}</a>
        </p>
    </div>
</div>
</body>
<script>
    new Vue({
        el:"#root",
        data:{
            index:0,// 选中项
            newsList:[]
        },
        // vue 生命周期。
        mounted(){
            // 当刷新页面以后,并生成VUE实例以后,会执行该函数。
            // 当页面挂载完毕以后会执行该函数。钩子函数
            const xhr = new XMLHttpRequest();
            xhr.open("get","data.json"); //data.json中有如4中的newList中的形式差不多的但是是json数据的数据
            xhr.send();
            xhr.onload = () => {
                this.newsList = JSON.parse(xhr.responseText)
            }
        }
    })
</script>
</html>
发布了3 篇原创文章 · 获赞 0 · 访问量 31
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 深蓝海洋 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览