Vue学习之路(Day 1)

最新推荐文章于 2024-08-28 20:00:56 发布

这名没人用吧

最新推荐文章于 2024-08-28 20:00:56 发布

阅读量510

点赞数

文章标签： vue js javascript

本文链接：https://blog.csdn.net/weixin_43866830/article/details/117790095

版权

Vue相关背景

Vue框架采用的是MVVM模式，MVVM是在MVC模式的基础上发展而来的。

MVC

MVC：Model（模型层），View（视图层），Control（控制层）。模型层是用于存放数据的层，视图层就是用户所能见到的页面，控制层就是用来写一些事件的交互。简单理解就是用户通过视图层调用控制层来改变数据层里面的内容。

MVVM

MVVM：Model（数据层）、View（视图层）、View Model（业务逻辑层）。Model层和视图层与MVC一样，VM层起到的是绑定的作用，视图层发生了变化，数据层也会相应地变化，Vue起到的就是这样的一个作用。

学习框架的原因

学习框架最大的原因就是可以提高开发的效率，从最初的的原生JS，到后来的Jquery之类的类库，再到后来的前端模板引擎，直到现在的Angular.js或Vue.js，开发的效率越来越高，Vue可以在很大的程度上减少不必要的DOM操作，可以提高浏览器的渲染效率，同时也可以使程序员有更多的时间去关注数据的业务逻辑，而不是关心DOM的渲染过程。

框架和库的区别

上文有提到Jquery等类库，诸如此类的库（也可以叫插件）只是提供一个小功能，并且对项目的影响较小，很容易用其他的库来代替功能的实现，但是框架不同，虽然它对于项目的影响较大，如果要更换框架，基本上整个项目就要重新架构，但是框架相对于库功能完善，并且拥有完整的解决方案。

第一个Vue程序

博主学习的是Vue2.6的版本，后续博客也都是。

引入文件

首先我们要进入到Vue官方文档，获得引入Vue框架的方法，并导入到自己的代码中（也可以通过获取代码的方式引入到文件夹中，这样子会方便后续的使用）：

<head>
	<meta charset="utf-8">
	<title></title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

引入到文件夹（输入链接复制代码即可）：
在这里插入图片描述

基本结构

<body>
    <div id="app">
        {{ message }}
        <div>{{ list[0] }}</div>
        <div>{{ obj.name }}</div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue ({
            el:"#app",//必须创建，挂载点，选择器可以是多样的，建议id
            data:{ // 数据对象
                message:"test1",
                list:[1,2,3,3],
                obj:{
                    name:'zhangsan',
                    age:18
                }
            }
        })
    </script>
</body>

挂载点el

el是用来设置Vue实例挂载（管理）的元素。
Vue会管理el选项命中的元素及其内容的后代元素。
可以使用其他的选择器，但是建议使用ID选择器。
可以使用其他的双标签，不能使用HTML和BODY。

数据对象data

Vue中用到的数据定义在data中。
data中可以写复杂类型的数据。
渲染复杂类型数据时，遵守js的语法即可。
这里就可以体现Vue的双向绑定，如果这里将obj.name进行修改，那么页面中输出的内容也会进行相应的变化。这里的data数据对象就相当于是MVVM中的Model。

Vue生命周期

beforeCreate

在实例初始化之后，数据观测（data observer）和event/watcher事件配置之前被调用。

created

在实例创建完成之后被立即调用，在这一步，实例已完成以下的配置：数据观测（data observer），属性和方法的运算，watch/event事件回调，然而，挂载阶段还没开始，$el属性目前不可见。

beforeMount

在挂载开始之前被调用；相关的渲染函数首次被调用。

mounted

el被新创建的vm.$el替换，挂载成功。

beforeUpdate

数据更新时调用。

updated

组件DOM已经更新，组件更新完毕。

常见的指令

v-text

设置标签文本值，但是这里设置的文本值会把原有的内容替换掉，使用差值表达式{{}}则可以替换指定内容。

<body>
    <div id="app">
        {{ message }}
        <div v-text="message+'!'">{{ list[0]}}</div>
        <div>{{ obj.name + message + '!' }}</div>
    </div>
    <script>
        var app = new Vue ({
            el:"#app",//必须创建，挂载点，选择器可以是多样的，建议id
            data:{ // 数据对象
                message:"test1",
                list:[1,2,3,3],
                obj:{
                    name:'zhangsan',
                    age:18
                }
            }
        })
    </script>
