[JavaScript知识库] Vue 中的MVVM

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

-> JavaScript知识库 -> Vue 中的MVVM -> 正文阅读

[JavaScript知识库]Vue 中的MVVM

?View层：

1、视图层

2、在前端开发中，通常就是 DOM 层

3、主要的作用是给用户展示各种信息

Model层：

1、数据层

2、数据可能是我们固定的死数据，更多的是来自服务器，从网络上请求下来的数据

3、在计数器案例中，就是后面取出来的obj，当然，里面的数据可能没有这么简单

VueModel层：

1、试图模型层

2、视图模型层是View和 Model 沟通的桥梁

3、一方面它实现了Data Binding，也就是数据绑定，将Model 的改变实时的反应到 View中

4、另一方面它实现了DOM Listener ，也就是DOM监听，当DOM 发生一些事件（点击、滚动、touch等）时，可以监听到，并在需要的情况下改变对应Data

创建Vue 实例传入options

el：

????????类型：string | HTMLElement

????????作用：决定之后Vue 实例会管理哪一个DOM

data：

????????类型：Object | Function (组件当中data 必须是一个函数)

????????作用：Vue实例对应的数据对象

methods：

????????类型：{ [key:string] :Function}

? ? ? ? 作用：定义属于Vue的一些方法?

什么是计算属性

众所周知，在模板中可以直接通过插值语法显示一些data中的数据

但是在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示

? ? ? ? 比如：firstName 和 lastName 两个变量，我们需要显示完整的名称

? ? ? ? 但是如果多个地方都需要显示完整的名称，我们就需要写多个{{firstName}}? {{lastName }}

我们可以将上面的代码换成计算属性，计算属性是写在computed选项中

	<div id="app">
			<h2>总价格为：{{totalPrice}}</h2>
		</div>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		
		<script type="text/javascript">
			const app = new Vue({
				el:'#app',
				data:{
					books:[
					{id:110, name:'穆斯林的葬礼',price:119},
					{id:111, name:'兄弟', price:59},
					{id:112, name:'达芬奇的密码',price:98},
					{id:113, name:'查理九世',price:87},
					]
				},
				computed:{
					totalPrice:function(){
						let result = 0
						for(let i = 0;i < this.books.length;i++){
							result += this.books[i].price
						}
						return result
					}
				}
			})
			
		</script>

? ? ? ? 计算属性的setter 和 getter

每个计算属性都包含一个 getter 和 setter

? ? ? ? 上面的例子是指使用getter来读取

? ? ? ? 在某些情况下，也可以提供一个setter方法，但是不常用

	fullName:{
						set:function(newValue){
							const names = newValue.split('');
							this.firstName = names[0];
							this.lastName = names[1];
						},
						
						get: function(){
						return this.firstName + ' ' + this.lastName
					}
				},

事件监听

在前端开发中，我们需要经常和用户交互

? ? ? ? 这个时候，就必须监听用户发生的时间，比如点击、拖拽、键盘事件等等

? ? ? ? 使用 v-on 来监听事件

let 与 var?

实际上，var 的设计可以看成是JavaScript语言设计上的错误，但是这种错误多半不能修复和移除，以为需要向后兼容

let 可以看成更完美的 var

块级作用域

? ? ? ? js 中使用 var 来声明一个变量时，变量的作用域主要是和函数的定义有关

? ? ? ? 针对于其他块定义来说是没有作用域的，比如 if / for 等，这个在开发过程中会引起一些问题

ES5 中，var 是没有块级作用域的，比如if? 和 for

ES6 中，let 是有块级作用的?，比如if? 和 for

var btns = document.getElementsByTagName('button');
			for(var i = 0;i < btns.length;i++){
				(function(i){
					btns[i].onclick = function(){
						alert('点击了' + i + '个')
					}
				})
			}

for(var i = 0;i < btns.length;i++){
				(function(num){
						btns[i].addEventListener('click',function(){
					console.log('您点击了' + num + '个按钮');
				})
			})(i)
			}

?ES5之前因为 if 和 for 都没有块级作用域的概念，所以在很多时候，我们都必须借助于 function的作用域来解决应用外面变量的问题

