VSCode+Vue|用vscode开发vue页面|vue入门

vue入门

• 安装vscode编译器
• 创建一个文件，命名为 vue.html并且引入vue.min.js
  
  vue.min.js文件如下

/*!
 - Vue.js v2.5.17
 - (c) 2014-2018 Evan You
 - Released under the MIT License.
 */
!function(e,t){
   "object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.Vue=t()}(this,function(){
   "use strict";var y=Object.freeze({
   });function M(e){
   return null==e}function D(e){
   return null!=e}function S(e){
   return!0===e}function T(e){
   return"string"==typeof e||"number"==typeof e||"symbol"==typeof e||"boolean"==typeof e}function P(e){
   return null!==e&&"object"==typeof e}var r=Object.prototype.toString;function l(e){
   return"[object Object]"===r.call(e)}function i(e){
   var t=parseFloat(String(e));return 0<=t&&Math.floor(t)===t&&isFinite(e)}function t(e){
   return null==e?"":"object"==typeof e?JSON.stringify(e,null,2):String(e)}function F(e){
   var t=parseFloat(e);return isNaN(t)?e:t}function s(e,t){
   for(var n=Object.create(null),r=e.split(","),i=0;i<r.length;i++)n[r[i]]=!0;return t?function(e){
   return n[e.toLowerCase()]}:function(e){
   return n[e]}}var c=s("slot,component",!0),u=s("key,ref,slot,slot-scope,is");function f(e,t){
   if(e.length){
   var n=e.indexOf(t);if(-1<n)return e.splice(n,1)}}var n=Object.prototype.hasOwnProperty;function p(e,t){
   return n.call(e,t)}function e(t){
   var n=Object.create(null);return function(e){
   return n[e]||(n[e]=t(e))}}var o=/-(\w)/g,g=e(function(e){
   return e.replace(o,function(e,t){
   return t?t.toUpperCase():""})}),d=e(function(e){
   return e.charAt(0).toUpperCase()+e.slice(1)}),a=/\B([A-Z])/g,_=e(function(e){
   return e.replace(a,"-$1").toLowerCase()});var v=Function.prototype.bind?function(e,t){
   return e.bind(t)}:function(n,r){
   function e(e){
   var t=arguments.length;return t?1<t?n.apply(r,arguments):n.call(r,e):n.call(r)}return e._length=n.length,e};function h(e,t){
   t=t||0;for(var n=e.length-t,r=new Array(n);n--;)r[n]=e[n+t];return r}function m(e,t){
   for(var n in t)e[n]=t[n];return e}function b(e){
   for(var t={
   },n=0;n<e.length;n++)e[n]&&m(t,e[n]);return t}function $(e,t,n){
   }var O=function(e,t,n){
   return!1},w=function(e){
   return e};function C(t,n){
   if(t===n)return!0;var e=P(t),r=P(n);if(!e||!r)return!e&&!r&&String(t)===String(n);try{
   var i=Array.isArray(t),o=Array.isArray(n);if(i&&o)return t.length===n.length&&t.every(function(e,t){
   return C(e,n[t])});if(i||o)return!1;var a=Object.keys(t),s=Object.keys(n);return a.length===s.length&&a.every(function(e){
   return C(t[e],n[e])})}catch(e){
   return!1}}function x(e,t){
   for(var n=0;n<e.length;n++)if(C(e[n],t))return n;return-1}function R(e){
   var t=!1;return function(){
   t||(t=!0,e.apply(this,arguments))}}var E="data-server-rendered",k=["component","directive","filter"],A=["beforeCreate","created","beforeMount","mounted","beforeUpdate","updated","beforeDestroy","destroyed","activated","deactivated","errorCaptured"],j={
   optionMergeStrategies:Object.create(null),silent:!1,productionTip:!1,devtools:!1,performance:!1,errorHandler:null,warnHandler:null,ignoredElements:[],keyCodes:Object.create(null),isReservedTag:O,isReservedAttr:O,isUnknownElement:O,getTagNamespace:$,parsePlatformTagName:w,mustUseProp:O,_lifecycleHooks:A};function N(e,t,n,r){
   Object.defineProperty(e,t,{
   value:n,enumerable:!!r,writable:!0,configurable:!0})}var L=/[^\w.$]/;var I,H="__proto__"in{
   },B="undefined"!=typeof window,U="undefined"!=typeof WXEnvironment&&!!WXEnvironment.platform,V=U&&WXEnvironment.platform.toLowerCase(),z=B&&window.navigator.userAgent.toLowerCase(),K=z&&/msie|trident/.test(z),J=z&&0<z.indexOf("msie 9.0"),q=z&&0<z.indexOf("edge/"),W=(z&&z.indexOf("android"),z&&/iphone|ipad|ipod|ios/.test(z)||"ios"===V),G=(z&&/chrome\/\d+/.test(z),{
   }.watch),Z=!1;if(B)try{
   var X={
   };Object.defineProperty(X,"passive",{
   get:function(){
   Z=!0}}),window.addEventListener("test-passive",null,X)}catch(e){
   }var Y=function(){
   return void 0===I&&(I=!B&&!U&&"undefined"!=typeof global&&"server"===global.process.env.VUE_ENV),I},Q=B&&window.__VUE_DEVTOOLS_GLOBAL_HOOK__;function ee(e){
   return"function"==typeof e&&/native code/.test(e.toString())}var te,ne="undefined"!=typeof Symbol&&ee(Symbol)&&"undefined"!=typeof Reflect&&ee(Reflect.ownKeys);te="undefined"!=typeof Set&&ee(Set)?Set:function(){
   function e(){
   this.set=Object.create(null)}return e.prototype.has=function(e){
   return!0===this.set[e]},e.prototype.add=function(e){
   this.set[e]=!0},e.prototype.clear=function(){
   this.set=Object.create(null)},e}();var re=$,ie=0,oe=function(){
   this.id=ie++,this.subs=[]};oe.prototype.addSub=function(e){
   this.subs.push(e)},oe.prototype.removeSub=function(e){
   f(this.subs,e)},oe.prototype.depend=function(){
   oe.target&&oe.target.addDep(this)},oe.prototype.notify=function(){
   for(var e=this.subs.slice(),t=0,n=e.length;t<n;t++)e[t].update()},oe.target=null;var ae=[];function se(e){
   oe.target&&ae.push(oe.target),oe.target=e}function ce(){
   oe.target=ae.pop()}var le=function(e,t,n,r,i,o,a,s){
   this.tag=e,this.data=t,this.children=n,this.text=r,this.elm=i,this.ns=void 0,this.context=o,this.fnContext=void 0,this.fnOptions=void 0,this.fnScopeId=void 0,this.key=t&&t.key,this.componentOptions=a,this.componentInstance=void 0,this.parent=void 0,this.raw=!1,this.isStatic=!1,this.isRootInsert=!0,this.isComment=!1,this.isCloned=!1,this.isOnce=!1,this.asyncFactory=s,this.asyncMeta=void 0,this.isAsyncPlaceholder=!1},ue={
   child:{
   configurable:!0}};ue.child.get=function(){
   return this.componentInstance},Object.defineProperties(le.prototype,ue);var fe=function(e){
   void 0===e&&(e="");var t=new le;return t.text=e,t.isComment=!0,t};function pe(e){
   return new le(void 0,void 0,void 0,String(e))}function de(e){
   var t=new le(e.tag,e.data,e.children,e.text,e.elm,e.context,e.componentOptions,e.asyncFactory);return t.ns=e.ns,t.isStatic=e.isStatic,t.key=e.key,t.isComment=e.isComment,t.fnContext=e.fnContext,t.fnOptions=e.fnOptions,t.fnScopeId=e.fnScopeId,t.isCloned=!0,t}var ve=Array.prototype,he=Object.create(ve);["push","pop","shift","unshift","splice","sort","reverse"].forEach(function(o){
   var a=ve[o];N(he,o,function(){
   for(var e=[],t=arguments.length;t--;)e[t]=arguments[t];var n,r=a.apply(this,e),i=this.__ob__;switch(o){
   case"push":case"unshift":n=e;break;case"splice":n=e.slice(2)}return n&&i.observeArray(n),i.dep.notify(),r})});var me=Object.getOwnPropertyNames(he),ye=!0;function ge(e){
   ye=e}var _e=function(e){
   (this.value=e,this.dep=new oe,this.vmCount=0,N(e,"__ob__",this),Array.isArray(e))?((H?be:$e)(e,he,me),this.observeArray(e)):this.walk(e)};function be(e,t,n){
   e.__proto__=t}function $e(e,t,n){
   for(var r=0,i=n.length;r<i;r++){
   var o=n[r];N(e,o,t[o])}}function we(e,t){
   var n;if(P(e)&&!(e instanceof le))return p(e,"__ob__")&&e.__ob__ instanceof _e?n=e.__ob__:ye&&!Y()&&(Array.isArray(e)||l(e))&&Object.isExtensible(e)&&!e._isVue&&(n=new _e(e)),t&&n&&n.vmCount++,n}function Ce(n,e,r,t,i){
   var o=new oe,a=Object.getOwnPropertyDescriptor(n,e);if(!a||!1!==a.configurable){
   var s=a&&a.get;s||2!==arguments.length||(r=n[e]);var c=a&&a.set,l=!i&&we(r);Object.defineProperty(n,e,{
   enumerable:!0,configurable:!0,get:function(){
   var e=s?s.call(n):r;return oe.target&&(o.depend(),l&&(l.dep.depend(),Array.isArray(e)&&function e(t){
   for(var n=void 0,r=0,i=t.length;r<i;r++)(n=t[r])&&n.__ob__&&n.__ob__.dep.depend(),Array.isArray(n)&&e(n)}(e))),e},set:function(e){
   var t=s?s.call(n):r;e===t||e!=e&&t!=t||(c?c.call(n,e):r=e,l=!i&&we(e),o.notify())}})}}function xe(e,t,n){
   if(Array.isArray(e)&&i(t))return e.length=Math.max(e.length,t),e.splice(t,1,n),n;if(t in e&&!(t in Object.prototype))return e[t]=n;var r=e.__ob__;return e._isVue||r&&r.vmCount?n:r?(Ce(r.value,t,n),r.dep.notify(),n):e[t]=n}function ke(e,t){
   if(Array.isArray(e)&&i(t))e.splice(t,1);else{
   var n=e.__ob__;e._isVue||n&&n.vmCount||p(e,t)&&(delete e[t],n&&n.dep.notify())}}_e.prototype.walk=function(e){
   for(var t=Object.keys(e),n=0;n<t.length;n++)Ce(e,t[n])},_e.prototype.observeArray=function(e){
   for(var t=0,n=e.length;t<n;t++)we(e[t])};var Ae=j.optionMergeStrategies;function Oe(e,t){
   if(!t)return e;for(var n,r,i,o=Object.keys(t),a=0;a<o.length;a++)r=e[n=o[a]],i=t[n],p(e,n)?l(r)&&l(i)&&Oe(r,i):xe(e,n,i);return e}function Se(n,r,i){
   return i?function(){
   var e="function"==typeof r?r.call(i,i):r,t="function"==typeof n?n.call(i,i):n;return e?Oe(e,t):t}:r?n?function(){
   return Oe("function"==typeof r?r.call(this,this):r,"function"==typeof n?n.call(this,this):n)}:r:n}function Te(e,t){
   return t?e?e.concat(t):Array.isArray(t)?t:[t]:e}function Ee(e,t,n,r){
   var i=Object.create(e||null);return t?m(i,t):i}Ae.data=function(e,t,n){
   return n?Se(e,t,n):t&&"function"!=typeof t?e:Se(e,t)},A.forEach(function(e){
   Ae[e]=Te}),k.forEach(function(e){
   Ae[e+"s"]=Ee}),Ae.watch=function(e,t,n,r){
   if(e===G&&(e=void 0),t===G&&(t=void 0),!t)return Object.create(e||null);if(!e)return t;var i={
   };for(var o in m(i,e),t){
   var a=i[o],s=t[o];a&&!Array.isArray(a)&&(a=[a]),i[o]=a?a.concat(s):Array.isArray(s)?s:[s]}return i},Ae.props=Ae.methods=Ae.inject=Ae.computed=function(e,t,n,r){
   if(!e)return t;var i=Object.create(null);return m(i,e),t&&m(i,t),i},Ae.provide=Se;var je=function(e,t){
   return void 0===t?e:t};function Ne(n,r,i){
   "function"==typeof r&&(r=r.options),function(e,t){
   var n=e.props;if(n){
   var r,i,o={
   };if(Array.isArray(n))for(r=n.length;r--;)"string"==typeof(i=n[r])&&(o[g(i)]={
   type:null});else if(l(n))for(var a in n)i=n[a],o[g(a)]=l(i)?i:{
   type:i};e.props=o}}(r),function(e,t){
   var n=e.inject;if(n){
   var r=e.inject={
   };if(Array.isArray(n))for(var i=0;i<n.length;i++)r[n[i]]={
   from:n[i]};else if(l(n))for(var o in n){
   var a=n[o];r[o]=l(a)?m({
   from:o},a):{
   from:a}}}}(r),function(e){
   var t=e.directives;if(t)for(var n in t){
   var r=t[n];"function"==typeof r&&(t[n]={
   bind:r,update:r})}}(r);var e=r.extends;if(e&&(n=Ne(n,e,i)),r.mixins)for(var t=0,o=r.mixins.length;t<o;t++)n=Ne(n,r.mixins[t],i);var a,s={
   };for(a in n)c(a);for(a in r)p(n,a)||c(a);function c(e){
   var t=Ae[e]||je;s[e]=t(n[e],r[e],i,e)}return s}function Le(e,t,n,r){
   if("string"==typeof n){
   var i=e[t];if(p(i,n))return i[n];var o=g(n);if(p(i,o))return i[o];var a=d(o);return p(i,a)?i[a]:i[n]||i[o]||i[a]}}function Ie(e,t,n,r){
   var i=t[e],o=!p(n,e),a=n[e],s=Pe(Boolean,i.type);if(-1<s)if(o&&!p(i,"default"))a=!1;else if(""===a||a===_(e)){
   var c=Pe(String,i.type);(c<0||s<c)&&(a=!0)}if(void 0===a){
   a=function(e,t,n){
   if(!p(t,"default"))return;var r=t.default;if(e&&e.$options.propsData&&void 0===e.$options.propsData[n]&&void 0!==e._props[n])return e._props[n];return"function"==typeof r&&"Function"!==Me(t.type)?r.call(e):r}(r,i,e);var l=ye;ge(!0),we(a),ge(l)}return a}function Me(e){
   var t=e&&e.toString().match(/^\s*function (\w+)/);return t?t[1]:""}function De(e,t){
   return Me(e)===Me(t)}function Pe(e,t){
   if(!Array.isArray(t))return De(t,e)?0:-1;for(var n=0,r=t.length;n<r;n++)if(De(t[n],e))return n;return-1}function Fe(e,t,n){
   if(t)for(var r=t;r=r.$parent;){
   var i=r.$options.errorCaptured;if(i)for(var o=0;o<i.length;o++)try{
   if(!1===i[o].call(r,e,t,n))return}catch(e){
   Re(e,r,"errorCaptured hook")}}Re(e,t,n)}function Re(e,t,n){
   if(j.errorHandler)try{
   return j.errorHandler.call(null,e,t,n)}catch(e){
   He(e,null,"config.errorHandler")}He(e,t,n)}function He(e,t,n){
   if(!B&&!U||"undefined"==typeof console)throw e;console.error(e)}var Be,Ue,Ve=[],ze=!1;function Ke(){
   ze=!1;for(var e=Ve.slice(0),t=Ve.length=0;t<e.length;t++)e[t]()}var Je=!1;if("undefined"!=typeof setImmediate&&ee(setImmediate))Ue=function(){
   setImmediate(Ke)};else if("undefined"==typeof MessageChannel||!ee(MessageChannel)&&"[object MessageChannelConstructor]"!==MessageChannel.toString())Ue=function(){
   setTimeout(Ke,0)};else{
   var qe=new MessageChannel,We=qe.port2;qe.port1.onmessage=Ke,Ue=function(){
   We.postMessage(1)}}if("undefined"!=typeof Promise&&ee(Promise)){
   var Ge=Promise.resolve();Be=function(){
   Ge.then(Ke),W&&setTimeout($)}}else Be=Ue;function Ze(e,t){
   var n;if(Ve.push(function(){
   if(e)try{
   e.call(t)}catch(e){
   Fe(e,t,"nextTick")}else n&&n(t)}),ze||(ze=!0,Je?Ue():Be()),!e&&"undefined"!=typeof Promise)return new Promise(function(e){
   n=e})}var Xe=new te;function Ye(e){
   !function e(t,n){
   var r,i;var o=Array.isArray(t);if(!o&&!P(t)||Object.isFrozen(t)||t instanceof le)return;if(t.__ob__){
   var a=t.__ob__.dep.id;if(n.has(a))return;n.add(a)}if(o)for(r=t.length;r--;)e(t[r],n);else for(i=Object.keys(t),r=i.length;r--;)e(t[i[r]],n)}(e,Xe),Xe.clear()}var Qe,et=e(function(e){
   var t="&"===e.charAt(0),n="~"===(e=t?e.slice(1):e).charAt(0),r="!"===(e=n?e.slice(1):e).charAt(0);return{
   name:e=r?e.slice(1):e,once:n,capture:r,passive:t}});function tt(e){
   function i(){
   var e=arguments,t=i.fns;if(!Array.isArray(t))return t.apply(null,arguments);for(var n=t.slice(),r=0;r<n.length;r++)n[r].apply(null,e)}return i.fns=e,i}function nt(e,t,n,r,i){
   var o,a,s,c;for(o in e)a=e[o],s=t[o],c=et(o),M(a)||(M(s)?(M(a.fns)&&(a=e[o]=tt(a)),n(c.name,a,c.once,c.capture,c.passive,c.params)):a!==s&&(s.fns=a,e[o]=s));for(o in t)M(e[o])&&r((c=et(o)).name,t[o],c.capture)}function rt(e,t,n){
   var r;e instanceof le&&(e=e.data.hook||(e.data.hook={
   }));var i=e[t];function o(){
   n.apply(this,arguments),f(r.fns,o)}M(i)?r=tt([o]):D(i.fns)&&S(i.merged)?(r=i).fns.push(o):r=tt([i,o]),r.merged=!0,e[t]=r}function it(e,t,n,r,i){
   if(D(t)){
   if(p(t,n))return e[n]=t[n],i||delete t[n],!0;if(p(t,r))return e[n]=t[r],i||delete t[r],!0}return!1}function ot(e){
   return T(e)?[pe(e)]:Array.isArray(e)?function e(t,n){
   var r=[];var i,o,a,s;for(i=0;i<t.length;i++)M(o=t[i])||"boolean"==typeof o||(a=r.length-1,s=r[a],Array.isArray(o)?0<o.length&&(at((o=e(o,(n||"")+"_"+i))[0])&&at(s)&&(r[a]=pe(s.text+o[0].text),o.shift()),r.push.apply(r,o)):T(o)?at(s)?r[a]=pe(s.text+o):""!==o&&r.push(pe(o)):at(o)&&at(s)?r[a]=pe(s.text+o.text):(S(t._isVList)&&D(o.tag)&&M(o.key)&&D(n)&&(o.key="__vlist"+n+"_"+i+"__"),r.push(o)));return r}(e):void 0}function at(e