</body>

在这里插入图片描述

v-html

设置标签的innerHTML，与v-text的区别就是如果v-html中含有html语句，会被解析出来。

	<div id="demo" v-html="html1">
		{{html1}}
	</div>
	<script type="text/javascript">
		var app = new Vue({
			el: '#demo',
			data:{
				name: '张三',
				message: 'hello world',
				html1: '<span id="span">这是添加的span标签</span>'
			}
		})
	</script>

v-on

为元素绑定事件，@相当于v-on:，进行相应操作后就会触发事件。

<body>
    <div id="app">
        <button class="click" v-on:click="click">单击</button>
         <button class="dbclick" v-on:dblclick="dblclick">双击</button>
        <button class="mouseenter" @mouseenter="mouseenter">鼠标移入</button>
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data:{

            },
            methods:{
                click:function(){
                    console.log('you click here');
                },
                dblclick:function(){
                    console.log('you double click here');
                },
                mouseenter:function(){
                    console.log('your mouse entered here');
                }
            }
        })
    </script>
</body>

v-bind

可以简写成":class"，绑定属性，class表示绑定的属性为class。
css代码：

<style>
    .show{
        border: 1px dotted red;
    }
</style>

<body>
    <div id="app">
        <img v-bind:src="imgSrc" alt="">
        <img :src="imgSrc" alt="" :title="imgTitle+'111'">
        <img :src="imgSrc" :class="{show:isShow}">
        <!-- 绑定class为show，根据isShow来判断是否进行绑定 -->
        <button @click="changeIsShow">切换</button>
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                imgSrc:"../img/4399在线玩.png",
                imgTitle:"4399在线玩",
                isShow:false
            },
            methods:{
                changeIsShow:function(){
                    this.isShow = !this.isShow;
                }
            }
        })
    </script>
</body>

v-if

条件渲染，根据true和false来决定是否显示。

	<div id="demo" v-html="html1" v-bind:class="color" v-if="seen">
		{{html1}}
	</div>
	<script type="text/javascript">
		var app = new Vue({
			el: '#demo',
			data:{
				name: '张三',
				message: 'hello world',
				html1: '<span id="span">这是添加的span标签</span>',
				color: 'red',
				seen: false
			}
		})
	</script>

		<div id="demo">
			<div v-if="character === 'A'">A</div>
			<div v-else-if="character === 'B'">B</div>
			<div v-else-if="character === 'C'">C</div>
			<div v-else>NOTABC</div>
		</div>
		<script type="text/javascript">
			var v = new Vue({
				el: '#demo',
				data:{
					character: "A",
				}
			})
		</script>

这里需要注意的是，v-if和v-else中间不可以有其他的语句，不然会报错！

v-show

v-show和v-if虽然实现上的功能一样，都是根据条件来显示结果，但是v-show在原理上是将元素的display属性设置为none，而v-if是直接将元素删除。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

		<div id="demo">
			<div v-if="character === 'A'">A</div>
			<div v-else-if="character === 'B'">B</div>
			<div v-else-if="character === 'C'">C</div>
			<div v-else>NOTABC</div>
			<div v-show="isOk">OK</div>
		</div>
		<script type="text/javascript">
			var v = new Vue({
				el: '#demo',
				data:{
					character: "A",
					isOk: false
				}
			})
		</script>

在这里插入图片描述

v-for

当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。这个类似 Vue 1.x 的 track-by="$index"。

这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key attribute

	<div id="demo">
		<div v-for="item, index in items" :key="index">
			{{ index }} : {{ item.information }}
		</div>
		<div v-for="obj, key in objects" :key="key">
			{{ key }} : {{ obj }}
		</div>
	</div>
	
	<script type="text/javascript">
		var v = new Vue({
			el: '#demo',
			data: {
				items:[
					{ information: 'i1'},
					{ information: 'i2'},
					{ information: 'i3'}
				],
				objects:{
					name: '张三',
					age: 12,
					sex: '男'
				}
			}
		})
	</script>