Vueについてjsのこと

11452 ワード
先端開発
15年から、各フォーラム技の中で、Vueと.jsという関連語の内容は爆発的に増加し、先端技術の成長率の中で独占的に騒ぎ、急速に先端3大企業の1つになった.あるコミュニティで「GoogleのAngular、FacebookのReact、オープンソースコミュニティのVue.js」、Vueを紹介した人がいたのを覚えています.jsの成功はみんなが見ていることだ.
フロントエンドフレームワークの発展過程を振り返ると、2006年にJQueryが発表されてから11年が経ち、その輝きも過ぎ去った.現在のバージョンのJQueryは未来にかつての地位を持つことはない.2012年以降、W 3 Cの推進に伴って新しい性質のフレームワークが現れ、彼らは一歩一歩JQueryの同時期のフレームワークの位置を占めている.多くの枠組みは歴史の長い川の中で隠れている.
Vue.jsは2016年に台頭し、NGも新しいバージョン2を発表し、先端の世界は東漢末年の三国鼎立期に戻ったようだ(React Native、Vue.js、NG).前端のこの道は、いったん离れたら简単に帰ってくることができなくて、爆発的な成长は私达にいつも新しい潮流を迎える准备をしなければならなくて、未来はどのように谁も知らないで、しかし今、私はVueを信じます.jsは世界に類を見ない刃であり、私たちが先端の道で棘を切るのを助けることができる.
Vue.js及び関連情報紹介Vue.jsの創始者は国人尤雨渓である.なぜこのようなフレームワークを開発したのかについては、ネット上でも様々な説がある.
2012年初め、36 Krは著者に関連記事を掲載し、「Evenはこの行動を通じて科学技術会社の注意を引き起こし、オリーブの枝を伸ばしたい」と話した.著者の尤雨渓の微博、Twitter、個人サイトを添付した.作者のやり方は、皆さんが参考にして、Vueをマスターすべきだと思います.js、気になる会社に気づかせます.
Vueについては知っている.jsの質問に、尤雨渓の答えは最初の開発の初心を話しました.すなわち「Vue.jsを作る初志は単純で、大金を稼ぐためではなく、大神になるためではなく、何かすごいイノベーションポイントを見つけたからではありません.私は自分が好きなフレームワークを作りたいだけです.たまたま、私が欲しいものを作ってから、他の人もたくさん好きになったので、ユーザーが増えています.私は言ったことがありません.Vue.jsがすべてよりも他のフレームワークはすべて良いです(私のずっとの観点は開発者の好みの多様性がマルチフレームワーク/言語の共存に有益で無害で、甚だしきに至っては必要です).
ということで、フレームワークや技術を学ぶ際に主観的な判断をしないようにしたいと思います.Vueを勉強しているとき.jsの時、ネット上にはいろいろな投稿があふれていて、多くの投稿がVueを話しています.jsがどのように悪いのか、どこがパクリなのか.私はプログラム開発をする人が理性的であるべきで、感情を持って技術的なものに対処すべきではないことを望んでいます.特にそれはあなた自身と何の関係もありません.存在するのは合理的であるという言葉がありますが、もしそれが合理的でなければ、遅かれ早かれ時間に淘汰され、技術間の交換更新は避けられません.一つの技術に対する愛のために別の技術を中傷しないでください.
接触するjsの前にAngularを使っていました.しばらくの間使用することで、Vueを感じます.jsはもっと簡単で軽くて、中小規模のプロジェクト開発でAngularよりもっと適用できるかもしれないので、後のプロジェクトでAngularのVue転戦を放棄しました.js.
しばらくの間の深い研究に基づいて、多くの実戦経験を蓄積し、この達人の授業を通じてみんなと分かち合いたいと思っています.この課程は実用を主とし、原理をあまり深く説明することはなく、主に既存の先端開発基礎の研究開発者向けである.フロントエンドベースが欠けている場合は、全体的に苦労する可能性があります.
Angular、Vue.js、Reactの違いはAngular、Vueについて多くの人に聞かれたことがある.js、Reactの3つの優劣、私は3つが優劣が存在しないと感じて、異なった特性を持って、再びみんなのためにそれらとVueを分析します.jsのいくつかの共通点と異なる点.
ReactとVue.jsはいずれも仮想DOMを採用しており,それらのコア機能はすべてコアライブラリにあり,他のルーティングのような機能は他のライブラリによって処理される.
Reactは私から見れば純粋なMVVMフレームワークではなく、Vueよりも巨大な生態系を持っています.jsは一般的なフレームワークの範疇から離れているため優れているが、Vue.jsはその前に何の役にも立たないわけではない.実はVuejsは多くの場合、Vueのため優位を占めています.jsはReactよりずっと軽い.Reactの全体はJavaScript機能によって実現されているが、これは一般的なフロントエンド開発者にとって、CSS/HTMLをJavaScriptに組み込むのはそんなに容易ではないが、Vue.jsは従来のWeb技術に基づいて拡張されており、ユーザーに受け入れられるに違いない.
Angular 1とAngular 2は私から見れば同じフレームワークではなく、文法的にはVueと同じです.jsはほぼ一致しているので、多くの人がVueと言っています.jsはAngularをパクリしているので、このような投稿を見すぎて、Vueだと思います.jsの初期の考え方は,一部は確かにAngular 1に由来しており,このような問題も多く述べることは考えられず,仁者見仁智者見智である.
Vue.jsは多くの面でAngularのように深く開発されていないが,基礎的な機能の完備も保証されている.Angularの全面がもたらした膨大さに対して、Vue.jsは異なる方向を選択したVue.jsはAngularより速い場合が多く、Angularの汚れ検査メカニズムによる性能の問題もVueである.jsは管理する必要はありません.
なぜVueを選んだのか.jsまずVueについて話しましょうjsの多くの利点.
1.依存関係が存在しない;
2.軽量(25 kmin+gzip 72 Kmin);
3.適用範囲が広い(大中小型プロジェクト、PC、モバイル端末、混合開発);
4.本土の枠組み、コミュニティは非常に活発で、国産のみんなに対する情熱度は非常に高い(主に東西そのものが良い).
5.学習コストが低く、文法のアップグレードがスムーズである(Anguler 1が2にアップグレードされたのは新しい言語である).
6.双方向データバインディング(所見即得);
7.文法が簡潔である.
次に、いくつかのVueを研究します.jsの構文.
1.Vueを作成する方法jsインスタンス.
var vm = new Vue({
  //   
})

