2021-07-30 vue笔记-基础(一) 插值表达式,双向绑定,事件处理

前端OnTheRun

已于 2022-10-26 11:18:50 修改

阅读量312

点赞数

分类专栏： vue学习笔记文章标签： vue

于 2021-07-30 19:39:08 首次发布

本文链接：https://blog.csdn.net/rowlet/article/details/119254748

版权

vue学习笔记专栏收录该内容

30 篇文章 0 订阅

订阅专栏

这篇Vue笔记介绍了模板语法，包括插值语法{{}}和指令v-xxx，详细讲解了插值表达式、v-text/v-html的区别、v-cloak与延时器的应用，v-bind的多种用法，如设置标题和样式，以及v-on事件处理，特别讨论了v-model的双向绑定和事件冒泡与捕获的概念。

摘要由CSDN通过智能技术生成

文章目录

0.模板语法

插值语法:{{}}

功能: 用于解析标签体内容
语法: {{xxx}} ，xxx 会作为 js 表达式解析

指令语法:v-xxx

功能: 解析标签属性、解析标签体内容、绑定事件
举例：v-bind:href = ‘xxxx’ ，xxxx 会作为 js 表达式被解析
说明：Vue 中有有很多的指令，此处只是用 v-bind 举个例子

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

相同点:指令语法v-html="msg"等价于插值语法{{msg}}
不同点: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">点击</button> {{msg}}
</div>
<script>
    //   1.4.2. 单向数据绑定
    //         1. 语法：v-bind:href ="xxx" 或简写为 :href
    //         2. 特点：数据只能从 data 流向页面
    //   1.4.3. 双向数据绑定
    //         1. 语法：v-mode:value="xxx" 或简写为 v-model="xxx"
    //         2. 特点：数据不仅能从 data 流向页面，还能从页面流向 data
    var app = new Vue({
        el: '#app',
        data: {
            msg: 'hello'
        },
        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">
	<input type="text" v-model="msg" v-on:keyup.enter="fn"/>
	<button type="button" @click="fn">百度一下</button>
	<h3 v-show="flag">{{msg}}的搜索结果是:</h3>
	<h5 v-show="flag" v-for="(item,index) in fruits">第{{index+1}}号水果是{{item}}</h5>
</div>
<script>
	var app = new Vue({
		el: '#app',
		data: {
			flag:false,
			msg:"水果",
			fruits:["apple","banana","watermelon","orange"]
		},
		methods:{
			fn(){
				//this要记得写,指向调用fn的对象
				this.flag=true,
				console.log(this.msg);
			}
		}
	})
</script>

结果:

在这里插入图片描述

14.知识点总结

1.v-once 只渲染一次
2.v-pre 不会把{{msg}}转换
3.获取实例中的data的数据的方法:

  vm.$data.num
  vm._data.num
  vm.num
  *或app

4.v-bind

v-bind:title="msg"可以让msg的内容成为此div的innerHTML的悬停信息
v-bind:style="{样式}"可以写样式
v-bind可以省略不写,只写冒号和后面的单词
v-bind:style="arr"实现样式的数组化

5.v-on:事件名=函数名可以绑定事件,
变量写在data里,函数体写在methods里,
v-on可以简写成@
6.bug:修改数组或对象,但视图层没有更新
解决:this.$forceUpdate();
7.v-model实现双向绑定
8.冒泡和阻止冒泡以及事件捕获

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

9.v-show=布尔值,true是才会显示此div
10.使用v-for="(item,index) in arr"可以遍历数组
*此处注意索引是第二个参数