[JavaScript知识库] 2021-07-30 vue基础笔记整理(一)

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 2021-07-30 vue基础笔记整理(一) -> 正文阅读

[JavaScript知识库]2021-07-30 vue基础笔记整理(一)

1.插值表达式

html:

<div id="app">
    <p>我是:{{msg}}</p>
    <p>我是:{{3+4}}</p>
    <p>我是:{{msg.substr(0,2)}}</p>
    <p>我是:{{age>=18?'成年人':'未成年人'}}</p>
    <p>我叫:{{obj.name}},我的id是{{obj.id}}</p>
    <p>{{fn()}}</p>
    <p>{{fn2()}}</p>
</div>

script:

new Vue({
    el:"#app",
    data:{
        msg:"hello",
        age:20,
        obj:{
            name:'zs',
            id:1001
        },
        fn:()=>{
            return '你好世界'
        },
        fn2:()=>{
            return 1231233
        }
    }
});

结果:

我是:hello
我是:7
我是:he
我是:成年人
我叫:zs,我的id是1001
你好世界
1231233

2.v-text和v-html

html:

<div id="app">
    {{msg}}
    <div v-html="msg"></div>
    <div v-text="msg"></div>
    <!-- v-text不可以用来显示图片 -->
    <!-- <div v-text="img2"></div> -->
    <!-- v-html可以用来显示图片 -->
    <!-- <div v-html="img2"></div> -->
</div>

script:

new Vue({
    el:"#app",
    data:{
        msg:"hello world",
        img2:'<img src="../576D452B-EA49-4F21-AAD0-4F7E4C56B96F.png" οnerrοr="alert(404 EARROR!!)">'
    }
});

总结:

1.v-text不可以用来显示图片,v-html可以用来显示图片
2.插值表达式写在{{}}里和写在""里效果是一样的,如
    <!-- v-html之后 有一个 “”可以看成 {{}} -->
    <div v-html>{{msg}}</div>
    <div v-html="msg"></div>

3.使用v-cloak和延时器实现一个样式的延迟加载

html:

<div v-cloak id="app">
    {{msg}}
</div>

css:

[v-cloak]{
    display:none;//效果:1s后才显示hello world
}

script:

setTimeout(()=>{
    new Vue({
        el:"#app",
        data:{
            msg:"hello world"
        }
    });
},1000);

4.v-pre和v-once

html:

<div id="app">
    <div v-html>{{msg}}</div>
    <div v-pre>{{msg}}</div>
    <div v-html>{{num}}</div>
    <div v-once>{{num}}</div>
</div>

script:

var vm=new Vue({
    el:"#app",
    data:{
        msg:'hello',
        num:100
    }
});
setTimeout(() => {vm.$data.num = 1000}, 1000)
setTimeout(() => {vm._data.num = 2000}, 2000)
setTimeout(() => {vm.num = 3000}, 3000)

结果:

hello
{{msg}}
100>1000>2000>3000
100

总结:

1.出现v-pre的标签内部不会出现正则替换(即:{{msg}}不会被正则替换成hello)
2.出现v-once的标签只会渲染一次(即:msg只会被data中的msg渲染,后面无法改动)
3.获取实例中data的数据的方法:
    vm.$data.num
    vm._data.num
    vm.num

5.v-bind:title实现悬停文本,v-bind:style设置样式

html:

<div id="app">
    <div v-bind:title="msg">我是div</div>
    <div v-bind:style="{color:c}">我是颜色文本/div>
</div>

script:

var app = new Vue({
    el: '#app',
    data: {
        msg: '我是悬停信息',
        c:"red"
    }
})

结果:

1.鼠标悬停在"我是div"上,出现悬停信息
2.我是颜色文本

6.原生js实现a标签悬停信息的改变

<a herf="#" title="aaaa">百度一下</a>
<button type="button" onclick="javascript:document.querySelector('a').title='bbbb'">点击改变</button>

7.v-bind:target和v-bind:href实现a标签的跳转

html:

