Vue基础
介绍
Vue 是一款用于构建用户界面的前端框架。其基于标准 HTML、CSS 与 JavaScript 构建，提供了一套声明式的、组件化的编程模型，有效地提升了开发用户界面的效率。
其特色有：
- 声明式渲染：基于标准 HTML 拓展了一套模板语法，可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。
- 响应性：会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM。
模板语法
插值语法
在Vue中允许在HTML标签内使用胡子语法Mustache，即使用{{ }}将 js右值表达式 包裹。
js右值表达式 将会以纯文本形式插入，不会解析其中的HTML标签。
1 | <span> Message: {{ msg }} </span> |
指令语法
Vue 中的指令都是以 v- 开头，在HTML标签头中使用。
用于在表达式的值变化时响应式地更新 DOM。<标签 v-指令名:参数="js右值表达式"></标签>
其中有的指令可以省略 参数、表达式。
其内置指令有：
v-text：更新元素的文本内容。相当于通过设置元素的 textContent 属性
<span v-text="msg"></span>v-html：更新元素的 innerHTML。
<div v-html="html"></div>v-show：判断元素是否可见。
<h1 v-show="ok">Hello!</h1>v-if：判断元素是否渲染。
<h1 v-if="ok">Hello!</h1>v-else：v-if 或 v-if / v-else-if 链式调用的
else 块。v-else-if：v-if 链式调用的
else if 块。v-for：根据数据多次渲染元素或模板块。
1
<div v-for="item in items" :key="item.id">{{ item.text }}</div>
v-on：绑定事件监听器。
可以使用@来代替v-on:
其参数后可以添加一些修饰符，如下：.stop：停止传播，相当于调用 event.stopPropagation()。.prevent：取消默认行为，相当于调用 event.preventDefault()。.capture：在捕获模式添加事件监听器。.self：只有事件从元素本身发出才触发处理函数。.{keyAlias}：只在某些按键下触发处理函数。.once：最多触发一次处理函数。.left：只在鼠标左键事件触发处理函数。.right：只在鼠标右键事件触发处理函数。.middle：只在鼠标中键事件触发处理函数。.passive：通过 { passive: true } 附加一个 DOM 事件。
