Vue基本语法篇（一）

一、什么是Vue

Vue是一套用于构建用户界面的渐进式框架；

它只关注视图层，采用自底向上增量开发的设计；

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

二、Vue基本语法

（注意Vue每次写完语法，都要保存网页才可以加载出来快捷键为Ctrl+s）

1、数据绑定

第一种数据绑定为一组花括号{ {}}，但是这里一组指的是两个{}，为单向数据绑定。

网页图：

第二种数据绑定为v-text，v-html

网页图：

2、属性绑定

网页图：

2.1  绑定class

​






​

网页图

2.2  多个类进行绑定

​






​

网页图：

2.3  样式绑定

​






​

网页图：

注：v-bind可以缩写为 ：  效果一样

网页图：

2.4  对象值直接进行绑定

网页图：

3、数据的循环渲染

网页图：

3.1  嵌套遍历

网页图：

4、元素的显示隐藏

网页图：

5、v-if、v-else

网页图：

6、数据双向

（表单元素标签可以使用）

网页图：

7、事件绑定

网页图：点击切换可以控制显示隐藏这里截图不太明显，就这样吧

8、事件执行的参数

网页图：

9、事件执行的修饰符

vue事件的修饰符是冒泡、捕获等等修饰符

9.1  事件的冒泡

下列事件的冒泡是本想触发button里的事件的，而div里的事件也被触发了，所以阻止事件的冒泡

网页图：

9.2  事件的捕获

让事件由外向里输出

网页图：

9.3  阻止事件的默认行为以及绑定一次事件

阻止事件的默认行为即为鼠标移动无法将文字拖出阴影

一次事件即为只有一次

网页图：图中文字选中拖不出阴影，一次事件在点击一次以后，无论再怎么点击都不会在输出。

ps：本文使用的是vscode软件编译的，关于搭建vue开发环境的具体步骤，以及vscode的各种配置和使用，后面会继续发出来，各位客官，点个关注不迷路哈 ^-^  ^-^