Vue.js核心概念-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_48839439/article/details/126997576

Vue为一套用于构建用户界面的渐进式框架。Vue的核心库只关注视图层，容易上手且便于第三方库或既有项目的整合。

一、MVVM

MVVM为 Model数据模型、View视图、VM ViewModel 的缩写。

View为视图层

Model为数据模型层

VM：ViewModel为View与Model之间的一个中间纽带的一个角色。帮忙把数据模型中的数据渲染到视图层。(如Vue则担当这一角色)

当数据模型发生变化时，VM通知视图进行修改；当视图发生变化时，VM则通知数据模型进行修改。

二、生命周期(钩子函数)

生命周期的第一步首先是创建vue实例，并初始化。

1. 在vue实例初始化阶段

(一)、在初始化调用了beforeCreate，完成了vue实例的生命周期相关属性的初始化以及事件初始化。(此时还不能访问数据模型中的data和methods中的方法)

(二)、在初始化完毕后，来到created部分，完成vue的数据注入以及数据监听操作，该构造的执行意味着vue实例创建完成，可以进行data数据模型和methods方法的访问。

2.vue实例挂载阶段

(一)、在created后，来到beforeMount阶段，vue会判断实例中是否含有el属性。如没有 vm.$mount(el)，会继续判断是否含有template属性，如有则将其解析为一个 render function，如没有则将el指定的外部html进行解析。(这里只完成了模板的解析但数据并没有绑定模板之中)

(二)、mounted阶段，创建vm.$el替换el，实际上完成的是数据绑定操作，执行了render函数，将模板进行了解析，将数据进行了动态绑定。

3.vue实例更新阶段

更新虚拟dom节点

完成了页面的重新渲染

4.vue实例销毁阶段

销毁之前调用，此时可以访问vue实例

完成监听器、子组件、事件监听等移除，销毁vue实例对象。

三、模板语法

在底层的实现上，Vue将模板编译成虚拟DOM渲染函数。

结合响应系统，vue能够智能地计算出最少需要重新渲染多少组件，并将DOM操作次数减到最少。

1.插值语法

格式：{{变量}}

2.v-html

解析代码片段，将字符串中表达式解析出来

3.v-bind

绑定变量

格式：:变量(如，:a="123")

4.v-on/@

绑定事件

格式：如，v-on:click=" "、@click=" "

5.{{js表达式}}

如：{{[1,2].reverse()}}

6.v-once

执行一次性插值

四、数据渲染

1.文本渲染

    <div id="app">
        <div>{{animal}}</div>
        
    </div>

<script>

let vm=new Vue({
            el:'#app',
            data:{
                msg:'Hello!',
            },
            
        });

</script>

2.HTML代码渲染(当要渲染html代码的数据时，使用{{}}就会将html代码一起输出，此时就可以使用v-html来将数据渲染)

<div id="app">
        <div v-html='url'></div>
    </div>
    <script>
	 new Vue({
            el:'#app',
            data(){
                return {
                    url:'<a href="https://www.baidu.com">百度一下</a>'
                }
            }
        })
    </script>

3.属性渲染({{}}的语法也不能作用在元素属性上，此时就可以使用v-bind指令)

 <div id="app">
        <!-- <div v-bind:title='title'>{{msg}}</div> -->
         <!-- v-bind的简写为:属性名="变量名" -->
        <div :title='title'>{{msg}}</div>
    </div>
    <script>
        new Vue({
            el:"#app",
            data(){
                return {
                    msg:'xxxxxxxx',
                    title:'我是title属性所显示的内容'
                }
            }
        })
    </script>

4.事件渲染(v-on指令绑定事件)

<div id="app">
        <button v-on:click='a'>请点击一下！</button>
            <!-- v-on的简写可为：@事件类型=" " -->
        <button @click='a'>请点击一下！</button>
    </div>
<script>
    new Vue({
            el:'#app',
            data:{
            },
            methods:{
                a(){
                   console.log("哈哈哈")
                }
            }
        })
</script>

5.列表渲染

使用 for in 或 v-for=''(item,index) in 要渲染的数组" :key=" "以及v-for=" (value,key,index)" in 要渲染的对象 :key=" "。

如,使用v-for渲染数组：

<div id="app">
        <ul>
            <li v-for='(item,index) in abc'>
                {{item}}
            </li>
        </ul>
</div>
<script>
    new Vue({
        el:'#app',
        data(){
            return{
                abc:[1,2,3],
                    
                }                

            }
})
</script>

6.条件渲染

v-if、v-show

当表达式为true时，即渲染v-if属性的元素，否则使用v-else渲染；

而v-show则是切换css样式里的display属性，当需要频繁切换css样式时，便可使用v-show。

     <div id="app">
        <div v-if="a===1">
			<form >
				<input type="text" placeholder="姓名">
			</form>
		</div>
		<div v-else-if="a===2">
			<form >
				<input type="text" placeholder="性别">
			</form>
		</div>
		<div v-else>错误</div>


      <div v-show="Show">我是v-show条件判断渲染数据</div>

    </div>

<script>
    new Vue({
          data:{
              a: 1,
              Show:true,
            }
        })
</script>

v-if和v-show的区别？

v-if 是惰性的dom开销只有满足条件的情况下才会加载dom节点，不满足条件会直接不渲染；

而v-show满足条件就会显示元三年，不满足条件则隐藏元素，其会加载dom元素，不满足条件时会调用display属性并设值为none。

一般需要较少dom开销时，使用v-if；当需频繁切换css样式时，则使用v-show。一般v-if不和v-for同时使用。