Vue编程语法演示

曾经终败给现在 2022-10-29 11:17 143阅读 0赞

> 项目已开源至gitee：[https://gitee.com/guo-qianliang/es6-vue-node.js][https_gitee.com_guo-qianliang_es6-vue-node.js]  
> 项目已开源至github：[https://github.com/Guoqianliang/ES6-Vue-Node.js][https_github.com_Guoqianliang_ES6-Vue-Node.js]

![Vue.js][]

### Vue基础语法演示 ###

*   *  1.单向数据绑定
     *  2.双向数据绑定
     *  3.事件绑定
     *  4.条件语句
     *  5.循环语句
     *  补充：vue生命周期

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

## 1.单向数据绑定 ##

`v-bind`单向绑定指令：用在标签属性上，通过此指令获取data定义的变量值。

*  可以将单向数据绑定理解为`引用值`。另外，单向绑定可以简写为`：`  
    ![单向绑定][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_1_color_FFFFFF_t_70]

## 2.双向数据绑定 ##

`v-model`双向数据绑定指令：当一个地方变化，其他地方都变化。

*  可以将双向数据绑定理解为`绑定地址`。另外，双向绑定可以简写为`@`  
    ![双向数据绑定][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_1_color_FFFFFF_t_70 1]

## 3.事件绑定 ##

`v-on:事件名="调用方法名"`，用来绑定事件，即调用函数，可以简写为`@事件名="调用方法名`。

![事件绑定][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_1_color_FFFFFF_t_70 2]

## 4.条件语句 ##

`v-if:`和`v-else`搭配使用，类似于Java中的if-else语句。  
![条件语句][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_1_color_FFFFFF_t_70 3]

## 5.循环语句 ##

`v-for`语句，可以用来遍历一个集合。  
![循环语句][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_1_color_FFFFFF_t_70 4]

## 补充：vue生命周期 ##

vue声明周期中的两个重要方法：

*  created方法：在页面渲染之前执行。
 *  mounted方法：在页面渲染之后执行。

![created方法和mounted方法][created_mounted]

![vue生命周期图][vue]

[https_gitee.com_guo-qianliang_es6-vue-node.js]: https://gitee.com/guo-qianliang/es6-vue-node.js
[https_github.com_Guoqianliang_ES6-Vue-Node.js]: https://github.com/Guoqianliang/ES6-Vue-Node.js
[Vue.js]: /images/20221024/bb69eaa16d71487cb03b671d53c658fe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_1_color_FFFFFF_t_70]: /images/20221024/9cc1475d8448452bb440f4e0d7ee772c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_1_color_FFFFFF_t_70 1]: /images/20221024/19ef74753cd940b2b718719961f609f0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_1_color_FFFFFF_t_70 2]: /images/20221024/dd9744615e61419ebb295aae0057d971.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_1_color_FFFFFF_t_70 3]: /images/20221024/17db168a590f4e528479de9a238c50d4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_1_color_FFFFFF_t_70 4]: /images/20221024/0a3b265de8d34174a3bcd64929e48b68.png
[created_mounted]: /images/20221024/d2a05723d96b447e9595fcd329f4a461.png
[vue]: /images/20221024/7a8b7649b2fb46c49de185f3ad6397f9.png