let btns = document.getElementsByTagName('button');
				for(let i = 0;i < btns.length;i++){
					btns[i].onclick = function(){
						alert('点击了' + i + '个')
					}
			}

const的使用

const 关键字，在很多语言中已经存在，比如C/C++中，主要的作用是将某个变量修饰为常量

在JavaScript中也一样，使用const修饰的标识符为常量，不可以再次赋值

什么时候使用const？

当修饰的标识符不会被再次赋值时，就可以使用const来保证数据的安全性

建议：在开发中，优先使用const，只有需要改变某一个标识符的时候，才使用let

const的注意

（一）

const a = 20;
    a = 30;  //错误：不可以修改

（二）

const name;  //错误：const修饰的标识符必须赋值

对象增强写法

1、属性的简写
ES6之前
 
 let name = 'wh'
 let age = 3
 let obj = {
        name: name,
        age: age
    }
console.log(obj);
//ES6之后
        let obj1 = {
            name,age
    }
console.log(obj1);

2、方法的简写
ES6之前
    let obj = {
        test :function(){
        console.log('obj的test函数');
        }
    }
        obj.test()

//ES6之后
    let obj2 = {
        test(){
        console.log('obj2的test函数')
        }
    }
    obj2.test()

event事件?

<body>
		<div id="app">
			<!--1、事件调用的方法没有参数-->
			<button @click="btn1Click">按钮1</button>
			
			<!--可加小括号调用，也可不加小括号调用-->
			<button @click="btn1Click()">按钮1</button>
			
			<!--在事件定义时，写函数时省略了小括号，但是方法本身是需要一个参数的-->
			<button @click="btn2Click(123)">按钮2</button>
			
			<button @click="btn2Click()">按钮2</button>
			
			
			<!--2、在事件定义时，写方法时省略了小括号，但是方法本身是需要一个参数的，
			这个时候 Vue 会默认将浏览器生产的event 事件对象作为参数传入到方法-->
			<button @click="btn2Click">按钮2</button>
			
			<!--3、方法定义时，我们需要event对象，同时又需要其他参数-->
			<!--在调用方式，如何手动的获取到浏览器参数的event对象：$event-->
			<button @click="btn3Click('abc',$event)">按钮3</button>
			<button>按钮4</button>
			<button>按钮5</button>
			<button>按钮6</button>
			
		</div>
		
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			let app = new Vue({
				el:"#app",
				data:{
					message:'hello'
				},
				methods:{
					btn1Click(){
						console.log('btn1Click')
					},
					btn2Click(event){
						console.log('-----',event)
					},
					btn3Click(abc,event){
						console.log('+++++++++',abc,event)
					}
				}
			})

v-on 修饰符

在某些情况下，我们拿到的event的目的可能是进行一些事件处理

Vue 提供了修饰符来帮助我们方便的处理一些事件：

.stop - 调用 event.stopPropagation()

.prevet - 调用 event.preventDefault()

