Vue教程
Vue教程 什么是Vue Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。 Vue.js 是前端的主流框架之一,和 Angular.js、React.js 一起,并称为前端三大框架。
框架与库的区别
库是将代码集合成的一个产品,供程序员调用 框架则是为解决一个(一类)问题而开发的产品。 使用库的时候我们比较随意,想用哪取哪,哪块好用哪,而且把它拿过来可以按照我们的编写意愿来用。
MVC与MVVM
MVC与MVVM 什么是MVC MVC,是三个单独的词语,即 Model(模型)、View(视图)和 Controller(控制器)。Model(模型)是应用程序中用于处理应用程序数据逻辑的部分。View(视图)是应用程序中处理数据显示的部分。
MVC与MVVM
MVC与MVVM 什么是MVVM 在上个世纪的 1989 年,欧洲核子研究中心的物理学家 Tim Berners-Lee 发明了超文本标记语言(HyperText Markup Language),简称 HTML,并在 1993 年成为互联网草案。从此,互联网开始迅速商业化,诞生了一大批商业网站。
Vue下载安装
Vue下载安装 Vue下载安装 Vue下载 我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。在用 Vue.js 构建大型应用时推荐使用 NPM 方式来安装。
Vue环境搭建
Vue环境搭建 使用本地Vue源码 Vue 源码下载方式参考 Vue下载安装。我们将 Vue 源码保存为本地的 `vue-2.6.10.min.js` 文件,保存在 lib 目录下。
Vue实例对象
Vue实例对象 Vue实例对象教程 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例 开始的。Vue实例对象语法 var vm = new Vue({// 选项})
Vue.js指令大全
Vue.js指令大全 Vue.js指令 是带有 v- 前缀的特殊属性。指令属性的值预期是单个 JavaScript 表达式(v-for是例外情况)。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。
Vue.js模板插值
Vue.js模板插值 Vue.js模板插值教程 我们在 HTML 代码中使用 {{}} 形式获取 Vue 实例对象中 data 属性值的方式,就叫做 Vue.js模板插值 或叫做 Vue.js插值表达式。
Vue.js v-text指令
Vue.js v-text指令 Vue.js v-text教程 Vue.js v-text 指令 用于操作纯文本,它会替代显示对应的数据对象上的值。当绑定的数据对象上的值发生改变,插值处的内容也会随之更新。
Vue.js v-cloak指令
Vue v-cloak指令 Vue v-cloak教程 当我们的网络受阻时,或者页面加载完毕而没有初始化得到 Vue 实例时,DOM 中的 {{}} 则会展示出来,此时就会出现页面闪烁的问题。
Vue.js v-html指令
Vue v-html指令 Vue v-html教程 Vue v-html 指令类似于 v-text 指令. Vue v-html 指令与 v-text 指令唯一不同在于,v-text 指令将数据解析为纯文本,不能输出真正的 html 而 v-html 指令是可以解析 html 的。
Vue.js v-bind指令
Vue v-bind指令 Vue v-bind教程 Vue v-bind 指令用于绑定属性,即把被绑定的属性中的值当做 Vue 实例中的变量解析。Vue v-bind 指令还可以支持 JavaScript 表达式。Vue v-bind 指令的简写形式为 `:属性值`。
Vue.js v-on指令
Vue v-on指令 Vue v-on教程 Vue v-on 指令用于绑定事件监听器。Vue v-on 指令的简写形式为 `@event`。Vue v-on 指令可以支持同时写多个事件监听器,多个事件监听器的简写形式为 `v-on={@event1:handler1, @event2:handler2}`。
Vue.js v-on stop
Vue v-on stop事件修饰符 Vue v-on stop教程 Vue v-on 指令的 stop 修饰符用于阻止浏览器的默认行为(比如:a 标签的跳转、submit 的提交)。Vue v-on 指令的 stop 修饰符的行为类似原生 JavaScript 的 preventDefault 方法。
Vue.js v-on capture
Vue v-on capture事件修饰符 Vue v-on capture教程 Vue v-on 指令的 capture 修饰符用于添加事件侦听器时使用事件捕获模式。
Vue.js v-on self
Vue v-on self事件修饰符 Vue v-on self教程 Vue v-on 指令的 self 修饰符用于实现只有点击当前元素的时候,才会触发事件处理函数。如果是因为 事件冒泡 或者 Capture 模式 触发的事件,Vue v-on 指令的 self 修饰符则会忽略此类事件。
Vue.js v-on 多个事件修饰符
Vue v-on多个事件修饰符 Vue v-on多个事件修饰符教程 Vue v-on 指令支持多个事件修饰符连写的模式。Vue v-on 指令多个事件修饰符连写模式的语法为 `@event.eventModifier1.eventModifier2...`。
Vue v-model指令
Vue v-model指令 Vue v-model教程 使用 Vue v-model 指令,可以实现表单元素和 Model 中数据的双向绑定。而我们之前使用的 Vue v-bind 指令,Vue v-text 指令和 Vue v-html 指令只能实现数据的单向绑定,即从 M 自动绑定到 V。
Vue v-model lazy
Vue v-model lazy修饰符 Vue v-model lazy教程 Vue v-model 指令默认会在 input 事件中加载输入框中的数据(中文输入法中输入拼音的过程除外)。
Vue v-model number
Vue v-model number修饰符 Vue v-model number教程 Vue v-model 指令默认捕获的输入框的内容都是字符串的形式,即使输入框输入的是数字,也是 string 类型。 - 我们可以使用 Vue v-model number 修饰符可以实现让输入框输入的内容,自动转换为 number 类型。
Vue 样式 三元表达式
Vue样式三元表达式 Vue样式三元表达式教程 Vue样式 可以使用 class 来指定,且 class 里面可以支持三元表达式的形式。Vue样式使用三元表达式的语法格式为 `:class="['style1', 'style2', flag?'style3':'style4']"`。
Vue样式对象
Vue样式对象 Vue样式对象教程 Vue样式 可以使用 class 来指定,且 class 里面可以对象的形式。Vue样式 使用对象的语法格式为 `:class="['style1', 'style2', {'style3':flag}]"`。
Vue样式全对象
Vue样式单个对象 Vue样式单个对象教程 Vue样式 可以使用 class 来指定,且 class 里面可以是一个对象的形式。Vue样式使用一个对象的语法格式为 `:class="{style1:flag1, style2:flag2}"`。
Vue样式Vue对象
Vue样式Vue对象 Vue样式Vue对象教程 Vue样式 可以使用 class 来指定,且 class 里面可以是一个 Vue 对象的形式。Vue样式使用 Vue 对象的语法格式为 `:class="obj"`。
Vue样式style对象
Vue样式style Vue样式style教程 Vue样式 可以使用 style 来指定,且 style 里面可以是 Vue 对象数组的形式。Vue样式 使用 Vue 对象数组的语法格式为 `:style="[styleObj1, styleObj2]"`。
Vue v-for指令数组
Vue v-for指令数组 Vue v-for指令教程 Vue v-for 指令可以用来遍历数组或者对象,并且 Vue v-for 指令可以根据 data 中数据的更新动态刷新视图。Vue v-for遍历数组 v-for="item in arr"
Vue v-for指令对象
Vue v-for指令对象 Vue v-for指令教程 Vue v-for 指令可以用来遍历数组或者对象。同时 Vue v-for 指令可以根据 data 中数据的更新动态刷新视图。Vue v-for遍历对象 v-for="value in obj"
Vue v-for 指令对象数组
Vue v-for指令对象数组 Vue v-for指令教程 Vue v-for 指令可以用来遍历数组或者对象以及对象数组。Vue v-for 指令可以根据 data 中数据的更新动态刷新视图。Vue v-for 遍历对象数组案列
Vue v-for 指令迭代数字
Vue v-for指令迭代数字 Vue v-for指令教程 Vue v-for 指令可以用来遍历数组或者对象以及对象数组,也可以用来迭代数字。Vue v-for 指令可以根据 data 中数据的更新动态刷新视图。
Vue v-if指令
Vue v-if指令教程 Vue v-if 指令可以用来根据表达式执行的结果的真假,来选择是否要挂载到 DOM 上。 Vue v-if 指令中,如果条件为真,就执行标签快中的内容,条件为假,则不执行标签快中的内容。
Vue v-show指令
Vue v-show指令教程 Vue v-show 指令通过改变元素的 css 属性 (display) 来决定元素是显示还是隐藏。 Vue v-show 指令如果条件为 false,运行后,还是生成了条件为 false 所在的标签,但是只是让其display 属性为 none,即该标签不进行显示。
Vue v-else指令
Vue v-else指令 Vue v-else指令教程 Vue v-else 指令为 Vue v-if 添加一个 else 块。Vue v-else 前一兄弟元素必须有 Vue v-if 或 Vue v-else-if。 案列 Vue v-if v-else
Vue v-else-if指令
Vue v-else-if 指令 Vue v-else-if 指令教程 Vue v-else-if 指令为 Vue v-if 添加一个 else-if 块。Vue v-else-if 前一兄弟元素必须有 Vue v-if 或 Vue v-else-if。 案列 Vue v-if v-else-if
Vue v-pre指令
Vue v-pre指令 Vue v-pre指令教程 Vue v-pre 指令用于跳过这个元素和它的子元素的编译过程。一些静态的内容不需要编译,使用 Vue v-pre 这个指令可以加快编译速度。 案列 Vue v-pre
Vue filters 全局过滤器
Vue filters全局过滤器 Vue filters全局过滤器教程 Vue 允许自定义过滤器。Vue filters全局过滤器 可被用作一些常见的文本格式化。Vue filters全局过滤器 可以用在两个地方,mustache 插值 和 v-bind 表达式。
Vue filters 私有过滤器
Vue filters私有过滤器 Vue filters私有过滤器教程 Vue 允许自定义过滤器。Vue filters私有过滤器 可被用作一些常见的文本格式化。Vue filters 私有过滤器 可以用在两个地方,mustache 插值 和 v-bind 表达式。
Vue自定义按键修饰符
Vue自定义按键修饰符 Vue自定义按键修饰符教程 Vue 允许为 v-on 在监听键盘事件时添加按键修饰符,用于监听按键事件。 Vue按键修饰符 的别名中,系统只为我们提供了有限的别名。
Vue自定义全局指令
Vue自定义全局指令 Vue自定义全局指令教程 Vue 除了默认设置的核心指令( v-model, v-text,v-html 以及 v-show 等),Vue 也允许注册自定义指令。 在 Vue 2.0 里面,代码复用的主要形式和抽象是组件。
Vue自定义私有指令
Vue自定义私有指令 Vue自定义私有指令教程 Vue 除了支持自定义 全局指令 以外,还支持 Vue自定义私有指令。 Vue自定义私有指令语法 Vue自定义私有指令 我们需要在 Vue 的实例中,使用 directives 来定义,具体的参数和 Vue全局指令 一样。
Vue自定义指令简写
Vue自定义指令简写 Vue自定义指令简写教程 大多数情况下,我们都是在 bind 和 update 钩子函数上做重复的动作。因此 Vue 自定义指令为 bind 和 update 钩子函数提供了简写的形式。
Vue计算属性(computed)
Vue计算属性(computed) Vue计算属性(computed)教程 在 Vue模板 中可以使用双向绑定来处理一些数据或表达式。但是表达式如果过长,或逻辑更为复杂时,就会变得雕肿甚至难以阅读和维护。
Vue侦听器(watch)
Vue侦听器(watch)教程 在 Vue 中,Vue侦听器(watch) 是通过 watch 选项提供了一个方法,来响应数据的变化。Vue侦听器(watch) 最适合使用于当我们需要在数据变化时执行异步操作或开销较大的操作时使用。
计算属性与侦听器比较
Vue计算属性与Vue侦听器比较教程 Vue计算属性 Vue计算属性 就是通过其他变量计算得到另一个属性。Vue计算属性具有缓存功能。Vue计算属性是基于它们的依赖进行缓存的。
Vue过渡与动画-淡入淡出
Vue过渡与动画教程 Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。Vue 提供了内置的过渡封装组件,该组件用于包裹要实现过渡效果的组件。
Vue动画组
Vue过渡与动画组教程,Vue过渡与动画在实现列表过渡的时候,如果需要过渡的元素,是通过 v-for 渲染出来的,不能使用 transition 包裹,需要使用 transition-group。
Vue全局组件
Vue 全局组件教程,Vue 全局组件可以直接使用 Vue.component 来定义。使用 Vue.component 定义的全局组件,template 模板内容有且只能有一个根 HTML 元素,否则无法正常展示。
Vue私有组件
Vue私有组件教程,Vue 组件 的出现,就是为了拆分 Vue 实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可。
Vue组件数据
Vue组件数据教程,Vue 组件 可以有自己的 data 数据。Vue 组件的 data 和 Vue 实例的 data 有点不一样,实例中的 data 可以为一个对象,但是组件的 data 必须是一个方法。
Vue组件切换
Vue组件切换教程,我们除了可以使用 Vue 的 v-if 和 v-else 来实现 组件 的切换。Vue 还提供了 component ,来展示对应名的组件,可以实现组件的切换 。
Vue生命周期
Vue生命周期教程,Vue 生命周期就是一个 Vue 实例从创建初始化到最终被销毁的过程。Vue 生命周期主要涉及到八个函数,分别为 beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy 和 destroyed。
Vue生命周期之beforeCreate
Vue生命周期之beforeCreate教程,Vue 生命周期 的 beforeCreate 函数就是 Vue 实例被创建出来之前,会执行它。在 beforeCreate 生命周期函数执行的时候,Vue实例中的 data 和 methods 中的数据都还没有被初始化。
Vue生命周期之beforeMount
Vue生命周期之beforeMount教程,Vue 生命周期 的 beforeMount 函数被调用时,这里表示 Vue 实例开始编辑模板,把 Vue 代码中的那些指令进行执行。
Vue生命周期之mounted
Vue生命周期之mounted教程,Vue 生命周期 的 mounted 函数被调用时,Vue 实例的内存中的模板,已经真实的挂载到了页面中,用户已经可以看到渲染好的页面了。
Vue生命周期之beforeUpdate
Vue生命周期之beforeUpdate教程,Vue 生命周期 的 beforeUpdate 和 updated 函数是组件运行阶段的生命周期函数。Vue 生命周期的 beforeUpdate 和 updated 这两事件,会根据 data 数据的改变,有选着性触发 0 次或多次。
Vue生命周期之updated
Vue生命周期之updated教程,Vue 生命周期 的 beforeUpdate 和 updated 函数是组件运行阶段的生命周期函数。Vue 生命周期 的 beforeUpdated 和 updated 这两事件,会根据 data 数据的改变,有选着性触发 0 次或多次。
Vue生命周期之beforeDestroy
Vue生命周期之beforeDestroy教程,Vue 生命周期 的 beforeDestroy 钩子函数执行的时候,Vue 实例已经从运行阶段进入到了销毁阶段。
Vue resource教程
什么是Vue-resource,Vue 要实现 HTTP 请求,可以使用可以使用 vue-resource 库。Vue 2.0 版本推荐使用 axios 来完成 ajax 请求。
Vue axios
什么是Vue axios,Vue 要实现 HTTP 请求,可以使用可以使用 vue axios 库。Vue 2.0 版本推荐使用 axios 来完成 ajax 请求,也可以使用 Vue-resource 来完成 ajax 请求。
Vue axios使用
Vue axios请求,Vue axios 提供了七种请求的方式,分别为 REQUEST、 GET、HEAD、DELETE、POST、PUT、PATCH。使用 Vue 的 axios 发送 HTTP 请求的 API,是可以支持 Promise 的。
Vue axios DELETE请求
Vue axios DELETE请求,Vue axios DELETE请求教程,使用 Vue 的 axios 可以发送 HTTP 的 DELETE 请求,用于删除服务器的一条数据。
Vue-router router-link
Vue-router router-link教程,Vue 路由(vue-router) 用来切换 Vue 组件时的超链接,必须使用 `#` 。Vue 路由(vue-router) 的 router-link 标签,可以默认为我们在超链接前面添加 `#`,方便了我们代码的书写。
Vue-router redirect
Vue-router redirect教程,在 Vue 中,Vue 路由(vue-router) 的 redirect 标签,可以实现路由的跳转,即将一个路由重定向到另一个路由。
Vue router 高亮
Vue路由(vue-router)路由高亮教程,在 Vue 中,Vue 路由(vue-router) 的路由高亮,即当我们选中的那个路由的时候,路由是有一个特殊的样式。
Vue路由(vue-router)路由高亮
Vue路由(vue-router)路由高亮教程,在 Vue 中,Vue 路由(vue-router) 的 路由高亮,即当我们选中的那个路由的时候,路由是有一个特殊的样式。
Vue路由(vue-router)动画
Vue路由(vue-router)动画教程,在 Vue 中,Vue 路由(vue-router) 组件切换时,可以使用动画效果。Vue 路由(vue-router) 组件切换要实现动画效果,只需要将 router-view 标签使用 transition 标签包裹起来即可。
Vue路由(vue-router)路由参数
Vue路由(vue-router)路由参数教程,在 Vue 中,Vue 路由(vue-router) 可以通过请求的 URL 来传递参数。Vue 路由(vue-router)参数,我们可以直接在组件里面,通过 $route.query 对象,来获取传递的参数。
Vue路由(vue-router)路由参数
Vue路由(vue-router)路由参数教程,在 Vue 中,Vue 路由(vue-router) 可以通过请求的 URL 来传递参数。Vue 路由(vue-router)参数,我们可以直接在组件里面,通过 $route.params 对象,来获取传递的参数。
Vue路由(vue-router children)路由嵌套
Vue路由(vue-router children)路由嵌套教程,在 Vue 中,Vue 路由(vue-router) 可以通过 children 属性来实现路由的嵌套。
Vue路由(vue-router)命名视图
Vue路由(vue-router)命名视图教程,在 Vue 中,Vue 路由(vue-router) 我们定义 VueRouter 对象的时候,可以通过 components 属性,指定一个路由路径展示对个路由。
Vue监听路由(vue-router)变化
Vue监听路由(vue-router)变化,Vue监听路由(vue-router)变化教程,在 Vue 中,我们可以使用 watch 来监听路由对象的 $route.path 来监听路由的变化。