摘要: mixins的调用顺序 从执行的先后顺序来说,都是混入的先执行,然后构造器里的再执行,需要注意的是,这并不是方法的覆盖,而是被执行了两边。 PS:当混入方法和构造器的方法重名时,混入的方法无法展现,也就是不起作用。 html <div id="app"> <p>{{message}}</p> <bu 阅读全文
posted @ 2017-06-04 21:42 xuanPhoto 阅读(233) 评论(0) 推荐(0)
摘要: 数据变化的监控经常使用,我们可以先来看一个简单的数据变化监控的例子。例如天气预报的穿衣指数,它主要是根据温度来进行提示的,当然还有其它的,咱们就不考虑了。 html <div id="app"> <span>今日温度{{message}}℃</span> <span>穿衣指数{{message2}} 阅读全文
posted @ 2017-06-04 21:39 xuanPhoto 阅读(296) 评论(0) 推荐(0)
摘要: html js 阅读全文
posted @ 2017-06-04 21:37 xuanPhoto 阅读(176) 评论(0) 推荐(0)
摘要: 最简单的使用方法,一个数字,每点击一下按钮加1 html js methods中参数的传递 html <div id="app"> <span v-text="number"></span> <button @click="add(10)">add</button> </div> js var vm 阅读全文
posted @ 2017-06-04 21:34 xuanPhoto 阅读(184) 评论(0) 推荐(0)
摘要: 格式化输出结果 我们先来做个读出价格的例子:我们读书的原始数据是price:100 但是我们输出给用户的样子是(¥100元)。 html js html 阅读全文
posted @ 2017-06-04 21:30 xuanPhoto 阅读(157) 评论(0) 推荐(0)
摘要: propsData 不是和属性有关,他用在全局扩展时进行传递数据,结合自定义属性获取属性值的props一起使用 html js 阅读全文
posted @ 2017-06-04 21:27 xuanPhoto 阅读(278) 评论(0) 推荐(0)
摘要: html js 阅读全文
posted @ 2017-06-04 16:58 xuanPhoto 阅读(355) 评论(0) 推荐(0)
摘要: 我们把组件编写的代码放到构造器外部或者说单独文件 我们需要先声明一个对象,对象里就是组件的内容。 var zdy = { template:`<div>Panda from China!</div>` } 声明好对象后在构造器里引用就可以了。 components:{ " zdy ": zdy } 阅读全文
posted @ 2017-06-04 16:56 xuanPhoto 阅读(211) 评论(0) 推荐(0)
摘要: 我们在写属性时经常会加入’-‘来进行分词,比如:,那这时我们在props里如果写成props:[‘form-here’]是错误的,我们必须用小驼峰式写法props:[‘formHere’]。 阅读全文
posted @ 2017-06-04 16:52 xuanPhoto 阅读(461) 评论(0) 推荐(0)
摘要: props定义属性并获取属性值 html js 阅读全文
posted @ 2017-06-04 16:51 xuanPhoto 阅读(403) 评论(0) 推荐(0)
摘要: 组件注册的是一个标签,而指令注册的是已有标签里的一个属性。在实际开发中我们还是用组件比较多,指令用的比较少。因为指令看起来封装的没那么好,这只是个人观点。 阅读全文
posted @ 2017-06-04 16:50 xuanPhoto 阅读(296) 评论(0) 推荐(0)
摘要: 全局化注册组件 html <div id="app"> <!-- 注册一个全局逐渐 --> <register></register> </div> js var demo = Vue.component('register',{ template:"<h2>{{message}}</h2>", d 阅读全文
posted @ 2017-06-04 16:49 xuanPhoto 阅读(200) 评论(0) 推荐(0)
摘要: 直接写在选项里的模板 直接在构造器里的template选项后边编写。这种写法比较直观,但是如果模板html代码太多,不建议这么写。 var vm = new Vue({ el:"#app", template:` <h2>直接在构造器里的template选项后边编写。这种写法比较直观,但是如果模板h 阅读全文
posted @ 2017-06-04 16:46 xuanPhoto 阅读(200) 评论(0) 推荐(0)
摘要: Vue一共有10(严格说应该是8个,总数是10个 因为有两个是属于存在keep-alive才会生效的生命周期)个生命周期函数,我们可以利用这些函数在vue的每个阶段都进行操作数据或者改变内容。 其实在Vue的官网有一张图已经很好的诠释了生命周期,我在这里就不再多讲了,直接贴图,然后上程序代码。 ht 阅读全文
posted @ 2017-06-04 16:43 xuanPhoto 阅读(665) 评论(0) 推荐(0)
摘要: html html js 阅读全文
posted @ 2017-06-04 16:40 xuanPhoto 阅读(440) 评论(0) 推荐(0)
摘要: Vue.extend 返回的是一个“扩展实例构造器”,也就是预设了部分选项的Vue实例构造器。经常服务于Vue.component用来生成组件,可以简单理解为当在模板中遇到该组件名称作为标签的自定义元素时,会自动调用“扩展实例构造器”来生产组件实例,并挂载到自定义元素上。 自定义无参数标签 我们想象 阅读全文
posted @ 2017-06-04 16:37 xuanPhoto 阅读(271) 评论(0) 推荐(0)
摘要: Vue除了内部指令,我们也可以定义一些属于自己的指令,比如我们要定义一个v-diy的指令,作用就是让文字变成红色。 写好了这个功能,我们现在就自己定义一个全局的指令。我们这里使用Vue.directive( ); html <div v-diy="color">{{message}}</div> j 阅读全文
posted @ 2017-06-04 16:32 xuanPhoto 阅读(206) 评论(0) 推荐(0)
摘要: 什么是全局API? 全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局API,比如我们今天要学习的指令Vue.directive。说的简单些就是,在构造器外部用Vue提供给我们的API函数来定义新的功能。 阅读全文
posted @ 2017-06-04 16:24 xuanPhoto 阅读(145) 评论(0) 推荐(0)
摘要: html 阅读全文
posted @ 2017-06-04 11:13 xuanPhoto 阅读(306) 评论(0) 推荐(0)
摘要: v-model双向数据绑定的修饰符 .lazy:失去焦点时数据进行双向的绑定 v-model.lazy=”message ” .number:前面输入数字,后面接着字母自动去除掉。v-model. number =”message ” .trim:去掉打头的空格,内容之间还是可以产生空格。 v-mo 阅读全文
posted @ 2017-06-04 10:53 xuanPhoto 阅读(313) 评论(0) 推荐(0)
摘要: v-if和v-show区别 v-if判断是否要加载,可以减轻服务器压力,按需加载。 v-show 利用了css的display,可以提高客户端的流畅度。 看需求使用那个,如果页面上会经常用到,用v-show,例如tab栏等。 根据用户的需求加载的用v-if,选择性的向服务器请求加载,例如,瀑布流,懒加载等 阅读全文
posted @ 2017-06-04 10:50 xuanPhoto 阅读(213) 评论(0) 推荐(0)
摘要: 用npm 或者cnpm进行全局安装 cnpm install -g live-server 运行后就可以直接给你虚拟一个本地服务器,而且还可以热同步 运行 live-server 或者安装使用 http-server (不能像live-server一样热更新) 安装完之后可以通过 http-serv 阅读全文
posted @ 2017-06-04 10:48 xuanPhoto 阅读(382) 评论(0) 推荐(0)