{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调

.native - 监听组件根元素的源生事件

.once - 只触发一次回调

        <!--停止冒泡-->
		<button @click.stop="doThis"></button>
		
		<!--阻止默认行为-->
		<button @click.prevent="diThis"></button>
		
		<!--阻止默认行为，没有表达式-->
		<form @submit.prevent></form>
		
		<!--串联修饰符-->
		<button @click.stop.prevent="doThhis"></button>
		
		<!--键修饰符，键别名-->
		<input @keyup.enter="onEnter" />
		
		<!--点击回调只会触发一次-->
		<button @click.once="doThis"></button>

v-if、v-else-if、v-else

这三个指令与 JavaScript 的条件语句if 、else 、else if类似

Vue 的条件指令可以根据表达式的值在DOM 中渲染或销毁元素或组件

<div id = "app">
    <p v-if = "score >= 90"> 优秀 </p>
    <p v-else-if = "score >= 80"> 良好 </p>
    <p v-else-if = "score >= 60"> 及格 </p>
    <p v-else = "score >= 80"> 不及格 </p>
<p></p>
</div>

	<script src="../js/vue.js" type="text/javascript"></script>
   <script>
        let app = new Vue({
            el:"#app",
            data:{
                score:98
            }            

            })



</script>

推荐写法：

<script>
const app = new Vue({
        el:'#app',
        data:{
            score:99
        },
        comouted:{
            result(){
            let showMessage = '';
            if(this.score >= 90){
            showMessage = '优秀'
        }else if (this.score >= 80){
            showMessage = '良好'
        }
        //......
        result showMessage
        }
    }
})

v-if 的原理

v-if 后面的条件为false 时，对应的元素以及其子元素不会渲染

也就是根本没有不会有对应的标签出现在DOM 中

小问题：

? ? ? ? 如果我们在输入内容的情况下，切换了类型，我们会发现文字依然显示之前的输入的内容

? ? ? ? 但是按道理讲，我们应该切换到另外一个input 元素中了

? ? ? ? 在另一个input元素中，我们并没有输入内容

问题解答：

? ? ? ? 这是因为 Vue 在进行DOM 渲染时，出于性能考虑，会尽可能的复用已经存在的元素，而不是重新创建新的元素

? ? ? ? 在上面案例中，Vue 内部会发现原来的 input 元素不再使用，直接作为else 中的 input 来使用

解决方案：

? ? ? ? 如果我们不希望Vue 出现类似重复利用的问题，可以给对应的 input 添加key?

? ? ? ? 并且需要包装key 不同

<span v-if="type==='username'">
				<label>用户账号：</label>
				<input placeholder="用户账号" key="username"/>
			</span>
			<span v-else>
				<!--label 里面 的 for 可以延长文本框，点击文字时就可以聚焦到文本框里面打字-->
				<label>邮箱地址：</label>
				<input placeholder="邮箱地址" key="email"/>
			</span>

v-for 遍历数组

当我们有一组数据需要进行渲染时，我们就可以使用v-for来完成

? ? ? ? v-for 的语法类似于JavaScript 中的 for 循环

? ? ? ? 格式：item in items 形式

简单案例：

如果在遍历的过程中不需要使用索引

v-for = "movie in movies"

依次从movies 中取出 movie，并且在元素的内容中，我们可以使用 Mustache 语法，来使用 movie

如果在遍历过程中，西药拿到元素的数组索引值

v-for = (item, index) in items

其中 index 就代表了取出的 item 在原函数组的索引值

组件key 属性

官方推荐我们在使用 v-for 时，给对应的元素或组件添加上一个? :key属性

key 的作用主要是为了高效的更新虚拟DOM

检测数组更新

push()? ：在数组最后一个添加多个元素

pop()? ?：删除数组中的最后一个元素

shift()? ：??删除数组中的第一个元素

unshift()? :在数组最前面添加多个元素

splice(n,m,'k')? ：在数组的第n个元素后面删除m个长度并添加k

sort()

reverse()? ：颠倒数组位置

表单绑定 v-model

表单控件在实际开发中是非常常见的，特别是对用户信息的提交，需要大量的表单

Vue 中使用 v-model 指令来实现表单元素和数据的双向绑定

案例分析：

当我们在输入框输入内容时

因为input中的 v-model 绑定了message，所以会实时将输入的内容传递给message，message发送改变

当message发送改变时，因为我们使用Mustache语法，将message 的值插入到DOM 中，所以DOM会发生相应的改变

所以，通过 v-model 实现双向绑定

	<body>
		<div id="app">
			<input type="text" v-model="message" />
			<h2>{{message}}</h2>
			
		</div>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			let app = new Vue({
				el:"#app",
				dara:{
					message:'你好'
				}
			})
		</script>

方法二：

<textarea v-model="message"></textarea>
			<p>输入的内容时：{{message}}</p>

原理

v-model 其实是一个语法糖，它的背后本质是是包含两个操作：

1、v-bind 绑定一个 value属性

2、v-on 指令给当前元素绑定 input

也就是说

<input type="text"  v-model="message"/>

等同于

<input type="text"  v-bind:value="message" @input="message = $event.target.value"/>

v-model：radio

当存在多个单选框时

可以同时定义相同的name属性，是单选框不能同时选定

或者可以绑定相同的 v-model 属性

<body>
		<div id="app">
			<label for="male">
				<input type="radio" value="男" v-model="gender" id="male" />男
			</label>
			<label for="female">
				<input type="radio" value="女" v-model="gender" id="female" />女
			</label>
			<p>您的选择:{{gender}}</p>
			
		</div>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			let app = new Vue({
				el:'#app',
				data:{
					gender:'',
					abc:'male',
					gender:'男'
				}
			})

v-model：checkbox

复选框分为两种情况：单个勾选和多个勾选

<input type="checkbox"  value="篮球" v-model="hobbies" />篮球
				<input type="checkbox"  value="足球" v-model="hobbies" />足球
				<input type="checkbox"  value="羽毛球" v-model="hobbies" />羽毛球
				<input type="checkbox"  value="乒乓球" v-model="hobbies" />乒乓球
				<input type="checkbox"  value="铅球" v-model="hobbies" />铅球

let app = new Vue({
				el:'#app',
				data:{
					isAgree:false,//单选框
					hobbies:[]//多选框
				}
			})

v-model:select

和 checkbox 一样，select 也分为单选和多选两种情况

单选：只能选中一个值

? ? ? ? v-model绑定的是一个值

? ? ? ? 当我们选中option 中的一个时，会将它对应的 value 赋值到 mySelect 中

		<select name="" v-model="mySelect">
				<option value="apple">苹果</option>
				<option value="orange">橘子</option>
				<option value="banana">香蕉</option>
				<option value="potato">土豆</option>
			</select>
			<h2>你最喜欢的水果：{{mySelect}}</h2>

多选：可以选中多个值

? ? ? ? v-model 绑定的是一个数组

? ? ? ? 当选中多个值时，就会将选中的 option 对应的 value 添加到数组 mySelect 中

要摁住Ctrl 键

<select name="" v-model="mySelects" multiple>
				<option value="apple">苹果</option>
				<option value="orange">橘子</option>
				<option value="banana">香蕉</option>
				<option value="tomato">西红柿</option>
			</select>
			<h2>你最喜欢的水果：{{mySelects}}</h2>

v-model的修饰符

lazy 修饰符：

? ? ? ? 默认情况下，v-model默认是在input事件中同步输入框的数据的

? ? ? ? 也就是说，一旦有数据发生改变对应的data中的数据就会自动发生改变

? ? ? ? lazy修饰符可以让数据在失去焦点或者回车是才会更新

<input type="text" v-model.lazy="message" />

number 修饰符：

? ? ? ? 默认情况下，在输入框中无论我们输入的是字母还是数字，都会被当做字符串类型进行处理

? ? ? ? 但是如果我们希望处理的是数字类型，那么最好直接将内容当做数字处理

? ? ? ? number 修饰符可以让在输入框中输入的内容自动转成数字类型

<input type="number" v-model.number="age" value="" />

trim 修饰符：

? ? ? ? 如果输入的内容收尾有很多空格，通常我们希望将其去除

? ? ? ? trim修饰符可以过滤内容左右两边的空格

<input type="text" v-model.trim="name" />

JavaScript知识库最新文章

ES6的相关知识点

react 函数式组件 & react其他一些总结

Vue基础超详细

前端JS也可以连点成线（Vue中运用 AntVG6）

Vue事件处理的基本使用

Vue后台项目的记录（一）

前后端分离vue跨域，devServer配置proxy代理

TypeScript

初识vuex

vue项目安装包指令收集

加:2022-04-01 23:16:14 更:2022-04-01 23:17:38

360图书馆购物三丰科技阅读网日历万年历 2024年11日历

-2024/11/24 5:29:03-

图片自动播放器
↓图片自动播放器↓

TxT小说阅读器
↓语音阅读,小说下载,古典文学↓

一键清除垃圾
↓轻轻一点,清除系统垃圾↓

图片批量下载器
↓批量下载图片,美女图库↓

网站联系: qq:121756557 email:121756557@qq.com IT数码