什么是低代码?低代码开发平台靠谱吗?低代码平台优缺点
708
2022-05-29
1. Vue简介
Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。 Vue 只关注视图层, 采用自底向上增量开发的设计。通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
2.Vue.js 目录结构
这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件:
assets: 放置一些图片,如logo等。
components: 目录里面放了一个组件文件,可以不用。
App.vue: 项目入口文件,我们也可以直接将组件写这里,而不使用 components 目录。
main.js: 项目的核心文件。
3. Vue语法
Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。
Vue 构造器中有一个el 参数,它是 DOM 元素中的 id。改动全部在以上指定的 div 内,div 外部不受影响。data 用于定义属性。methods 用于定义的函数,可以通过 return 来返回函数值。{{ }} 用于输出对象属性和函数返回值。
1) 插值
数据绑定最常见的形式就是使用 {{...}}(双大括号)的文本插值。
使用 v-html 指令用于输出 html 代码。
2)指令
指令带有前缀 v-,以表示它们是 Vue 提供的特殊 attribute。可能你已经猜到了,它们会在渲染的 DOM 上应用特殊的响应式行为。
v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定,根据表单上的值,自动更新绑定的元素的值。
按钮的事件我们可以使用 v-on 监听事件,并对用户的输入进行响应。
条件判断使用 v-if 指令。可以用 v-else 指令给 v-if 添加一个 "else" 块。
使用 v-show 指令来根据条件展示元素。
v-for 指令需要以 site in sites 形式的特殊语法, sites 是源数据数组并且 site 是数组元素迭代的别名。
3)计算属性
计算属性关键词是 computed。例子如下:
Original message: "{{ message }}"
Computed reversed message: "{{ reversedMessage }}"
vm.reversedMessage 依赖于 vm.message,在 vm.message 发生改变时,vm.reversedMessage 也会更新。使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。可以说使用 computed 性能会更好,但是如果你不希望缓存,你可以使用 methods 属性。
4)监听属性
监听属性 watch,我们可以通过 watch 来响应数据的变化。
5)样式绑定
class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性。为 v-bind:class 设置一个对象,从而动态的切换 class。
6)条件渲染
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。另一个根据条件展示元素的选项是 v-show 指令。v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件-和子组件适当地被销毁和重建。v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。相比之下,v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。
7) 事件处理
v-on 可以接收一个定义的方法来调用。
The button above has been clicked {{ counter }} times.
在事件处理程序中调用一些非常常见的需求。尽管我们可以在方法中轻松实现这点,但更好的方式是:方法只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。为了解决这个问题,Vue.js 为 v-on 提供了事件修饰符。之前提过,修饰符是由点开头的指令后缀来表示的。.stop、.prevent、.capture、.self、.once、
.passive。
在监听键盘事件时,我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符。Vue 提供了绝大多数常用的按键码的别名:.enter
.tab、.delete (捕获“删除”和“退格”键)、.esc、.space、.up、.down、.left、.right。
8)表单数据绑定
v-model 指令在表单控件 、
Message is: {{ message }}
对于单选按钮,复选框及选择框的选项,v-model 绑定的值通常是静态字符串 (对于复选框也可以是布尔值)。我们可以把值绑定到 Vue 实例的一个动态 property 上,这时可以用 v-bind 实现,并且这个 property 的值可以不是字符串。
// 当选中时vm.toggle === 'yes' // 当没有选中时vm.toggle === 'no'
4. Vue路由
Vue路由允许我们通过不同的 URL 访问不同的内容。
5. Vue.js Ajax(axios)
使用 axios 来完成 ajax 请求。
vue
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。