随笔分类 -  Vue

类angularjs 的轻量js库
摘要:var infiniteScroll = require('vue-infinite-scroll') 等价写法 import infiniteScroll from 'vue-infinite-scroll' Vue.use(infiniteScroll) //全局方法 var infiniteScroll = require('vue-infinite-scroll'); new ... 阅读全文
posted @ 2017-07-11 12:17 xuanPhoto 阅读(414) 评论(0) 推荐(0) 编辑
摘要:html js 一句话总结就是 子组件拿写在父组件中组件标签内的slot模板用 可以理解成组件内的html模板 父组件 子组件 如果想要传值可以这样(子向父html模板) 父组件 子组件 应用场景 阅读全文
posted @ 2017-06-05 23:49 xuanPhoto 阅读(251) 评论(0) 推荐(0) 编辑
摘要:html 卸载 刷新 修改 js var demo = Vue.extend({ template:`#tmp`, data:function(){ return{ message:"用Vue.extend构造... 阅读全文
posted @ 2017-06-05 23:47 xuanPhoto 阅读(706) 评论(0) 推荐(0) 编辑
摘要:$on 在构造器外部添加事件。 $on接收两个参数,第一个参数是调用时的事件名称,第二个参数是一个匿名方法。 如果按钮在作用域外部,可以利用$emit来执行。 html <div id="app"> <span>{{message}}</span> <button @click="add()">+1 阅读全文
posted @ 2017-06-05 23:46 xuanPhoto 阅读(191) 评论(0) 推荐(0) 编辑
摘要:html 用Vue.extend构造器生成一个组件,并用实例$mount挂载上去 js var demo = Vue.extend({ template:`#tmp` }) new demo().$mount('diy') 阅读全文
posted @ 2017-06-05 23:44 xuanPhoto 阅读(371) 评论(0) 推荐(0) 编辑
摘要:html {{message}} js var vm = new Vue({ el:"#app", data:{ message:"HelloWorld" }, methods:{ add:function(a)... 阅读全文
posted @ 2017-06-05 23:42 xuanPhoto 阅读(195) 评论(0) 推荐(0) 编辑
摘要:html {{message}} js var vm = new Vue({ el:"#app", data:{ message:"HelloWorld" }, mounted:function(){ $('#app ... 阅读全文
posted @ 2017-06-05 23:40 xuanPhoto 阅读(323) 评论(0) 推荐(0) 编辑
摘要:delimiters差值选项vue默认是{{}},这个选项可以把这个差值形式进行改变,这里讲,默认插值改成${} html js 阅读全文
posted @ 2017-06-05 05:36 xuanPhoto 阅读(180) 评论(1) 推荐(0) 编辑
摘要:html js 阅读全文
posted @ 2017-06-05 05:34 xuanPhoto 阅读(293) 评论(0) 推荐(0) 编辑
摘要:mixins的调用顺序 从执行的先后顺序来说,都是混入的先执行,然后构造器里的再执行,需要注意的是,这并不是方法的覆盖,而是被执行了两边。 PS:当混入方法和构造器的方法重名时,混入的方法无法展现,也就是不起作用。 html <div id="app"> <p>{{message}}</p> <bu 阅读全文
posted @ 2017-06-04 21:42 xuanPhoto 阅读(217) 评论(0) 推荐(0) 编辑
摘要:数据变化的监控经常使用,我们可以先来看一个简单的数据变化监控的例子。例如天气预报的穿衣指数,它主要是根据温度来进行提示的,当然还有其它的,咱们就不考虑了。 html <div id="app"> <span>今日温度{{message}}℃</span> <span>穿衣指数{{message2}} 阅读全文
posted @ 2017-06-04 21:39 xuanPhoto 阅读(278) 评论(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 阅读(177) 评论(0) 推荐(0) 编辑
摘要:格式化输出结果 我们先来做个读出价格的例子:我们读书的原始数据是price:100 但是我们输出给用户的样子是(¥100元)。 html js html 阅读全文
posted @ 2017-06-04 21:30 xuanPhoto 阅读(147) 评论(0) 推荐(0) 编辑
摘要:propsData 不是和属性有关,他用在全局扩展时进行传递数据,结合自定义属性获取属性值的props一起使用 html js 阅读全文
posted @ 2017-06-04 21:27 xuanPhoto 阅读(264) 评论(0) 推荐(0) 编辑
摘要:html js 阅读全文
posted @ 2017-06-04 16:58 xuanPhoto 阅读(345) 评论(0) 推荐(0) 编辑
摘要:我们把组件编写的代码放到构造器外部或者说单独文件 我们需要先声明一个对象,对象里就是组件的内容。 var zdy = { template:`<div>Panda from China!</div>` } 声明好对象后在构造器里引用就可以了。 components:{ " zdy ": zdy } 阅读全文
posted @ 2017-06-04 16:56 xuanPhoto 阅读(184) 评论(0) 推荐(0) 编辑
摘要:我们在写属性时经常会加入’-‘来进行分词,比如:,那这时我们在props里如果写成props:[‘form-here’]是错误的,我们必须用小驼峰式写法props:[‘formHere’]。 阅读全文
posted @ 2017-06-04 16:52 xuanPhoto 阅读(453) 评论(0) 推荐(0) 编辑
摘要:props定义属性并获取属性值 html js 阅读全文
posted @ 2017-06-04 16:51 xuanPhoto 阅读(325) 评论(0) 推荐(0) 编辑
摘要:组件注册的是一个标签,而指令注册的是已有标签里的一个属性。在实际开发中我们还是用组件比较多,指令用的比较少。因为指令看起来封装的没那么好,这只是个人观点。 阅读全文
posted @ 2017-06-04 16:50 xuanPhoto 阅读(287) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示