Vue学习笔记（一）：十分钟带你入门Vue

╰半橙微兮° 2023-02-21 06:06 51阅读 0赞

**前言**：什么是Vue呢？百度百科给出的解释是这样的：

Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时，Vue.js 也能完美地驱动复杂的单页应用。

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

### 文章目录 ###

*   *  一。Vue的下载以及简单使用
     *   *  1.vue的下载
         *  2.第一个vue实例
         *  3.简单说明
     *  二。Vue常用标签：
     *   *  1.v-text
         *  2.v-html
         *  3.v-on
         *  4.v-show
         *  5.v-if
         *  6.v-bind
         *  7.v-for
         *  8.v-model

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

## 一。Vue的下载以及简单使用 ##

### 1.vue的下载 ###

进入[vue官方网站][vue]，选择开发版本，点击下载：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwOTQ0Nw_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][20200628201353582.png]

### 2.第一个vue实例 ###

1.  导入开发版本的Vue.js。
2.  创建Vue实例对象，设置el属性和data属性。
3.  使用简洁的模板语法把数据渲染到页面上。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwOTQ0Nw_size_16_color_FFFFFF_t_70 1]

### 3.简单说明 ###

el挂载点：

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

data数据对象：

1.  Vue中用到的数据定义在data中。
2.  data中可以写复杂类型的数据。
3.  渲染复杂类型数据时,遵守js的语法即可。

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

## 二。Vue常用标签： ##

### 1.v-text ###

v-text：设置标签的文本值(textContent)。

示例代码如下：

<div id="app">
       <h2 v-text="news+'!'"></h2>
       <h2>{ { news+"!"}}</h2>
    </div>
    		
    <script type="text/javascript">
        /*vue定义*/
        var vue = new Vue({ 
            el: '#app',
            data: { 
    			news:"你好"
            }
    	})
    </script>

效果图如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwOTQ0Nw_size_16_color_FFFFFF_t_70 2]  
总结：

1.  v-text指令的作用是:设置标签的内容(textContent)。
2.  默认写法会替换全部内容,使用差值表达式\{ \{\}\}可以替换指定内容。
3.  内部支持写表达式。

### 2.v-html ###

v-html：设置标签的innerHTML

示例代码如下：

<div id="app">
       <p v-html="news"></p>
    </div>
    		
    <script type="text/javascript">
        /*vue定义*/
        var vue = new Vue({ 
            el: '#app',
            data: { 
    			//news:"你好"
    			news:"<h1>你好</h1>"
            }
    	})
    </script>

效果图如下：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwOTQ0Nw_size_16_color_FFFFFF_t_70 3]  
总结：

1.  v-html指令的作用是:设置元素的innerHTML
2.  内容中有html结构会被解析为标签
3.  v-text指令无论内容是什么,只会解析为文本
4.  解析文本使用v-text,需要解析html结构使用v-html

### 3.v-on ###

v-on：为元素绑定事件

示例代码如下：

<div id="app">
       <input type="button" value="事件绑定" v-on:click="go()">
    		
       <input type="button" value="事件绑定1" @:click="go()">
    <script type="text/javascript">
        /*vue定义*/
        var vue = new Vue({ 
            el: '#app',
            data: { 
    			news:"你好！"
            },
    		methods:{ 
    			go(){ 
    				alert(this.news);
    			}
    		}
    	})
    </script>

效果图如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwOTQ0Nw_size_16_color_FFFFFF_t_70 4]  
总结：

1.  v-on指令的作用是:为元素绑定事件
2.  指令可以简写为@
3.  绑定的方法定义在methods属性中
4.  方法内部通过this关键字可以访问定义在data中数据

### 4.v-show ###

v-show：根据表达值的真假,切换元素的显示和隐藏

示例代码如下：

<div id="app">
       <a v-show="show">你看得见我</a>
       <a v-show="hide">你看不见我</a>
       <a v-show="sex=woman">你看不见我</a>
    </div>
    		
    <script type="text/javascript">
        /*vue定义*/
        var vue = new Vue({ 
            el: '#app',
            data: { 
    			show:true,
    			hide:false,
    			sex:"man"
            }
    	})
    </script>

效果图如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwOTQ0Nw_size_16_color_FFFFFF_t_70 5]  
总结：

1.  v-show指令的作用是:根据真假切换元素的显示状态
2.  原理是修改元素的display,实现显示隐藏
3.  指令后面的内容,最终都会解析为布尔值
4.  值为true元素显示,值为false元素隐藏
5.  数据改变之后,对应元素的显示状态会同步更新

