vue
文章平均质量分 83
shi_zi_183
这个作者很懒,什么都没留下…
展开
-
Vue.js 组件
Vue.js 组件组件是Vue.js最推崇的,也是最强大的功能之一,核心目标是为了可重用性高,减少重复性的开发。我们可以把组件代码按照template、style、script的拆分方式,放置到对应的.vue文件中。Vue.js的组件可以理解为预先定义好行为的ViewModel类。一个组件可以预定义很多选型,但最核心的是以下几个:模板 —— 模板生命力数据和最终展现给用户的DOM之间的映射关系。初始数据 —— 一个组件的初始数据状态。对于可复用的组件来说,通常是私有的状态。接受的外部参数 ——原创 2022-01-15 20:04:02 · 582 阅读 · 1 评论 -
Vue.js 实例方法
Vue.js 实例方法实例属性组件树访问1、vm.$parent用来访问当前组件实例的父实例2、vm.$root用来访问当前组件树的根实例,如果当前组件没有父实例,$root表示当前组件实例本身3、vm.$children用来访问当前组件实例的直接子组件实例4、vm.$refs用来访问使用了v-ref指令的子组件。DOM访问1、vm.$el用来访问挂载当前组件实例的DOM元素数据访问1、vm.$data用来访问组件实例观察的数据对象,该对象引用组件实例化时选项中的data属性原创 2022-01-14 09:45:11 · 726 阅读 · 0 评论 -
Vue.js Method
Vue.js MethodVue.js的事件监听一般都通过v-on指令配置在HTML中,虽然也可以在JavaScript代码中使用原生addEventListener方法添加事件监听,但Vue.js本身并不提倡如此。看上去这种方式不符合传统的"关注点分离"的理念,但其实所有的Vue.js事件处理方法和表达式都严格绑定在当前视图的ViewModel上。实际上,采用它提供的v-on指令有如下几点好处:通过查看HTML模板便能轻松定位JavaScript代码中对应的方法。无须在JavaScript中手动绑原创 2022-01-13 11:04:38 · 539 阅读 · 0 评论 -
Vue.js 过渡
Vue.js 过渡Vue 的过渡系统提供了非常多简单的方法设置进入、离开和列表的动效。那么对于数据元素本身的动效呢,比如:数字和运算颜色的显示SVG 节点的位置元素的大小和其他的 property这些数据要么本身就以数值形式存储,要么可以转换为数值。有了这些数值后,我们就可以结合 Vue 的响应式和组件系统,使用第三方库来实现切换元素的过渡状态。状态动画与侦听器<!DOCTYPE html><html lang="en"><head> &l原创 2022-01-13 10:02:04 · 288 阅读 · 0 评论 -
Vue.js Class与Style绑定
Vue.js Class与Style绑定对于数据绑定,一个常见的需求是操作元素的class列表和它的内联样式。因为它们都是attribute,我们可以用v-bind处理它们;只需要计算出表达式最终的字符串。不过,字符串拼接麻烦又易错。因此,在v-bind用于class和style时,Vue.js专门增强了它。表达式的结果类型除了字符串以外,还可以是对象或数组。绑定HTML Class对象语法我们可以传给v-bind:class一个对象,以动态地切换class。注意,v-bind:class指令可以原创 2022-01-12 17:43:57 · 471 阅读 · 1 评论 -
Vue.js 过滤器
Vue.js 过滤器在了解过滤器之前,我们需要明确一个概念——过滤器,本质上都是函数。其作用在于用户输入数据后,它能够进行处理,并返回一个数据结果。Vue.js使用管道符(|)进行连接{{'abc' | uppercase}}这里使用了Vue.js内置的过滤器uppercase,将字符串中的字母全部转换为大写形式。Vue2不加载内置过滤器需要自己引入filter组件<script src="https://cdn.jsdelivr.net/npm/vue2-filters/dist/vue原创 2022-01-11 09:40:31 · 835 阅读 · 0 评论 -
Vue.js 表单控件绑定
Vue.js 表单控件绑定在Web应用中,我们经常会使用表单向服务端提交一些数据,而通常也会在表单项中绑定一些如input、change等事件对用户输入地数据进行校验、更新等操作。在Vue.js中、我们可以使用v-model指令同步用户输入的数据到Vue实例data属性中,同时会对radio、checkbox、select等原生表单组件提供一些语法糖使表单操作更加容易。基本用法text设置文本框v-model为name<!DOCTYPE html><html lang="en"原创 2022-01-10 10:15:36 · 955 阅读 · 0 评论 -
Vue.js 计算属性
Vue.js 计算属性通常我们会在模板中绑定表达式,模板是用来描述视图结构的。如果模板中的表达式存在过多的逻辑,模板会变得臃肿不堪,维护变得非常困难。因此,为了简化逻辑,当某个属性的值依赖于其他属性的值时,我们可以使用计算属性。什么是计算属性计算属性就是当其依赖属性的值发生变化时,这个属性的值会自动更新,与之相关的DOM部分也会同步自动更新。<!DOCTYPE html><html lang="en"><head> <meta charset="原创 2022-01-09 10:34:44 · 326 阅读 · 0 评论 -
vue.js 指令
Vue.js 指令指令是特殊的带有前缀v-的特性。指令的值限定为绑定表达式,指令的职责就是当其表达式的值改变时把某些特殊的行为应用到DOM上。内部指令首先来看看和原生HTML标签相似的一组内置指令,这组指令非常容易记忆,因为仅仅是在原生标签前面v-前缀。v-showv-elsev-modelv-repeat(1,0-)v-for(1,0+)v-textv-elv-htmlv-onv-bindv-refv-prev-cloakv-ifv-ifv-if指令可以完全根据表原创 2022-01-08 10:33:31 · 427 阅读 · 0 评论 -
Vue.js 数据绑定
数据绑定语法插值文本插值是最基本的形式,使用双大括号{{}}(类似于Mustache,所以文本中称作Mustache标签)<span>Test: {{text}}</span>例子中的标签{{text}}将会被相应的数据对象text属性的值替换掉,当text的值改变时,文本中的值也会联动地发生变化。有时候只需渲染一次数据,后续数据变换不再关心,可以通过"*"实现<span>Text: {{*text}} </span>双大括号标签会把里面地值原创 2021-12-27 19:17:45 · 918 阅读 · 0 评论 -
Vue.js 入门
Vue.js入门Vue.js是什么Vue.js不是一个框架——它只聚焦视图层,是一个构建数据驱动的Web界面的库。Vue.js通过简单的API提供高效的数据绑定和灵活的组件系统。特性确实轻量除了以MVP模式代表的Riot.js外,Vue.js已经算是前端库里面体积非常小的,但不依赖其他库。数据绑定对于一些富交互、状态机类似的前端UI界面,数据绑定非常简单、方便。指令类似于AngularJS,可以用一些内置的简单指令(v-*),也可以自定义指令,通过对应表达式值的变化就可以修改对应的DOM原创 2021-12-27 17:10:41 · 384 阅读 · 0 评论