簡単だよjsオブジェクト.
2.データの追加方法
var vm = new Vue({
    data: {
        text:"    ！"
    }
})

わかりやすいjsのデータはdataに格納されます.
3.双方向データバインディングの実装.
Anguler 1がデータの双方向バインディングを実現する方法:
<body ng-app="myApp">
    <div ng-controller="myCtrl">
        <span>{{ inputData }}span>
        <input type="text" ng-model="inputData ">
    div>
body>

<script>
var myModule = angular.module('myApp', []);
myModule.controller('myCtrl', ['$scopp', function($scope) {
    $scope.inputData = '';
]);
script>
Vue.js           ：
<body>
    <div id="app">
        <span>{{ inputData }}span>
        <input type="text" v-model="inputData ">
    div>
body>
<script>
var vm = new Vue({
    el: '#app',
    data: {
        inputData : ''
    }
})
script>

Anguler 1と比較して全体的に一致し、Vue.jsのほうが簡潔で、v-modelはデータをDOMにバインドし、{{}}2つのカッコでデータをテキストに直接表示し、inputボックスの内容を修正すると、上に表示されているものは変更に従い、いわゆる、見たものは得られます.
4.簡単なイベントを書く.
<div id="app">
<button v-on:click="inputData += 1">Add 1button>
<p>The button above has been clicked {{ inputData }} times.p>
div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            inputData : 0
        }
    })
script>

