Vue新手入门指南（易懂）

爱被打了一巴掌 2023-10-01 20:53 29阅读 0赞

## Vue快速入门 ##

*  前言
    
    对于一名初入编程的新手来说，**JavaScript**的语法偏向复杂，选择**Vue**库可以说是一个较为不错的体验。在很多方面，**Vue**简化了**JavaScrip**语法，并且实现数据与视图的双向绑定，达到响应式页面的目的。
    
    > 博主是一位大二的编程小白，以下的内容都是自己对Vue的理解，写本篇博客的目的是为了巩固自己对Vue的基础知识，大家可以作为一种笔记来观看，如果能够给学校Vue的朋友带来帮助，不胜荣幸，对于存在许多表达不恰当以及逻辑错误的地方，还望大家斧正。  
    > 参考资料:《Vue.js从入门到实践》

**1. Vue实例和模板语法**

<body>
    	<div id="app"> 
    		<p>{
      
       {message}}</p> 
    	</div>
    <script>
    	new Vue({
    		el:'#app',	
    		data:{
    			message:'hello,word!'
    		},
    		methods:{
    		},
    	})
    </script>
    </body>

*  **el**

**Vue**语法与**JavaScript**一样写在**script**中，通过**id**选择器绑定**DOM**，在**Vue**中，只需要在**el**中对**DOM**的**id**进行挂载，可以简单的理解为钩子，**el**通过id="app"的特征钩住了

中的所有内容，这样我们就可以在Vue中实现对 **DOM**中的操作。

*  **data**

**Vue**中的**data**用于声明我们所要使用的数据，这样操作有利于我们在维护或者操作文档的时候能够更容易的清晰某一板块所需要修改的数据，并且不需要直接对**DOM**进行操作，此时的数据与DOM是双向绑定的，当我们对**data**中所声明的数据进行修改时，**DOM**中同时也会发生响应式的变化。

*  **methods**

**Methods**中包含的是我们对这个页面的整个逻辑以及页面中的触发事件，其中的内容相当于**JavaScript**中的**function**内容

**2. 内置指令**  
在Vue中有许多内置指令，通过这些指令替换**JavaScript**中对文档的以及事件的操