You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<p>In 2.2.0+, this hook also captures errors in component lifecycle hooks. Also, when this hook is <code>undefined</code>, captured errors will be logged with <code>console.error</code> instead of crashing the app.</p>
361
361
<p>In 2.4.0+ this hook also captures errors thrown inside Vue custom event handlers.</p>
362
-
<p><ahref="https://sentry.io" target="_blank" rel="noopener">Sentry</a>, an error tracking service, provides <ahref="https://sentry.io/for/vue/" target="_blank" rel="noopener">official integration</a> using this option.</p>
362
+
<p>Error tracking services <ahref="https://sentry.io/for/vue/" target="_blank" rel="noopener">Sentry</a> and <ahref="https://docs.bugsnag.com/platforms/browsers/vue/" target="_blank" rel="noopener">Bugsnag</a> provide official integrations using this option.</p>
<p>The <code>.exact</code> modifier should be used in combination with other system modifiers to indicate that the exact combination of modifiers must be pressed for the handler to fire.</p>
978
-
<figureclass="highlight html"><table><tr><tdclass="code"><pre><spanclass="line"><spanclass="comment"><!-- this will fire even if Alt or Shift is also pressed --></span></span><br><spanclass="line"><spanclass="tag"><<spanclass="name">button</span> @<spanclass="attr">click.ctrl</span>=<spanclass="string">"onClick"</span>></span>A<spanclass="tag"></<spanclass="name">button</span>></span></span><br><spanclass="line"></span><br><spanclass="line"><spanclass="comment"><!-- this will only fire when only Ctrl is pressed --></span></span><br><spanclass="line"><spanclass="tag"><<spanclass="name">button</span> @<spanclass="attr">click.ctrl.exact</span>=<spanclass="string">"onCtrlClick"</span>></span>A<spanclass="tag"></<spanclass="name">button</span>></span></span><br></pre></td></tr></table></figure>
977
+
<p>The <code>.exact</code> modifier allows control of the exact combination of system modifiers needed to trigger an event.</p>
978
+
<figureclass="highlight html"><table><tr><tdclass="code"><pre><spanclass="line"><spanclass="comment"><!-- this will fire even if Alt or Shift is also pressed --></span></span><br><spanclass="line"><spanclass="tag"><<spanclass="name">button</span> @<spanclass="attr">click.ctrl</span>=<spanclass="string">"onClick"</span>></span>A<spanclass="tag"></<spanclass="name">button</span>></span></span><br><spanclass="line"></span><br><spanclass="line"><spanclass="comment"><!-- this will only fire when Ctrl and no other keys are pressed --></span></span><br><spanclass="line"><spanclass="tag"><<spanclass="name">button</span> @<spanclass="attr">click.ctrl.exact</span>=<spanclass="string">"onCtrlClick"</span>></span>A<spanclass="tag"></<spanclass="name">button</span>></span></span><br><spanclass="line"></span><br><spanclass="line"><spanclass="comment"><!-- this will only fire when no system modifiers are pressed --></span></span><br><spanclass="line"><spanclass="tag"><<spanclass="name">button</span> @<spanclass="attr">click.exact</span>=<spanclass="string">"onClick"</span>></span>A<spanclass="tag"></<spanclass="name">button</span>></span></span><br></pre></td></tr></table></figure>
<h2id="Value-Bindings"><ahref="#Value-Bindings" class="headerlink" title="Value Bindings"></a>Value Bindings</h2><p>For radio, checkbox and select options, the <code>v-model</code> binding values are usually static strings (or booleans for checkbox):</p>
1018
1018
<figureclass="highlight html"><table><tr><tdclass="code"><pre><spanclass="line"><spanclass="comment"><!-- `picked` is a string "a" when checked --></span></span><br><spanclass="line"><spanclass="tag"><<spanclass="name">input</span><spanclass="attr">type</span>=<spanclass="string">"radio"</span><spanclass="attr">v-model</span>=<spanclass="string">"picked"</span><spanclass="attr">value</span>=<spanclass="string">"a"</span>></span></span><br><spanclass="line"></span><br><spanclass="line"><spanclass="comment"><!-- `toggle` is either true or false --></span></span><br><spanclass="line"><spanclass="tag"><<spanclass="name">input</span><spanclass="attr">type</span>=<spanclass="string">"checkbox"</span><spanclass="attr">v-model</span>=<spanclass="string">"toggle"</span>></span></span><br><spanclass="line"></span><br><spanclass="line"><spanclass="comment"><!-- `selected` is a string "abc" when selected --></span></span><br><spanclass="line"><spanclass="tag"><<spanclass="name">select</span><spanclass="attr">v-model</span>=<spanclass="string">"selected"</span>></span></span><br><spanclass="line"><spanclass="tag"><<spanclass="name">option</span><spanclass="attr">value</span>=<spanclass="string">"abc"</span>></span>ABC<spanclass="tag"></<spanclass="name">option</span>></span></span><br><spanclass="line"><spanclass="tag"></<spanclass="name">select</span>></span></span><br></pre></td></tr></table></figure>
1019
1019
<p>But sometimes we may want to bind the value to a dynamic property on the Vue instance. We can use <code>v-bind</code> to achieve that. In addition, using <code>v-bind</code> allows us to bind the input value to non-string values.</p>
<figureclass="highlight js"><table><tr><tdclass="code"><pre><spanclass="line"><spanclass="comment">// when checked:</span></span><br><spanclass="line">vm.toggle === vm.a</span><br><spanclass="line"><spanclass="comment">// when unchecked:</span></span><br><spanclass="line">vm.toggle === vm.b</span><br></pre></td></tr></table></figure>
<figureclass="highlight js"><table><tr><tdclass="code"><pre><spanclass="line"><spanclass="comment">// when checked:</span></span><br><spanclass="line">vm.toggle === <spanclass="string">'yes'</span></span><br><spanclass="line"><spanclass="comment">// when unchecked:</span></span><br><spanclass="line">vm.toggle === <spanclass="string">'no'</span></span><br></pre></td></tr></table></figure>
1022
+
<pclass="tip">The <code>true-value</code> and <code>false-value</code> attributes don’t affect the input’s <code>value</code> attribute, because browsers don’t include unchecked boxes in form submissions. To guarantee that one of two values is submitted in a form (e.g. “yes” or “no”), use radio inputs instead.</p>
<h2id="Getting-Started"><ahref="#Getting-Started" class="headerlink" title="Getting Started"></a>Getting Started</h2><pclass="tip">The official guide assumes intermediate level knowledge of HTML, CSS, and JavaScript. If you are totally new to frontend development, it might not be the best idea to jump right into a framework as your first step - grasp the basics then come back! Prior experience with other frameworks helps, but is not required.</p>
850
850
851
851
<p>The easiest way to try out Vue.js is using the <ahref="https://jsfiddle.net/chrisvfritz/50wL7mdz/" target="_blank" rel="noopener">JSFiddle Hello World example</a>. Feel free to open it in another tab and follow along as we go through some basic examples. Or, you can <ahref="https://gist.githubusercontent.com/chrisvfritz/7f8d7d63000b48493c336e48b3db3e52/raw/ed60c4e5d5c6fec48b0921edaed0cb60be30e87c/index.html" target="_blank" download="index.html">create an <code>index.html</code> file</a> and include Vue with:</p>
<p>The <ahref="installation.html">Installation</a> page provides more options of installing Vue. Note: We <strong>do not</strong> recommend that beginners start with <code>vue-cli</code>, especially if you are not yet familiar with Node.js-based build tools.</p>
854
854
<h2id="Declarative-Rendering"><ahref="#Declarative-Rendering" class="headerlink" title="Declarative Rendering"></a>Declarative Rendering</h2><p>At the core of Vue.js is a system that enables us to declaratively render data to the DOM using straightforward template syntax:</p>
Copy file name to clipboardExpand all lines: v2/guide/installation.html
+3-3Lines changed: 3 additions & 3 deletions
Original file line number
Diff line number
Diff line change
@@ -845,16 +845,16 @@ <h2>
845
845
<h1>Installation</h1>
846
846
847
847
<h3id="Compatibility-Note"><ahref="#Compatibility-Note" class="headerlink" title="Compatibility Note"></a>Compatibility Note</h3><p>Vue does <strong>not</strong> support IE8 and below, because it uses ECMAScript 5 features that are un-shimmable in IE8. However it supports all <ahref="http://caniuse.com/#feat=es5" target="_blank" rel="noopener">ECMAScript 5 compliant browsers</a>.</p>
<p>Detailed release notes for each version are available on <ahref="https://github.com/vuejs/vue/releases" target="_blank" rel="noopener">GitHub</a>.</p>
850
850
<h2id="Vue-Devtools"><ahref="#Vue-Devtools" class="headerlink" title="Vue Devtools"></a>Vue Devtools</h2><p>When using Vue, we recommend also installing the <ahref="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">Vue Devtools</a> in your browser, allowing you to inspect and debug your Vue applications in a more user-friendly interface.</p>
851
851
<h2id="Direct-lt-script-gt-Include"><ahref="#Direct-lt-script-gt-Include" class="headerlink" title="Direct <script> Include"></a>Direct <code><script></code> Include</h2><p>Simply download and include with a script tag. <code>Vue</code> will be registered as a global variable.</p>
852
852
<pclass="tip">Don’t use the minified version during development. You will miss out on all the nice warnings for common mistakes!</p>
853
853
854
-
<divid="downloads"><br><aclass="button" href="/js/vue.js" download="">Development Version</a><spanclass="light info">With full warnings and debug mode</span><br><br><aclass="button" href="/js/vue.min.js" download="">Production Version</a><spanclass="light info">Warnings stripped, 30.95KB min+gzip</span><br></div>
854
+
<divid="downloads"><br><aclass="button" href="/js/vue.js" download="">Development Version</a><spanclass="light info">With full warnings and debug mode</span><br><br><aclass="button" href="/js/vue.min.js" download="">Production Version</a><spanclass="light info">Warnings stripped, 30.59KB min+gzip</span><br></div>
855
855
856
856
<h3id="CDN"><ahref="#CDN" class="headerlink" title="CDN"></a>CDN</h3><p>Recommended: <ahref="https://cdn.jsdelivr.net/npm/vue" target="_blank" rel="noopener">https://cdn.jsdelivr.net/npm/vue</a>, which will reflect the latest version as soon as it is published to npm. You can also browse the source of the npm package at <ahref="https://cdn.jsdelivr.net/npm/vue/" target="_blank" rel="noopener">https://cdn.jsdelivr.net/npm/vue/</a>.</p>
857
-
<p>Also available on <ahref="https://unpkg.com/vue" target="_blank" rel="noopener">unpkg</a> and <ahref="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.js" target="_blank" rel="noopener">cdnjs</a> (cdnjs takes some time to sync so the latest release may not be available yet).</p>
857
+
<p>Also available on <ahref="https://unpkg.com/vue" target="_blank" rel="noopener">unpkg</a> and <ahref="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.11/vue.js" target="_blank" rel="noopener">cdnjs</a> (cdnjs takes some time to sync so the latest release may not be available yet).</p>
858
858
<h2id="NPM"><ahref="#NPM" class="headerlink" title="NPM"></a>NPM</h2><p>NPM is the recommended installation method when building large scale applications with Vue. It pairs nicely with module bundlers such as <ahref="https://webpack.js.org/" target="_blank" rel="noopener">Webpack</a> or <ahref="http://browserify.org/" target="_blank" rel="noopener">Browserify</a>. Vue also provides accompanying tools for authoring <ahref="single-file-components.html">Single File Components</a>.</p>
<h2id="CLI"><ahref="#CLI" class="headerlink" title="CLI"></a>CLI</h2><p>Vue.js provides an <ahref="https://github.com/vuejs/vue-cli" target="_blank" rel="noopener">official CLI</a> for quickly scaffolding ambitious Single Page Applications. It provides batteries-included build setups for a modern frontend workflow. It takes only a few minutes to get up and running with hot-reload, lint-on-save, and production-ready builds:</p>
<p>Sometimes you may want to assign a number of new properties to an existing object, for example using <code>Object.assign()</code> or <code>_.extend()</code>. In such cases, you should create a fresh object with properties from both objects. So instead of:</p>
<p>Note: in versions before 2.3.0, the <code>props</code> option is required if you wish to accept props in a functional component. In 2.3.0+ you can omit the <code>props</code> option and all attributes found on the component node will be implicitly extracted as props.</p>
972
972
</blockquote>
973
+
<p>In 2.5.0+, if you are using <ahref="single-file-components.html">single-file components</a>, template-based functional components can be declared with:</p>
0 commit comments