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

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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"可以遍历数组
*此处注意索引是第二个参数

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端OnTheRun

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值