<div id="app">
    <a v-bind:href="url" v-bind:target="type">点击跳转{{alt}}</a>
    <a :href="url" :target="type">点击跳转{{alt}}</a>
</div>

script:

var app = new Vue({
    el: '#app',
    data: {
        url:"https://www.baidu.com",
        type:"_blank",
        alt:"百度一下"
    }
})

总结:

v-bind:xxx可以简写成:xxx

8.v-bind的数组用法

html:

<div id="app">
    <!-- 实现:1s后延时器改变div1样式 -->
   <div id="box" v-bind:style="{color:c,backgroundColor:bgc}">
        我是div1
   </div>
    <!-- 实现样式的数组用法 -->
   <div id="box" v-bind:style="arr">
        我是div2
   </div>
</div>

script:

var app = new Vue({
    el: '#app',
    data: {
        c:'red',
        bgc:'blue',
        arr:[
        {
            fontWeight:"900",
            fontSize:"20px"
        },
        {
            backgroundColor:'green',
            color:"white"
        }    
        ]
    }
})
setTimeout(()=>{
    app.$data.c = 'white';
    app.$data.bgc = 'black';
},2000)

结果:

1.div1样式被延时器改变
2.div2设置了样式的数组

9.v-on设置自增按钮

html:

<div id="app">
    <button type="button" v-on:click="fn(5)">点击</button>
    <button type="button" @click="fn(5)">点击</button>
    <h1>{{num}}</h1>
</div>

script:

var app = new Vue({
    el:"#app",
    data:{
        num:100
    },
    methods:{
        fn(n){
                this.num+=n;
        }
    }

总结:

1.v-on:click可以简写成@click
2.methods设置函数方法

10.修改数组或对象,但视图层没有同步更新的bug

body:

<div id="app">
    <button type="button" @click="fn">点击</button>
    <h1>{{arr[0]}}</h1>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            arr:[1,3,5,7,9]
        },
        methods:{
            fn(){
                    this.arr[0]=10;
                    alert(this.arr);//bug:此处arr[0]的值已更改,但是视图层(h1标签)中没有改变
                    //解决方法:vue2提供给所有示例一个全局方法,可以让算法重新计算和更新页面
                    this.$forceUpdate()
                    //注:vue3中已解决此bug,新增13种绑定数据的其他方法
                    //object.defineProperty proxy
            }
        }
    })
</script>

11.v-model实现双向绑定

body:

<div id="app">
    <input type="text" v-model="msg" />
    <button @click="fn">点击获取msg</button>
    {{msg}}
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            msg: ' this is message'
        },
        methods:{
            fn(){
                alert(this.msg)
            }
        }
    })
</script>

12.冒泡&捕获,阻止冒泡&阻止默认行为

body:

<div id="app">
    <div id="car" @click.stop="type('车')">
        <div id="benzcar" @click.stop="type('奔驰车')">
            <a @click.stop.prevent="type('a')" href="https://www.baidu.com">百度一下</a>
        </div>
    </div>
</div>
<script>    
    var app = new Vue({
        el: '#app',
        methods:{
            type(n){
                console.log("我是",n);
            }
        }
    })
</script>

捕获:

<div id="app">
    <div id="car" @click.capture="type('车')">
        <div id="benzcar" @click.capture="type('奔驰车')">
            <a @click.stop.prevent="type('a')" href="https://www.baidu.com">百度一下</a>
        </div>
    </div>
</div>

总结:

1.用@click.stop实现阻止点击事件的冒泡
2.用@click.prevent实现点击事件的默认行为
3.用@click.capture实现点击事件的捕获
4.捕获和冒泡的区别:冒泡是先输出子元素的输出语句,最后输出最外层父元素的输出语句,捕获则相反

13.使用v-bind:key实现键盘抬起事件,用v-for遍历数组

body:

<div id="app">
    <li v-bind:key='index' v-for="(item,index) in fruits">第{{index+1}}号水果是:{{item}}</li>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            fruits:["apple","banana","watermelon","orange"]
        }
    })
</script>