Add 1の下に表示される内容をクリックするたびに1が増加し、v-on:clickでクリックイベントをバインドすることで、オリジナルのonclick効果と一致し、もちろんオリジナルのonclickでは上記の書き方はサポートされていません.次のようにclickを関数にバインドすることもできます.
<div id="app">
<button v-on:click="addOne">Add 1button>
<p>The button above has been clicked {{ inputData }} times.p>
div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            inputData : 0
        },
        methods: {
           addOne:function () {
               this.inputData++
           }
        }
    })
script>

関数の書き方は原生と名前の順序だけが変化するが、その中には非常に重要な点がある.jsのthisと原生のthisは同じではありませんVue.jsのthisはvmというVueを指している.jsインスタンスは、インスタンスでdataを呼び出すデータがthisを直接使用する.Datanameでいいです(dataNameデータ名)、関数を呼び出すのも同じ方法です.functionName(functionName関数名)では、thisについて他にも注意すべき点がたくさんありますが、後続のレッスンで説明します.
methodsは、インスタンスにおいて関数を格納場所である、methodsに書かれた関数は、上述のthisによってもよい.functionName呼び出しは、DOM要素に直接バインドすることもでき、v-on:click="functionName"でバインドに成功しました.インスタンスvmのelは、インスタンスにマウントされた要素IDであり、上のDOMのIDと一致するように、つまり、どのDOMにマウントされているか、インスタンスの役割範囲はこのDOM要素内にあります.
現在、フロントエンド開発の実際の過程でブラウザの互換性に対する要求は従来ほど厳しくなく、IE 8以下のバージョンはすでに多くの人に放棄されている、Vue.js,Angular,Reactの3つのうちReact互換IE 8のみである.だから、私たちの仕事で考えている間に、ブラウザの互換性については、多くのプロジェクトで厳しい要求はありません.
フレームワークを使用してプロジェクトを展開する場合、どのような面を考慮する必要がありますか?
1.性能
1つのWebサイトのパフォーマンスに問題がある場合は、ユーザーの半分以上が失われます.
フレームワークの性能については、ネット上で各種のテストを検索することができ、フレームワークのコード構造、論理処理を理解し、性能に対するニーズを満たすことができるかどうかを判断することができます.
2.拡張性
長期的なメンテナンスが必要なプロジェクトでは、さまざまな機能が追加されることがよくあります.この場合、拡張性が特に重要です.前期に前期を満たすフレームワークを選択した場合、後期にプラグインを使用して機能を完了する必要があります.あるいは、何に基づいて機能を完了する必要があります.この場合、ネット上で関連コンテンツが検索されていないことに気づきます.心が詰まっているかどうか.
3.保守性
1つのプロジェクトのライフサイクルは3日2日ではなく、先端の発展は爆発的です.フレームワークを選択するときに、政府が後続の時間にフレームワークを更新・維持するかどうかを考えたことがありますか?不確実であれば、公式にメンテナンスを放棄したソリューションはありますか?
4.互換性
ここでの互換性とは、ブラウザの互換性ではなく、フレームワークと他のフレームワークやツールの互換性を指します.このフレームワークを使用すると、開発環境に影響があるかどうか、開発IDEに影響があるかどうかです.
Vue.jsは現在非常に流行しているフレームワークとして、あなたがそれを選んだとき、実際には以上の内容をあまり考える必要はありません.多くの人が彼らの経験でそれが可能だと教えてくれました.判断するだけだjsがあなたのプロジェクトに適しているかどうか.
個人総括jsは、以下の性質を有する項目を適用する.
ブラウザに対する互換性の要求は高くなく、IE 6-8に互換性を必要としない.
SPA開発
性能に対する要求が高い.
コンポーネント化
総じて言えば、MVVMフレームワークの初心者であれば、Vue.jsはあなたの最高のステップアップツールです.もしあなたが他のMVVMフレームワークをマスターしたベテランであれば、Vueを見つけることができます.jsはもっと簡単で軽いです.
Vue.jsは一人一人に適したフレームワークであり、個人的にはMVVMフレームワークの中で最も広く適用されているように見えます.
テキストフィールドでのカーソル位置の問題について
非再帰版セグメントツリーテンプレート