Vue 简要学习
文章平均质量分 86
vue语言学习
梁辰兴
深情不及久伴,紘爱无需多言。
展开
-
Vue 核心
Vue (发音为 /vjuː/,类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,帮助你高效地开发用户界面。无论是简单还是复杂的界面,Vue 都可以胜任。动态构建用户界面的渐进式 JavaScript 框v-text : 更新元素的 textContentv-html : 更新元素的 innerHTMLv-if : 如果为 true, 当前标签才会输出到页面。原创 2023-02-28 11:04:09 · 262 阅读 · 0 评论 -
Vue 模板语法
这里,message 是第一个参数,字符串 ‘arg1’ 将传给过滤器作为第二个参数, arg2 表达式的值将被求值然后传给过滤器作为第三个参数。Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。在这里 href 是参数,告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。指令用于在表达式的值改变时,将某些行为应用到 DOM 上。原创 2023-04-19 15:28:38 · 738 阅读 · 0 评论 -
Vue 条件语句
v-else-if 在 2.1.0 新增,顾名思义,用作 v-if 的 else-if 块。这里, v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。注意:v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。注意: v-show 不支持 语法。原创 2023-04-20 07:30:00 · 547 阅读 · 0 评论 -
Vue 循环语句
v-for 指令需要以 item in items 形式的特殊语法, items 是源数据数组并且 item 是数组元素迭代的别名。循环使用 v-for 指令。'相看两不厌,唯有敬亭山!v-for 也可以循环整数。原创 2023-04-20 07:15:00 · 273 阅读 · 0 评论 -
Vue 计算属性
我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。时,setter 会被调用, vm.name 和 vm.url 也会被对应更新。vm.reversedMessage 依赖于 vm.message,在 vm.message 发生改变时,vm.reversedMessage 也会更新。可以说使用 computed 性能会更好,但是如果你不希望缓存,你可以使用 methods 属性。原创 2023-04-20 07:30:00 · 424 阅读 · 0 评论 -
Vue 样式绑定
注意:当 v-bind:style 使用需要特定前缀的 CSS 属性时,如 transform ,Vue.js 会自动侦测并添加相应的前缀。Vue.js v-bind 在处理 class 和 style 时, 专门增强了它。表达式的结果类型除了字符串之外,还可以是对象或数组。class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性。此外,我们也可以在这里绑定返回对象的计算属性。实例 3 与 实例 2 的渲染结果是一样的。原创 2023-04-20 07:45:00 · 718 阅读 · 0 评论 -
Vue 事件处理器
Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节,如:event.preventDefault() 或 event.stopPropagation()。通常情况下,我们需要使用一个方法来调用 JavaScript 方法。Vue.js通过由点(.)表示的指令后缀来调用修饰符。// 也可以用 JavaScript 直接调用方法。// `this` 在方法里指当前 Vue 实例。// `event` 是原生 DOM 事件。v-on 可以接收一个定义的方法来调用。原创 2023-04-20 07:45:00 · 816 阅读 · 0 评论 -
Vue 表单
这通常很有用,因为在 type=“number” 时 HTML 中输入的值也总是会返回字符串类型。你可以用 v-model 指令在表单控件元素上创建双向数据绑定。v-model 会根据控件类型自动选取正确的方法来更新元素。'博客\r\nhttps://www.csdn.net'这节为大家介绍 Vue.js 表单上的应用。原创 2023-04-21 06:00:00 · 617 阅读 · 0 评论 -
Vue 组件
父组件是使用 props 传递数据给子组件,但如果子组件要把数据传递回去,就需要使用自定义事件!使用监听事件使用触发事件另外,父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。以下实例中子组件已经和它外部完全解耦了。它所做的只是触发一个父组件关心的内部事件。实例return {return {return {return {return {return {return {原创 2023-04-21 06:00:00 · 753 阅读 · 0 评论 -
Vue 自定义指令
除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。实例< div id = " app " > < p > 页面载入时,input 元素自动获取焦点: < input v-focus > < script > // 注册一个全局自定义指令 v-focus Vue . directive('focus' , {// 当绑定元素插入到 DOM 中。原创 2023-04-21 06:15:00 · 725 阅读 · 0 评论 -
Vue 路由
以下实例中我们将 vue-router 加进来,然后配置组件和路由映射,再告诉 vue-router 在哪里渲染它们。通过 Vue.js 可以实现多视图的单页Web应用(single page web application,SPA)。Vue.js + vue-router 可以很简单的实现单页应用。Vue.js 路由允许我们通过不同的 URL 访问不同的内容。本章节我们将为大家介绍 Vue.js 路由。Vue.js 路由需要载入。直接下载 / CDN。原创 2023-04-25 08:13:09 · 797 阅读 · 0 评论