最近学習VUEに費やさ、それは学習効果は常に、多くの知識をもたらし、システムの要約であるべきではない長い時間のために考えて、もっともらしい非常に明確されていないですが、また、一部には、いつもの断続的です思考は、ADOの上にJavaから変更され、ゆっくりとそれを学ぶしていません！
私はちょうど戻って見て時間を覚えていない、メモとしてそれを要約VUEを学ぶ準備ができています。
VUE公式文書：https://cn.vuejs.org
1.何がvue.jsです
実際には、Baiduは、あなたが説明の多くを知ることができ、ユーザーインターフェイスを構築するための漸進的なフレームワークである、Vueのは、Vueのコアライブラリは最初正直に言うと、唯一のビュー層に関係......、層アプリケーションによってボトムアップ層になるように設計されて私のために、直接、一時的に最初のスクリプトタグで導入されたように、同様のjqueryの上、使用サードパーティのライブラリとしてVUE JSを入れ、その後、特定の構文で[OK]を使用して、右に何を学ぶことがなかったです。
もちろん、これは私たちがゆっくりと、いくつかの概念で見てみましょうし、この中にどのようにしてWebPACKのパッケージ管理ツールとの統合、モジュール式の開発を学ぶ最も低い方法でバックです。
ノード：ノード、それは何ですか？私たちは、JSコードは、ブラウザ上で実行できることを知っているが、ないブラウザjsがそれを実行することはできませんか？もちろん、そうそこノード、ノードJSは、ブラウザの代替としてそれを理解することができ、ランタイム環境ですが、キーはjsのブラウザ後の制約を取り除くことで、あなたはJSとバックエンドを書くことができますコードは、例えば、あなたがプログラムを書いて、コンピューター上のポートでリスニングをされている実行している、実際には、サーバを書くことができ、外の世界は、要求、その後、このプログラムは、URL要求を受信するHTTP経由でポートにアクセスすることができ、URLパスに基づいて読み取りファイルを書き込み、その後、ユーザの要求に戻ります。
NPM：単純にサードパーティのライブラリをダウンロードするためのツールとして理解することができ、このツールを使って、あなたのプロジェクトで優れたサードパーティ製のライブラリを使用する場合は、唯一のコマンドは、NPM私XXX -s、ほとんどの比較的新しいノードできる必要がありますあなたが自分自身をダウンロードする必要はありませんので、すでにそれは、NPMが付属しています
WebPACKの：NPMは、モジュール式の開発に使用した場合、モジュール間の依存関係は非常に複雑であればあるため、ダウンロードした後、ページのロードまたは相互作用は、最適化性能に順に、多数の要求を起動するプロジェクトを行うことができます、あなたが使用する必要がありますこのようWebPACKのパケッタイザは、要求の数を減らすために、統合モジュールをパケット化します。、実際には、単純化ツールのパッケージの依存関係をマップを借ります
言葉では、ノードは、ランタイム環境で、NPMはWebPACKのは、最適化のパフォーマンスにツールをパッケージ化、ホイールを作成回避の重複にサードパーティ製のライブラリをダウンロードするためのツールです。
使用する2.vueシンプル
私たちは、最も単純なものから開始し、ちょうどhtmlファイルを作成し、W（゜O゜）wの力に、あまりにもディレクトリの初めから、VUE-cliの足場からフェイスマスクを開始していません
ここでは非常にこのことにより、推奨私のエディタの好意のvscode、である、私はこのエディタを使用する最大の理由は、軽量である（ドゥ間違っていない、vscodeフルネームはかなりのMicrosoft Visual Studioのような名前がある、Visual Studioのコードと呼ばれていますコード、いくつかのGの大きさ....）、そしてあなたが直接ダウンロードをプラグインするには、簡単に使用することに、当然のことながら、興味を持っことができますされもwebstormを使用するというように。
そして、vscodeのオープンで新しいHTMLファイルを作成します！+ Tabを迅速VUEのjsファイルを導入し、HTMLテンプレートを生成し、右のオプションは、デフォルトのブラウザが別のブラウザでHTMLやオープンで開きいることができますので、プラグインでたブラウザで開いvscodeをダウンロードします
シンプルVUEコード：
<！DOCTYPE HTML > < HTML LANG = "EN" > < 頭> < メタ文字コード= "UTF-8" > < メタ名= "ビューポート" コンテンツ= "幅=装置幅、初期の規模= 1.0" > < メタHTTP -equiv = "X-UA-互換性のある" コンテンツ= "IE =エッジ" > < タイトル>ドキュメント</ タイトル> <！ - 引入VUE的依赖文件- > <スクリプト> </ ヘッド> < 身体> < DIV ID = "アプリケーション" > {{}} //メッセージメッセージ変数はラップで、そこにある} {} { </ divの> < スクリプト> VAR のApp = 新しい新しいヴュー（ { EL：「#appは」、 // これは、DIVタグの上に選択された データ：{ メッセージ：「！ヴューこんにちは」 // 変数の割り当てメッセージは、メッセージラベルのdivにそこに同期されます } }） </ スクリプト> </ ボディ> </ HTML >
右、デフォルトのブラウザを開き、ブラウザこんにちはVueのを見ることができます！
簡単に、変数に包まれたHTMLタグ{{XXX}} VUE、最終的なインスタンスが作成さヴューとわずか3ステップ、第1導入VUEの依存関係を、必要、必要に応じて、この例ではラベル、変数値の定義その後、この変数の値は、HTMLタグに有効になります。
実際には、ここではそれはdocument.getElementsById（「アプリケーション」）。と等価であるInnerTextプロパティ=「こんにちはヴュー！」、しかしVUEの目的は、私たちが直接DOMノードを操作行かせないようにしようとすることで、私たちはライン上のラベルにデータを埋めるに焦点を当てる必要があります、ここでは、これらの単純なルックVUE一般的なコマンドにそれを理解します！
3.vue基本的な文法
私たちは、使用{{}} 2変数はインスタンスとVueのに関連付けられているこの事で表され、実際には、VUEは、私たちにいくつかのコマンドを与えました
私たちは、ノートにしたいこと：クラス=「{：命令は、このような古典的なV-バインドとして（boolean型を除く）VUE、すべての変数、関数、オブジェクトまたは式でバインドされている限り=「XXX」;可変であるノートマーク、文字列ではありません
3.1 V-バインドコマンド
命令は、この属性の値は、属性は、この非常に傷,!見つけることができませんVUEなりそうことを、任意のプロパティタグを結合することができる例： <a v-bind:href="url">をI Baiduの</a>の
タグ、V-バインドがコマンドにバインドされているのhrefこの属性は、そのHREFのurl属性の値は、このURLの、VUEの属性、Vueの例では、以下に示す我々は可能になっていることプロパティの割り当ては、非常に簡単ではありませんし、上記の速記ラベル<a :href="url"> I Baiduの</a>になった後、このコマンドは、つまり、結腸に省略することができます
XXX =「AAA」、その後、Vueの中で：私はすでにその属性ID、クラス、スタイル、SRC、およびプロパティは、同様の声明をのみを必要とすることができるので、V-バインド属性は任意のプロパティタグをバインドすることができ、と述べています属性データの例は、AAAに申告しました
3.2 V-のための指示
このコマンドは、多くの場合、簡単な例を与えること、を循環するために使用されます。
アプリの新しい新しいVueが= VAR（{
EL： '#app'、
データ：{//書籍の配列を定義
[{：書籍
名： "ロビンソン"、
価格：15
}、{
名： "ひょうたん"、
価格を。 ：7
}]
}
}）
< UL > < リチウムV-ため= "書籍ブックで" >タイトルである：{{book.name}} -------価格：book.price {{}} </ 李> </ UL >
3.3 V-IF命令
決定するための条件、もしV-場合=「フラグは」フラグが真である場合、ラベルは、それ以外の場合、例えば、表示されない、表示されています。
< H1 V-IF "をtrueには" = >あなたは私を見ることができない</ H1 > < H1 V-IF = "false"を>あなたが私を見ることができます。</ H1 >
もちろん、も可能V-場合がある属性があり、その効果は上記と同じです
这个指令和v-show用法一样，效果几乎一样，唯一的区别就是v-if指令为false时，那么该标签在html中根本就没有，而v-show即使为false，这个标签在html是存在的，只不过该标签使用style="display: none;"不显示出来，这也很好理解
3.4 v-model指令
注意，这个指令只会用在input标签中，换句话说只会用在表单中，举个例子,如下图，只要输入框中改变了什么，那么上面的显示也会跟着改变，而且也会用于表单信息收集，后面用到的时候再说
3.5 v-on指令
前面的几个指令都是绑定属性的，这个命令是绑定事件的，我们可以用这个命令来绑定一些事件函数；举个例子，绑定只要鼠标的点击事件,每一次点击按钮，counter的值就会加一，使得vue实例中的counter也会跟着加一，然后p标签又会时刻监听着counter的变化，所以最终的效果就是每点击一次按钮，屏幕中的数字就会变化加一
补充一下，v-on指令由于很常用，所以也有简写形式，就是@，比如上面的<button @click="counter += 1">Add 1</button>
到这里可以说vue的几个基本指令就说完了，还是很容易的，不知道大家有没有发现，我们现在的指令还只是涉及到了vue实例中的data中的属性，那么，在Vue实例中，除了el、data还有其他的属性吗？
4.vue实例的属性
vue实例的属性太多，我们就说说的常用属性，首先的就是在上面我们说到的el属性和data属性，这两个属性很好理解，el的全称是element，也就是标签嘛，这里用的id选择器选择指定标签，当然也可以用class选择器，自己可以试试；然后data属性表示在标签中要进行初始化的一些静态数据，注意，这里是静态数据；
然后我们要想办法让这些数据是动态的，于是就有了事件监听然后调用指定的函数，于是就有一个属性是methods，在面向对象的语言中，这些函数也叫做方法，这里的就是存放标签中监听的自定义的事件函数；
由于每一次标签中的数据发生变化，我们要动态显示的话，都用函数监听，那么每一次都会调用函数，虽然说可以实现基本功能，但是在某些特殊情况下，我们可以利用一个计算属性computed，这个属性有一个好处，就是可以使用缓存，比如计算属性中有个变量数据一直没有改变，那么下一次访问就直接返回缓存中的结果就行了，而函数的话每一次都会去执行一次；
还有就是在vue实例在实例化的过程中也会默认调用一些函数（这些函数不是在methods中的），这些函数是一些生命周期函数，大概分为三个部分，初始化的时候调用beforeCreate和created、beforedMount和mounted；更新数据的时候beforeUpdate和updated；销毁vue实例的时候beforeDestroy和destroy；
我们简单了解vue的生命周期，下面有个图从官网那里拿过来的，很经典的一个图：
下面我们就用简单的例子，简单看看使用一下这几个常用的属性和生命周期函数：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <input type="text" v-model="message" placeholder="随便输入什么内容"> <input type="submit" value="逆转按钮" @click = "reverseMsg"> <br> <div>计算属性为：{{msg}}</div> </div> <script> new Vue({ el: '#app', data: { message: '' }, methods:{ //这个方法作用是将字符串逆转 reverseMsg(){ return this.message = this.message.split('').reverse().join('') } }, computed:{ //这个计算属性，在这类就是将逆转的字符串后面加计算返回 msg(){ return this.message+"计算" } }, //以下都是生命周期函数的执行时机 beforeCreate(){ console.log("beforeCreate方法执行") }, created(){ console.log("create方法执行") }, beforeMount(){ console.log("beforedMount方法执行") }, mounted(){ console.log("mounted方法执行") }, beforeUpdate(){ console.log("beforeUpdate方法执行") }, updated(){ console.log("updated方法执行") }, //注意，下面两个直接用页面测试不出来，到后面使用了vue-cli之后就很好测试了 destoryed(){ console.log("destoryed方法执行"); }, beforeDestory(){ console.log("beforeDestory方法执行"); } }) </script> </body> </html>
可以看到，多次更新数据框中的数据都会调用更新的函数，而beforeCreate和created、beforedMount和mounted只会执行一次；beforeUpdate和updated会执行多次
具体的步骤：
在调用beforeCreate的时候，vue实例中的el，data，data中的message都为undefined；
调用created的时候，el还是undefined，而数据已经与data中的属性进行绑定（放在data中属性当值发生改变的同时，视图也会发生变化），一般可以在这里做初始数据的获取；
调用beforedMount，载入前（完成了data和el数据初始化），但是页面中的内容还是vue中的占位符，data中的message信息没有被挂在到Bom节点中，一般可以在这里做初始数据的获取；
调用mounted，载入后html已经渲染(ajax请求可以放在这个函数中)，把vue实例中的data里的message挂载到BOM节点中去；
调用beforeUpdate，更新前状态（html中的数据变化前，不是data中的数据改变前），重新渲染之前触发，然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom进行对比之后重新渲染；
调用updated,数据已经更改完成，dom也重新渲染完成
没记错的话还有一个监听属性没有说到，后面用到再说，其实监听属性暂时基本用不到，先放一下，还有几个动画的指令，有兴趣的自己研究一下；
5.vue组件
前面说了这么多都是一些基本用法，vue真正的精髓就是组件，可以有很多很多的组件，那么什么是组件呢？是一个js文件，还是一个css文件？
其实我认为组件是一个资源的集合，比如后面我们可能会用到的Element UI组件库中的组件，每一个组件都包括js，css，scss，image等资源组成，然后我们随时可以用这个组件放在我们的页面中，不需要我们去自己手写样式或者去复制别人的css、js代码了，实现了代码的重用性，极大的简化了开发；
当然我们这里会用到最简单的组件，组件中就是一个template属性（在模块化开发中组件是一个vue文件，里面有一个template标签，在这个标签里，可以用所有的html语法以及vue指令），例如下面的这样的：
<div id="app">
<!--至于怎么使用组件呢？可以直接用组件名当作标签使用就行了，注意，这里标签中可以使用vue指令-->
<template01></template01>
<template02></template02>
<div>{{message}}</div>
</div>
<script>
var template01 = {template: '<h1>这里是第一个自定义组件</h1>'}
var template02 = {template: '<h1>这里第二个自定义组件</h1>'}
//这里是第一种注册组件的做法，直接全局注册，也就是说子组件中还可以用组件2
Vue.component("template02",template02)
new Vue({
el: '#app',
data: {
message: 'hello vue'
},
//这是第二种注册组件的方式，但是这种方式是能在当前组件使用，这里相当于 "template01": template01
components:{
template01
}
})
</script>
如果是在组件化开发中，我们的组件是这种形式的，下图所示：
·· 这里还有一点需要说一下，上面我们使用了template01 组件，但是这个组件中是不能使用new Vue(xxx)这个里面的data数据的，因为取不到；
我们把当前的组件叫做父组件，template01 组件叫做子组件，现在我们需要传递数据，由于子组件无法使用父组件中的数据，于是我们可以在子组件使用一个props，然后父组件可以在<template01></template01>中使用vue指令绑定自定义属性，这样就将数据传到子组件的props中，然后子组件就可以随便使用props中的数据了；
举个简单的例子：
补充一下，不知道大家有没有觉得这个template属性比较熟悉，在前面应该见过，就是那个Vue生命周期的图中，有关于生命周期的具体详解我看了一篇博客讲的挺不错的，有兴趣的可以去看看，点击这里；
其实这里的template是vue的一个实例属性，就像data属性和el属性一样，实际上表示的是要渲染的模板，如果在Vue中没有声明这个属性template，默认就把el属性指向的标签当作template去解析；否则只解析Vue中的template属性对应的标签内容，此时el对应的标签不会解析
<div id="app">
<div>外面的模板：{{message}}</div>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'hello vue'
},
//注意，此时不管这个div中没有没id="app"都一样，只会默认解析这个模板，然后渲染数据
template:'<div><p>template属性对应的模板：{{message}}</p></div>'
})
</script>
显示的结果是：
由此可以知道Vue实例中的template属性优先级更高，不过这个属性很少用到。。。
6.总结
多了解Vue的声明周期以及vue基础知识很重要，然后在使用vue的过程中学会了很多的东西，慢慢学吧，这次只是简单的看了一下基础知识，下一次就好好的用vue-cli构建项目，然后快速开发一些东西