### 5.v-if ###

v-if：根据表达值的真假,切换元素的显示和隐藏(操纵dom元素)

示例代码如下：

<div id="app">
       <a v-if="show">你看得见我</a>
       <a v-if="hide">你看不见我</a>
       <a v-if="sex=woman">你看不见我</a>
    </div>
    		
    <script type="text/javascript">
        /*vue定义*/
        var vue = new Vue({ 
            el: '#app',
            data: { 
    			show:true,
    			hide:false,
    			sex:"man"
            }
    	})
    </script>

效果图如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwOTQ0Nw_size_16_color_FFFFFF_t_70 6]  
总结：

1.  v-if指令的作用是:根据表达式的真假切换元素的显示状态。
2.  本质是通过操纵dom元素来切换显示状态。
3.  表达式的值为true,元素存在于dom树中,为false,从dom树中移除。
4.  频繁的切换v-show,反之使用v-if,前者的切换消耗小。

### 6.v-bind ###

v-bind：设置元素的属性(比如:src,title,class)

示例代码如下：

<div id="app">
    	<img v-bind:src="imageUrl" v-bind:title="imageTitle"/>
    	
    	<img :src="imageUrl" :title="imageTitle"/>
    </div>
    		
    <script type="text/javascript">
        /*vue定义*/
        var vue = new Vue({ 
    		el:"#app",
    		data:{ 
    			imageUrl:"image/messi.jpg",
    			imageTitle:"梅西"
    		}
    	})
    </script>

效果图如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwOTQ0Nw_size_16_color_FFFFFF_t_70 7]

总结：

1.  v-bind指令的作用是:为元素绑定属性。
2.  完整写法是 v-bind:属性名。
3.  简写的话可以直接省略v-bind,只保留 :属性名。
4.  需要动态的增删class建议使用对象的方式。

### 7.v-for ###

v-for：根据数据生成列表结构

示例代码如下：

<div id="app">
    	<ul>
    	    <li v-for="(item,index) in num" :title="item">
    	      { { index}}:{ { item}}
    	    </li>
    	
    	    <li v-for="(student,index) in student">
    	      { { student.name}}
    	    </li>
    	</ul>
    </div>
    		
    <script type="text/javascript">
        /*vue定义*/
        var vue = new Vue({ 
    		el:"#app",
    		data:{ 
    			num:[1,2,3,4,5],
    			student:[
    				{ name:"张三"},
    				{ name:"李四"}
    			]
    		}
    	})
    </script>

效果图如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwOTQ0Nw_size_16_color_FFFFFF_t_70 8]  
总结：

1.  v-for指令的作用是:根据数据生成列表结构。
2.  数组经常和v-for结合使用。
3.  语法是( item,index ) in 数据。
4.  item 和 index 可以结合其他指令一起使用。
5.  数组长度的更新会同步到页面上,是响应式的。

### 8.v-model ###

v-model：获取和设置表单元素的值(双向数据绑定)

示例代码如下：

<div id="app">
    	<input type="text" v-model="news" />
    </div>
    		
    <script type="text/javascript">
        /*vue定义*/
        var vue = new Vue({ 
    		el:"#app",
    		data:{ 
    			news:"你好！"
    		}
    	})
    </script>

效果图如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwOTQ0Nw_size_16_color_FFFFFF_t_70 9]  
总结：

1.  v-model指令的作用是便捷的设置和获取表单元素的值。
2.  绑定的数据会和表单元素值相关联。
3.  绑定的数据←→表单元素的值。  
    （注意：v-model是与表单元素相结合对应，换成其他元素会失效）

[vue]: https://cn.vuejs.org/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwOTQ0Nw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200628201258596.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwOTQ0Nw==,size_16,color_FFFFFF,t_70
[20200628201353582.png]: https://img-blog.csdnimg.cn/20200628201353582.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwOTQ0Nw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200628201756891.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwOTQ0Nw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwOTQ0Nw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200628202543546.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwOTQ0Nw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwOTQ0Nw_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200628202933599.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwOTQ0Nw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwOTQ0Nw_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200628203718893.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwOTQ0Nw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwOTQ0Nw_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200628204400853.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwOTQ0Nw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwOTQ0Nw_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200628205345969.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwOTQ0Nw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwOTQ0Nw_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/2020062821153141.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwOTQ0Nw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwOTQ0Nw_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20200628214006426.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwOTQ0Nw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwOTQ0Nw_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20200628215043533.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwOTQ0Nw==,size_16,color_FFFFFF,t_70