Vue学习笔记——Vue核心

志存高远呢

已于 2022-09-05 15:53:52 修改

阅读量470

点赞数 2

分类专栏： vue 文章标签： vue.js 学习前端

于 2022-07-11 21:02:27 首次发布

本文链接：https://blog.csdn.net/weixin_55088962/article/details/125728233

版权

vue 专栏收录该内容

7 篇文章 2 订阅

订阅专栏

一.Vue简介

vue是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架;作为前端三大框架之一的Vue,同时兼具了angular.js和react.js的优点，并剔除了它们的缺点。
目前前端三个框架，通过它们在 GitHub 的 Star 历史和 NPM 的下载趋势图来对比一下，可以看出在 GitHub 上，Vue 的数据上升最快，并且在四年前的 2018 年 6 月 28 日已经超过了 React，成为了最受欢迎的前端框架。

二.使用Vue

1.安装vue

传送门
直接前往vue官网安装vue.js即可

2.引入vue

<script src="./js/vue.js"></script>

3.使用vue

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入Vue -->
		<script src="../js/vue.js"></script>
	</head>
	<body>
	<!-- 准备好一个容器 -->
		<div class="app">
			<h1>Vue</h1>
			<p>{{msg}}</p>
			
			<input type="text" v-model="msg">
		</div>
		<script>
			new Vue({
				el: ".app",//el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
				data: {//data用于存储数据，数据共el所指定的容器去使用
					msg: "你好,Vue!",
				}, 
			})
		</script>
	</body>
</html>

注意：

想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象
app容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法
app容器里的代码被称为Vue模板
Vue实例与容器是一一对应的
真实开发中只有一个Vue实例，并且会配合着组件一起使用
{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性
一旦data中的数据发生变化，那么模板中用到该数据的地方也会自动更新

三.Vue指令

1.文本渲染指令

new Vue({
	el:"#app",
	data:{
		msg:"你是猪么?",
		tip:"<em>河南真ye啊!</em>"
	}
})

v-text

<p v-text="msg"></p>
<p v-text=160+90></p>

v-html(支持html标签)

<p v-html="msg"></p>
<p v-html=160+90></p>
<p v-html="tip"></p>

2.数据绑定

v-bind与v-model

<div id="app">
    单向数据绑定：<input type="text" v-bind:value="name"><br>
    双向数据绑定：<input type="text" v-model:value="name">
</div>

Vue中有2种数据绑定的方式：

单向绑定（v-bind）：数据只能从data流向页面
双向绑定（v-model）：数据不仅能从data流向页面，还可以从页面流向data

注意：

双向绑定一般都应用在表单类元素上（如：input、select、textarea等）
v-model:value可以简写为v-model，因为v-model默认收集的就是value值

3.条件渲染

v-if和v-show

<div id="app">
	<h1>Vue 条件渲染指令</h1>
	<h1>v-if</h1>
	<p v-if="scroe>=80">优秀</p>
	<p v-else-if="scroe>=70">良好</p>
	<p v-else-if="scroe>=60">及格</p>
	<p v-else="scroe<60">不及格</p>
	<h1>v-show</h1>
	<p v-show="true">你好,Vue!</p>
 </div>
</body>
<script type="text/javascript">
new Vue({
	el:"#app",
	data(){
		return {
			scroe:80
		}
	}
})
</script>

v-show与v-if区别:v-show是css方式隐藏,v-if直接移除节点

4.v-for遍历

在data里定义list数据,通过v-for遍历在html中

<p v-for="(item,index) in list" :key="index">{{index+1}}-{{item}</p>
<!-- :key 优化渲染列表,值是唯一,vue对列表更新,排序,筛选更加优化 -->

5.事件处理

5.1 事件的基本用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件的基本用法</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2>hello,{{name}}</h2>
        <button v-on:click="showInfo1">点我提示信息1</button>
        <button @click="showInfo2($event,66)">点我提示信息2</button>
    </div>

    <script>
        Vue.config.productionTip = false 
        new Vue({
            el:'#root', 
            data:{
                name:'JOJO'
            },
            methods:{
                showInfo1(event){
                    console.log(event)
                },
                showInfo2(evnet,num){
                    console.log(event,num)
                }
            }
        })
    </script>
</body>
</html>

注意: 事件的回调需要配置在methods对象中
效果:
在这里插入图片描述

5.2事件修饰符

.stop 阻止事件冒泡
.prevent 阻止默认事件
.once 执行一次

修饰符可以连续写，比如可以这么用：@click.prevent.stop="showInfo"

5.3 键盘事件

Vue中常用的按键别名：

回车：enter
删除：delete (捕获“删除”和“退格”键)
退出：esc
空格：space
换行：tab (特殊，必须配合keydown去使用)
上：up
下：down
左：left
右：right

用法

@keyup+按键名="响应函数"

注意：

配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发
配合keydown使用：正常触发事件
可以使用keyCode去指定具体的按键，比如：@keydown.13="showInfo"，但不推荐这样使用
Vue.config.keyCodes.自定义键名 = 键码，可以自定义按键别名

四.vue的选项

1.el:指定模板
2.data:存放数据
3.methods:函数方法
这些前面前面都有介绍,这里就不一一赘述了

computed计算属性

计算属性:

定义：要用的属性不存在，需要通过已有属性计算得来。

注意:

计算属性最终会出现在vm上，直接读取使用即可
如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			数量:<input type="text" v-model="count">
			<br>
			价格:<input type="text" v-model=price>
			<br>
			<p>总价:{{total}}</p>
		</div>
	</body>
	<script>
		new Vue({
			el:"#app",
			data:{
				count:5,
				price:10
			},
			computed:{
				total:function(){
					return this.count*this.price
				}
			}
		})
	</script>
</html>

效果:
在这里插入图片描述

watch属性监听

监视属性watch：

当被监视的属性变化时，回调函数自动调用，进行相关操作
监视的属性必须存在，才能进行监视

用法:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<button @click="num++">{{num}}</button>
			<button @click="num+=5">{{num}}</button>
		</div>
	</body>
	<script>
		new Vue({
			el:"#app",
			data(){
				return {num:5}
			},
			watch:{
				num:{
					handler(nval,oval){
						console.log("num从",oval,"变化为",nval)
					}
				}
			}
		})
	</script>
</html>

效果图:
在这里插入图片描述

深度监听

在watch中配置deep:true可以实现深度监听
注意：
使用watch时根据监视数据的具体结构，决定是否采用深度监视

filters管道过滤

过滤器：

定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
语法：

1.注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
2.使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"

备注:

1.过滤器可以接收额外参数，多个过滤器也可以串联
2.并没有改变原本的数据，而是产生新的对应的数据

用法：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<p>{{pi|fix}}</p>
			<p>{{18888|fix(1)}}</p>
		</div>
	</body>
	<script>
		new Vue({
			el:"#app",
			data(){
				return{pi:3.1415926}
			},
			filters:{
				fix(val,org=2){
					//toFixed保留小数点后org位
					return Number(val).toFixed(org)
				}
			}
		})
	</script>
</html>

显示结果:
在这里插入图片描述

directives自定义指令

1.自定义指令定义语法：

 new Vue({															
 	directives:{
		focus:{
			//指令与元素成功绑定时（一上来）
			bind(element,binding){
				element.value = binding.value
			},
		    //指令所在元素被插入页面时
		    inserted(element,binding){
		    	element.focus()
		    },
		    //指令所在的模板被重新解析时
		    update(element,binding){
		    	element.value = binding.value
		    }
		}
	}
 })