{"size": 3344, "ext": "js", "max_stars_repo_path": "docs/build/2.main.v10.js", "max_stars_repo_name": "hai2007/quick-paper", "max_stars_repo_stars_event_min_datetime": "2021-01-07T13:11:28.000Z", "max_stars_repo_stars_event_max_datetime": "2021-09-14T03:22:03.000Z", "max_issues_repo_path": "docs/build/2.main.v10.js", "max_issues_repo_name": "hai2007/quick-paper", "max_issues_repo_issues_event_min_datetime": "2021-02-19T02:44:17.000Z", "max_issues_repo_issues_event_max_datetime": "2021-09-14T08:02:43.000Z", "max_forks_repo_path": "docs/build/2.main.v10.js", "max_forks_repo_name": "hai2007/quick-paper", "max_forks_repo_forks_event_min_datetime": "2021-02-15T12:59:33.000Z", "max_forks_repo_forks_event_max_datetime": "2021-08-18T09:56:09.000Z"}
{"max_stars_count": 6, "max_issues_count": 5, "max_forks_count": 3, "avg_line_length": 3344.0, "max_line_length": 3344, "alphanum_fraction": 0.6312799043}
(window.webpackJsonp=window.webpackJsonp||[]).push([[2],{31:function(c,a,e){var d=e(32);"string"==typeof d&&(d=[[c.i,d,""]]),d.locals&&(c.exports=d.locals);(0,e(2).default)("data-quickpaper-257ebdcc",d,!0)},32:function(c,a,e){(c.exports=e(1)(!1)).push([c.i,"",""])},39:function(c,a,e){"use strict";e.r(a);var d={};e(31);d.render=function(c){return c("div",{class:"doc-view",quickpaper:"","data-quickpaper-257ebdcc":""},[c("header",{id:"fixed-top","data-quickpaper-257ebdcc":""},["指令"]),c("h2",{id:"fixed-define","data-quickpaper-257ebdcc":""},["自定义指令"]),c("p",{"data-quickpaper-257ebdcc":""},["组件是强化原生标签，指令是强化原生属性，因此用法和原生属性类似，比如我们有一个属性name："]),c("pre",{"q-code":"","data-quickpaper-257ebdcc":""},["<input name />"]),c("p",{"data-quickpaper-257ebdcc":""},["如何自定义指令？自定义指令和组件类似，比如使用Quick Paper上的方法："]),c("pre",{"q-code":"","data-quickpaper-257ebdcc":""},["QuickPaper.directive('qDemo',{↵↵    // 指令生效的时候↵    inserted:function(el,binding){},↵↵    // 被绑定于元素所在的组件中有数据更新时调用，而无论绑定值是否变化↵    update:function(el,binding){},↵↵    // 只调用一次，指令与元素解绑时调用↵    delete:function(el,binding){}↵});"]),c("p",{"data-quickpaper-257ebdcc":""},["我们来看看binding中有什么："]),c("pre",{"q-code":"","data-quickpaper-257ebdcc":""},["binding={↵↵    // 当前Quick Paper对象↵    target,↵↵    // 指令的属性值↵    exp,↵↵    // 指令的属性值在当前Quick Paper中编译后的值↵    value,↵↵    // 比如q-attr:XXX,表示的就是XXX↵    type↵}"]),c("p",{"data-quickpaper-257ebdcc":""},["当然，指令和组件一样，也支持局部挂载。"]),c("h2",{id:"fixed-inner","data-quickpaper-257ebdcc":""},["内置指令"]),c("p",{"data-quickpaper-257ebdcc":""},["对于一些常用的加强属性Quick Paper内置提供了实现，具体如下："]),c("h3",{id:"fixed-q-model","data-quickpaper-257ebdcc":""},["双向绑定：model"]),c("p",{"data-quickpaper-257ebdcc":""},["一般用于输入框，可以实现视图和数据之间的同步。"]),c("pre",{"q-code":"html","data-quickpaper-257ebdcc":""},["<input q-model='param'/>"]),c("p",{"data-quickpaper-257ebdcc":""},["其中param需要提前在data中注册（下同）。"]),c("h3",{id:"fixed-q-bind","data-quickpaper-257ebdcc":""},["单向绑定：bind"]),c("p",{"data-quickpaper-257ebdcc":""},["只会主动同步数据到视图。"]),c("pre",{"q-code":"","data-quickpaper-257ebdcc":""},["<div q-bind='param' q-bind:param='param'></div>"]),c("p",{"data-quickpaper-257ebdcc":""},["上面我们演示了两种用法，第一种会修改标签的value或innerText,第二种会修改标签的param属性。"]),c("p",{"data-quickpaper-257ebdcc":""},["再来看个例子："]),c("pre",{"q-code":"html","data-quickpaper-257ebdcc":""},["<div>{ {param} }</div>"]),c("p",{"data-quickpaper-257ebdcc":""},["上面的写法类似q-bind的第一种用法。"]),c("h3",{id:"fixed-q-on","data-quickpaper-257ebdcc":""},["事件：on"]),c("p",{"data-quickpaper-257ebdcc":""},["用于在标签中注册DOM事件"]),c("pre",{"q-code":"html","data-quickpaper-257ebdcc":""},["<div q-on:click='doit()'>点击我</div>"]),c("p",{"data-quickpaper-257ebdcc":""},["上面我们演示的是单击，如果把.click改成.dblclick就是双击，别的DOM事件也类似。"]),c("p",{"data-quickpaper-257ebdcc":""},["除此之外，还有几个特殊的选项（可以同时使用）："]),c("pre",{"q-code":"html","data-quickpaper-257ebdcc":""},["<div q-on:click.once='doit()'>点击我</div>"]),c("p",{"data-quickpaper-257ebdcc":""},["上面我们添加了.once，表示点击一次后就会失效,一共有以下可选："]),c("ul",{"data-quickpaper-257ebdcc":""},[c("li",{"data-quickpaper-257ebdcc":""},["1.prevent 阻止默认事件"]),c("li",{"data-quickpaper-257ebdcc":""},["2.stop 阻止冒泡"]),c("li",{"data-quickpaper-257ebdcc":""},["3.once 只执行一次"])]),c("p",{"data-quickpaper-257ebdcc":""},["有时候为了方便，q-on:可以用@代替，比如开始的例子改写一下："]),c("pre",{"q-code":"html","data-quickpaper-257ebdcc":""},["<div @click='doit()'>点击我</div>"])])};a.default=d}}]);