-
Notifications
You must be signed in to change notification settings - Fork 14
/
Copy pathindex.html
216 lines (188 loc) · 13.9 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
<!DOCTYPE html>
<!-- Generated by pkgdown: do not edit by hand --><html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vuejs Helpers and Htmlwidget • vueR</title>
<!-- jquery --><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script><!-- Bootstrap --><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha256-bZLfwXAP04zRMK2BjiO8iu9pf4FbLqX6zitd+tIvLhE=" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha256-nuL8/2cJ5NDSSwnKD8VqreErSWHtnEP9E7AySL+1ev4=" crossorigin="anonymous"></script><!-- bootstrap-toc --><link rel="stylesheet" href="bootstrap-toc.css">
<script src="bootstrap-toc.js"></script><!-- Font Awesome icons --><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" integrity="sha256-mmgLkCYLUQbXn0B1SRqzHar6dCnv9oZFPEC1g1cwlkk=" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/v4-shims.min.css" integrity="sha256-wZjR52fzng1pJHwx4aV2AO3yyTOXrcDW7jBpJtTwVxw=" crossorigin="anonymous">
<!-- clipboard.js --><script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js" integrity="sha256-inc5kl9MA1hkeYUt+EC3BhlIgyp/2jDIyBLS6k3UxPI=" crossorigin="anonymous"></script><!-- headroom.js --><script src="https://cdnjs.cloudflare.com/ajax/libs/headroom/0.11.0/headroom.min.js" integrity="sha256-AsUX4SJE1+yuDu5+mAVzJbuYNPHj/WroHuZ8Ir/CkE0=" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/headroom/0.11.0/jQuery.headroom.min.js" integrity="sha256-ZX/yNShbjqsohH1k95liqY9Gd8uOiE1S4vZc+9KQ1K4=" crossorigin="anonymous"></script><!-- pkgdown --><link href="pkgdown.css" rel="stylesheet">
<script src="pkgdown.js"></script><meta property="og:title" content="Vuejs Helpers and Htmlwidget">
<meta property="og:description" content="Make it easy to use vue in R with helper
dependency functions and examples.">
<!-- mathjax --><script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js" integrity="sha256-nvJJv9wWKEm88qvoQl9ekL2J+k/RWIsaSScxxlsrv8k=" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/config/TeX-AMS-MML_HTMLorMML.js" integrity="sha256-84DKXVJXs0/F8OTMzX4UR909+jtl4G7SPypPavF+GfA=" crossorigin="anonymous"></script><!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body data-spy="scroll" data-target="#toc">
<div class="container template-home">
<header><div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="navbar-brand">
<a class="navbar-link" href="index.html">vueR</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="">0.6.0</span>
</span>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
<a href="reference/index.html">Reference</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Articles
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>
<a href="articles/intro_to_vueR.html">Intro to vueR</a>
</li>
</ul>
</li>
<li>
<a href="news/index.html">Changelog</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="https://github.com/vue-r/vueR/" class="external-link">
<span class="fab fa-github fa-lg"></span>
</a>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container -->
</div>
<!--/.navbar -->
</header><div class="row">
<div class="contents col-md-9">
<p><a href="https://vuejs.org" class="external-link">Vue.js</a> is a quiet, very popular JavaScript framework with an impressive set of features, a solid community, and MIT license. Don’t tell anybody, but I think I might even like it better than React. With all this, Vue deserves its own set of helpers for <code>R</code>, just like <a href="https://github.com/timelyportfolio/d3r" class="external-link"><code>d3r</code></a> and <a href="https://github.com/react-r/reactR" class="external-link"><code>reactR</code></a>.</p>
<p><code>vueR</code> provides these helpers with its dependency function <code><a href="reference/html_dependency_vue.html">html_dependency_vue()</a></code> and <code>htmlwidget</code> helper <code><a href="reference/vue.html">vue()</a></code>.</p>
<div class="section level3">
<h3 id="installation">Installation<a class="anchor" aria-label="anchor" href="#installation"></a>
</h3>
<div class="sourceCode" id="cb1"><pre class="sourceCode R"><code class="sourceCode r"><span id="cb1-1"><a href="#cb1-1" tabindex="-1"></a><span class="fu">install.packages</span>(<span class="st">"vueR"</span>)</span></code></pre></div>
<p>or for the latest if different from CRAN</p>
<div class="sourceCode" id="cb2"><pre class="sourceCode R"><code class="sourceCode r"><span id="cb2-1"><a href="#cb2-1" tabindex="-1"></a>remotes<span class="sc">::</span><span class="fu">install_github</span>(<span class="st">"vue-r/vueR"</span>)</span></code></pre></div>
</div>
<div class="section level3">
<h3 id="example">Example<a class="anchor" aria-label="anchor" href="#example"></a>
</h3>
<p>We’ll start with a recreation of the simple “Hello World” example from the Vue.js documentation. This is the hard way.</p>
<div class="sourceCode" id="cb3"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span><span class="kw"><a href="https://rdrr.io/r/base/library.html" class="external-link">library</a></span><span class="op">(</span><span class="va"><a href="https://github.com/rstudio/htmltools" class="external-link">htmltools</a></span><span class="op">)</span></span>
<span><span class="kw"><a href="https://rdrr.io/r/base/library.html" class="external-link">library</a></span><span class="op">(</span><span class="va"><a href="https://github.com/vue-r/vueR" class="external-link">vueR</a></span><span class="op">)</span></span>
<span></span>
<span><span class="fu"><a href="https://rstudio.github.io/htmltools/reference/browsable.html" class="external-link">browsable</a></span><span class="op">(</span></span>
<span> <span class="fu"><a href="https://rstudio.github.io/htmltools/reference/tagList.html" class="external-link">tagList</a></span><span class="op">(</span></span>
<span> <span class="fu"><a href="reference/html_dependency_vue.html">html_dependency_vue</a></span><span class="op">(</span><span class="op">)</span>, <span class="co"># local and minimized by default</span></span>
<span> <span class="va">tags</span><span class="op">$</span><span class="fu">div</span><span class="op">(</span>id<span class="op">=</span><span class="st">"app"</span>,<span class="st">"{{message}}"</span><span class="op">)</span>,</span>
<span> <span class="va">tags</span><span class="op">$</span><span class="fu">script</span><span class="op">(</span></span>
<span> <span class="st">"</span></span>
<span><span class="st"> var app = new Vue({</span></span>
<span><span class="st"> el: '#app',</span></span>
<span><span class="st"> data: {</span></span>
<span><span class="st"> message: 'Hello Vue!'</span></span>
<span><span class="st"> }</span></span>
<span><span class="st"> });</span></span>
<span><span class="st"> "</span></span>
<span> <span class="op">)</span></span>
<span> <span class="op">)</span></span>
<span><span class="op">)</span></span></code></pre></div>
<p><code>vueR</code> gives us an <code>htmlwidget</code> that can ease the code burden from above.</p>
<div class="sourceCode" id="cb4"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span><span class="kw"><a href="https://rdrr.io/r/base/library.html" class="external-link">library</a></span><span class="op">(</span><span class="va"><a href="https://github.com/vue-r/vueR" class="external-link">vueR</a></span><span class="op">)</span></span>
<span><span class="kw"><a href="https://rdrr.io/r/base/library.html" class="external-link">library</a></span><span class="op">(</span><span class="va"><a href="https://github.com/rstudio/htmltools" class="external-link">htmltools</a></span><span class="op">)</span></span>
<span></span>
<span><span class="co"># recreate Hello Vue! example</span></span>
<span><span class="fu"><a href="https://rstudio.github.io/htmltools/reference/browsable.html" class="external-link">browsable</a></span><span class="op">(</span></span>
<span> <span class="fu"><a href="https://rstudio.github.io/htmltools/reference/tagList.html" class="external-link">tagList</a></span><span class="op">(</span></span>
<span> <span class="va">tags</span><span class="op">$</span><span class="fu">div</span><span class="op">(</span>id<span class="op">=</span><span class="st">"app"</span>, <span class="st">"{{message}}"</span><span class="op">)</span>,</span>
<span> <span class="fu"><a href="reference/vue.html">vue</a></span><span class="op">(</span></span>
<span> <span class="fu"><a href="https://rdrr.io/r/base/list.html" class="external-link">list</a></span><span class="op">(</span></span>
<span> el <span class="op">=</span> <span class="st">"#app"</span>,</span>
<span> data <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html" class="external-link">list</a></span><span class="op">(</span></span>
<span> message <span class="op">=</span> <span class="st">"Hello Vue!"</span></span>
<span> <span class="op">)</span></span>
<span> <span class="op">)</span></span>
<span> <span class="op">)</span></span>
<span> <span class="op">)</span></span>
<span><span class="op">)</span></span></code></pre></div>
<p>Also, please check out additional <a href="https://github.com/vue-r/vueR/tree/master/inst/examples" class="external-link">examples</a> and <a href="https://github.com/vue-r/vueR/tree/master/inst/experiments" class="external-link">experiments</a>.</p>
</div>
<div class="section level3">
<h3 id="buildupdate">Build/Update<a class="anchor" aria-label="anchor" href="#buildupdate"></a>
</h3>
<p><code>vueR</code> is now part of a Github organization, and hopefully will be backed with interest by more than one (me) developer. For most <code>vueR</code> users, this section will not apply, but I would like to document the build/update step for new versions of <code>Vue</code>. In <a href="https://github.com/vue-r/vueR/blob/master/build/getvue.R" class="external-link"><code>getvue.R</code></a>, I created some functions for rapid download and deployment of new <code>Vue</code> versions. Running all of the code in <code>getvue.R</code> should update local minified and development versions of Vue and also update the version references in <code>vueR</code>.</p>
</div>
<div class="section level3">
<h3 id="code-of-conduct">Code of Conduct<a class="anchor" aria-label="anchor" href="#code-of-conduct"></a>
</h3>
<p>I would love for you to participate and help with <code>vueR</code>, but please note that this project is released with a <a href="https://github.com/vue-r/vueR/blob/master/CONDUCT.md" class="external-link">Contributor Code of Conduct</a>. By participating in this project you agree to abide by its terms.</p>
</div>
</div>
<div class="col-md-3 hidden-xs hidden-sm" id="pkgdown-sidebar">
<div class="links">
<h2 data-toc-skip>Links</h2>
<ul class="list-unstyled">
<li><a href="https://cloud.r-project.org/package=vueR" class="external-link">View on CRAN</a></li>
<li><a href="https://github.com/vue-r/vueR/" class="external-link">Browse source code</a></li>
<li><a href="https://github.com/vue-r/vueR/issues" class="external-link">Report a bug</a></li>
</ul>
</div>
<div class="license">
<h2 data-toc-skip>License</h2>
<ul class="list-unstyled">
<li><a href="LICENSE.html">Full license</a></li>
<li><small><a href="https://opensource.org/licenses/mit-license.php" class="external-link">MIT</a> + file <a href="LICENSE-text.html">LICENSE</a></small></li>
</ul>
</div>
<div class="citation">
<h2 data-toc-skip>Citation</h2>
<ul class="list-unstyled">
<li><a href="authors.html#citation">Citing vueR</a></li>
</ul>
</div>
<div class="developers">
<h2 data-toc-skip>Developers</h2>
<ul class="list-unstyled">
<li>Evan You <br><small class="roles"> Author, copyright holder </small> </li>
<li>Kent Russell <br><small class="roles"> Author, maintainer </small> </li>
<li><a href="authors.html">More about authors...</a></li>
</ul>
</div>
<div class="dev-status">
<h2 data-toc-skip>Dev status</h2>
<ul class="list-unstyled">
<li><a href="https://github.com/vue-r/vueR/actions" class="external-link"><img src="https://github.com/vue-r/vueR/workflows/R-CMD-check/badge.svg" alt="R-CMD-check"></a></li>
<li><a href="https://CRAN.R-project.org/package=vueR" class="external-link"><img src="https://www.r-pkg.org/badges/version/vueR" alt="CRAN status"></a></li>
</ul>
</div>
</div>
</div>
<footer><div class="copyright">
<p></p>
<p>Developed by Evan You, Kent Russell.</p>
</div>
<div class="pkgdown">
<p></p>
<p>Site built with <a href="https://pkgdown.r-lib.org/" class="external-link">pkgdown</a> 2.0.7.</p>
</div>
</footer>
</div>
</body>
</html>