方法处理器 可以用 v-on 指令监听 DOM 事件: <div id="example"> <button v-on:click="greet">Greet</button> </div> 我们绑定了一个单击事件处理器到一个方法 greet.下面在 Vue 实例中定义这个方法: var vm = new Vue({ el: '#example', data: { name: 'Vue.js' }, // 在 `met…

指令(Directives)是Vue.js模板中最常用的一项功能,它带有前缀v-,前面已经使用过v-html.v-pre等.指令的主要职责就是当表达式的值改变时,相应地将某些行为应用到DOM上. v-if <!-- html --> <div id="app"> <p v-if="show">显示这段文本</p> </div> //JS var app = new Vue({ el: '#app', dat…

基本指令 1.v-cloak v-cloak不需要表达式,它会在Vue实例结束编译时从绑定的HTML元素上移除,经常和CSS的display:none配合使用. <div id="app" v-cloak> {{ message }} </div> <script> var app = new Vue({ el: '#app', data: { message:'这是一段文本' } }) </script> 这是虽然已经加了指令v-clo…

基本用法 以监听一个按钮的点击事件为例,设计一个计数器,每次点击都加1: <div id = "app"> 点击次数:{{ counter }} <button @click="counter++">+1</button> </div> <script> new Vue({ el: '#app', data:{ counter: 0 } }) </script> @click的表达式可以直接使用…

「 Vue很难学吗 」 对于我这种从0.x版本就开始体验 vuejs 的人来说,当然不算难,那时候没各种脚手架和复杂搭配,仅仅是一个mvvm的解决方案库而已,解决了jq带来的繁琐操作dom痛点,所以就一直用了. 我最早用的是AngularJs,那时候15年也是刚传到国内,踩了很多坑这方面的坑,各种文档.API 和解决方案都不完善,所以知道从新学一个新的概念框架的难处和雷点,最近Vue发展的很好,也是华人所写,所以普及度很高,文档好,语法简介收获了一大批忠实深度用户,我之前web入坑系列文章也分析…

简介 Vue是一套用于构建用户界面的渐进式框架.简单小巧( 压缩后仅17KB),Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易于上手,还便于与第三方库或既有项目整合. 特点 ♦ 解耦视图与数据 ♦ 可复用的组件 ♦ 前端路由 ♦ 状态管理 ♦ 虚拟DOM 环境版本 开发环境: <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 生产…

{{}}模板内的表达式常用于简单的运算,当运算过长或逻辑复杂时,会难以维护. <div> {{ text.split(',').reverse().join('') }} </div> 这个表达式包含3个操作,在遇到复杂逻辑时应该使用计算属性.上面的例子可以用计算属性进行改写: <div id = "app"> {{ reversedText }} </div> <script> var app = new Vue({ el:…

Vue实例对象 创建一个vue应用很简单,通过构造函数Vue就能创建一个Vue的根实例: var app = new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } }) 变量app代表了这个Vue实例.el.data都属于实例的参数选项. el:el是必不可少的选项,用于指定一个页面中已存在的DOM元素来挂在Vue实例,它可以是HTMLElement,也可以是CSS选择器. <div id="app"></d…

定义:事件总线是实现vue任意组件之前传递参数的一种编程技巧,本质上就是组件的自定义事件.事件总线有很多种写法,具体的思路就是创造一个大家都可以访问到的公共的属性,在这个公共的属性上面可以调用$on,$off,$emit的方法来进行事件的绑定,触发以及解绑.如果a组件要传递一个参数个b组件,b就可以在公共属性上绑定一个自定义事件,然后a通过$emit来出发这个自定义事件,并且携带要传递给b的参数,b通过事件的回调来接受a传递的参数.这样a,b组件之前的通信其实是通过操作公共属性来实现的,同理通过…

DOM元素经常会动态地绑定一些class类名或style样式. 基本用法 <div id="app"> <a v-bind:href="url">链接</a> <img v-bind:src="imgUrl"> <!-- 缩写为 --> <a :href="url">链接</a> <img :src="imgUrl"&…