vue是什么？
vue是用于构建用户界面的渐进式JavaScript框架(自底向上逐层开发的一个框架)
vue特点：组件化、虚拟dom、单页面应用、是一个MVVM框架、轻量化
MVVM：
M --- model 模型==数据==变量
V --- view 视图==页面==用户可以看见的界面
VM --- viewModel 视图模型==用来关联数据与视图之前的桥梁
view和model没有直接的联系，而是通过viewModel进行交互，model层数据通过数据绑定，绑定到页面上；view页面的数据改变通过dom监听反应到数据上
指令：在vue中给html标签添加的带有v-前缀的特殊属性
**v-model:给表单元素进行数据的双向数据绑定**
双向绑定原理：借助数据劫持和发布者订阅模式
数据劫持：数据拦截，在data中的数据在初始化的时候通过object.defineProperty进行监听，当数据改变setter后，VM就会知道，在视图改变getter，模型就会改变，模型变视图也会发生相应改变
发布者订阅模式：一对多的关系，发布者就是数据数据提供者，订阅者就是页面展示的，发布者改变，订阅者也会有相应改变
v-show和v-if区别：
相同点：都是控制元素的显示和隐藏
不同点：原理上：v-show是通过改变display的值来控制显示和隐藏
v-if是通过元素的创建和删除来控制显示和隐藏
安全性：v-if比v-show安全
性能消耗：v-show初次显示消耗一次
v-if切换一次消耗一次
使用时候：v-show用于频繁切换时候
v-if用于不频繁切换时候
作用标签：v-if支持写在template标签上，v-show不支持
v-model与v-show小案例：点击edit me，输入框消失，文本内容清空为edit me
<!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>Document</title>
<script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h2 @click="chenge()">{{content}}</h2>
<input type="text" v-model="content" v-show="isColles">
</div>
</body>
</html>
<script>
new Vue({
el:'#app',
data:{
isColles:true,
content:'edit me'
},
methods: {
chenge(){
this.isColles = !this.isColles
this.content = 'edit me'
}
}
})
</script>
本文转载自: https://blog.csdn.net/Karley_baby/article/details/130330736
版权归原作者 Karley_baby 所有， 如有侵权，请联系我们删除。
版权归原作者 Karley_baby 所有， 如有侵权，请联系我们删除。