vue基础

vue基础

一.vue及渐进式框架
1.什么是vue
Vue.js（通常简称为Vue）是一个用于构建用户界面的渐进式JavaScript框架。Vue的设计目的是使得Web开发变得简单和愉快。它具有简洁的API，并且可以 incrementally adopt（逐步采用），这意味着你可以将Vue部分地应用于项目中，而不是全面改造。
2.渐进式框架
渐进式框架是一种新型的Web开发技术，其核心思想是将Web应用程序分解成一系列可重用的模块。这些模块可以被多个应用程序共享，从而提高开发效率。
渐进式框架允许开发者逐步引入和应用框架的不同特性和功能，而不是一次性下载全部内容。它可以将整体框架划分为多个可选的模块或特性，每个模块可以根据需求进行选择性引入。渐进式框架的另一个优势是能够提供一种灵活的开发方式。根据项目的需求，可以自由组合模块，从而更快更容易地实现功能。
二.vue常用指令
1.内容渲染指令（v-html、v-text）

• v-html
  v-html 指令用于将指定的数据解析为 HTML内容并渲染到 DOM 中。
• v-text
  v-text 指令用于将数据渲染为普通文本内容，并替换掉元素内的现有文本。
  2.条件渲染指令（v-show、v-if）
• v-if
  v-if 指令用于根据表达式的值来条件性地渲染元素。如果表达式为 true，则元素会被渲染到 DOM 中；如果为false，则元素及其子元素会被移除。
• v-show
  v-show 指令也是用于根据表达式的值来控制元素的显示和隐藏，但如果表达式为 false，元素不会被移除，而是通过设置 CSS 属性 display 为 none 来隐藏元素。
  3.事件绑定指令（v-on）
  Vue.js 中的事件绑定指令 v-on 用于监听 DOM 事件，并在事件发生时执行特定的JavaScript方法。
  v-on 指令可以搭配一些修饰符来控制事件处理的行为：
• .stop：阻止事件继续传播。
• .prevent：阻止默认行为（例如，在表单提交时阻止页面跳转）。
• .capture：使用事件捕获模式。
• .self：只触发组件内部的事件处理函数。
• .once：只触发一次事件。
  4.属性绑定指令 （v-bind）
  Vue.js 中的属性绑定指令 v-bind 用于将数据动态绑定到 HTML 元素的属性上。
  5.双向绑定指令（v-model）
  Vue.js 中的双向绑定指令 v-model 用于在表单输入和应用状态之间建立双向数据绑定。所谓双向绑定就是：数据改变后，呈现的页面结果会更新；页面结果更新后，数据也会随之而变。
  v-model可以搭配以下修饰符来提供额外的行为：
• .lazy：只有在组件渲染后才绑定值。
• .number：输入字符串时自动转换为数字。
• .trim：自动过滤输入的首尾空白字符。
  6.列表渲染指令（v-for）
  Vue.js 提供了 v-for 列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。
  v-for 可以接受三个参数：值（value）、键（key）和索引（index），在遍历对象时键和索引是可选的。
  三.总结
  Vue.js是一个强大而灵活的框架，为现代Web应用的开发提供了丰富的特性和工具。无论是初学者还是有经验的开发者，都可以轻松上手Vue，并利用其简洁的API和组件化思想来构建出色的Web应用。