VUE简明教程

一：VUE基础

1: 项目搭建

VUE create 项目名称

1.1 创建步骤

1.2 使用空格键选择相应选项


上面两个选项随便选一个。

2： 运行项目

安装完后 进入项目的根目录，运行npm run serve即可启动项目

访问地址 localhost:8080

2:基本指令

2.1 声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统 。

Mustache {{}}

vue在渲染界面时，页面先以{{xxXXX}}的形式加载到页面，然后再用数据替换{{}}.

Mastach表达式调用三种数据格式类型：

2.1.1 调用单值数据

2.1.2 调用数组数据

2.1.3 调用对象数据

2.2 指令

指令 (Directives) 是带有 v- 前缀的特殊 attribute , 指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM 。

v-if v-show

v-if 指令将根据表达式 的值真假来插入/移除 元素

Tips

v-if和v-show区别

V-if: 对dom节点进行删除和增加

V-show: 通过css控制节点的隐藏和显示

如果隐藏/显示位置切换不是特别频繁的话，建议还是使用v-if，反之如果切换频繁则使用v-show

v-bind

能够接收一个“参数”，在指令名称之后以冒号表示。v-bind 指令可以用于响应式地更新

在这里 href 是参数，告知 v-bind 指令将该元素的 href attribute 与表达式 url 的值绑定

动态参数绑定，[attributeName]可根据需要动态设置

 ... 

如下列代码：

缩写

v-bind 可一律缩写为 " : " ,

如：

 clike me

v-on

v-on 指令，它用于监听 DOM 事件

缩写

v-on 可一律缩写为“ @ ”

如上例

 clike me

v-for

v-for用于对一个数组来渲染一个列表 ，因此被称为"列表渲染" , 需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名

遍历数组：

遍历集合

遍历对象的属性和值

建议：

v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。 所以，我们应尽可能在使用 v-for 时提供 key attribute ， 以便它能跟踪每个节点的身份，从而重用和重新排序现有元素

不要使用对象或数组之类的非基本类型值作为 v-for 的 key。请用字符串或数值类型的值。

v-model

在表单 、 及 `` 元素上创建双向数据绑定 ， 它会根据控件类型自动选取正确的方法来更新元素 ， v-model 本质上是语法糖 ， 它负责监听用户的输入事件来更新数据，并在某种极端场景下进行一些特殊处理。

2.3 事件修饰符

在此我们只列举常用的4中事件修饰符：分别是 stop阻止冒泡；prevent 阻止标签默认行为；self 只监听自身标签的事件；once 只执行一次

1：stop阻止冒泡

B-DIV是A-DIV的子组件，当对B执行事件时，事件会向上冒泡，导致ADIV区域相关事件元素同样被你执行

未完 待续…