Vue入门笔记

痛定思痛。 2023-10-04 19:39 44阅读 0赞

#### Vue入门笔记目录 ####

*  Vue概述
 *  Vue快速入门
 *  Vue常用指令
 *  vue生命周期

--------------------

## Vue概述 ##

*  Vue是一套前端框架，免除原生JavaScript中的DOM操作，简化书写
 *  基于MVVM(**M**odel-**V**iew-**V**iew**M**odel)思想，实现数据的双向绑定，将编程的关注点放在数据上

![在这里插入图片描述][3487d9c89a284688a61e8be530dfc589.png]  
![在这里插入图片描述][5e612f0687d1402c8d17b1205dc6dba2.png]

--------------------

## Vue快速入门 ##

1.  新建HTML页面，引入 Vue.js文件

1.  在JS代码区域，创建Vue核心对象，进行数据绑定

new Vue({
        
    	el: "#app",
    	data() {
        
    		return {
        
    			username:""
    		}
    	}
    });

1.  编写视图

<div id="app">
    	<input name="username" v-model="username">	
    	{
        {
        username}}
    </div>

--------------------

## Vue常用指令 ##

*  指令:HTML标签上带有v-前缀的特殊属性，不同指令具有不同含义。例如: v-if，v-for…
 *  常用指令  
    ![在这里插入图片描述][4bf26aedd5a04c3da822b198660c8eff.png]

--------------------

![在这里插入图片描述][e2dbd02285b44c02917fa2369e4e0505.png]

*  v-bind:

<a:href="url">CSDN</a>

*  v-model:

--------------------

![在这里插入图片描述][5e0102d5210845f5951df7bcd83f6bd4.png]

*  html:

*  vue:

new Vue({
        
    	el:"#app",
    	methods: {
        
    		show(){
        
    			alert(“我被点了");
    		}
    	}
    });

--------------------

![在这里插入图片描述][6ede3514eb044937a9921456b9d6c514.png]

*  v-if:

*  v-show:

--------------------

![在这里插入图片描述][d5534b88d2684154801a656ca931a4ce.png]

*  v-for:

*  加索引

--------------------

## vue生命周期 ##

*  生命周期的八个阶段:每触发一个生命周期事件，会自动执行一个生命周期方法(钩子)  
    ![在这里插入图片描述][d2f9110b2ad94bebb5a3b73c0e916541.png]
 *  mounted:挂载完成，Vue初始化成功，HTML页面渲染成功。发送异步请求，加载数据

--------------------

[3487d9c89a284688a61e8be530dfc589.png]: https://img-blog.csdnimg.cn/3487d9c89a284688a61e8be530dfc589.png
[5e612f0687d1402c8d17b1205dc6dba2.png]: https://img-blog.csdnimg.cn/5e612f0687d1402c8d17b1205dc6dba2.png
[4bf26aedd5a04c3da822b198660c8eff.png]: https://img-blog.csdnimg.cn/4bf26aedd5a04c3da822b198660c8eff.png
[e2dbd02285b44c02917fa2369e4e0505.png]: https://img-blog.csdnimg.cn/e2dbd02285b44c02917fa2369e4e0505.png
[5e0102d5210845f5951df7bcd83f6bd4.png]: https://img-blog.csdnimg.cn/5e0102d5210845f5951df7bcd83f6bd4.png
[6ede3514eb044937a9921456b9d6c514.png]: https://img-blog.csdnimg.cn/6ede3514eb044937a9921456b9d6c514.png
[d5534b88d2684154801a656ca931a4ce.png]: https://img-blog.csdnimg.cn/d5534b88d2684154801a656ca931a4ce.png
[d2f9110b2ad94bebb5a3b73c0e916541.png]: https://img-blog.csdnimg.cn/d2f9110b2ad94bebb5a3b73c0e916541.png