Vue.js初歩学習

6149 ワード
javascript
vue.js
1、vueを知る.js
vue.jsはユーザインタフェースを構築する漸進的なボトムアップ増分開発MVVMフレームワークである.
漸進的な理解:
単独でも全体でも使えます.（ ， VUE ， vue 。** **）
ボトムアップ増分開発の理解:
まず基礎的なページを書いて、基礎的なものを書きます.機能と効果を1つずつ追加
MVVM思想
M:modeモデルは、データ(プロジェクトにデータが書かれている場所)V:viewビュー(ユーザが見えるWebコンテンツ)VM:ViewModelビューモデル(データモデルとビューインタフェースの橋渡し)と同等です.
MVC思想
データ層とビュー層を分離する設計思想
Vue.jsの目的:
  • データバインディングを解決する
  • 大規模な単一ページアプリケーションを開発するため
  • はコンポーネント化をサポートする(ページをいくつかのコンポーネントにカプセル化し、コンポーネントを組み立てることでページの多重性を最高にすることができる)
    • .
    Vue.jsのメリット:
    軽量レベル、高効率、高速、簡単で学びやすく、ドキュメントが全面的で清潔
    Vue.jsの核心思想:データ駆動とコンポーネント化
    Vueの基本的な書き方
    vue依存パッケージのダウンロード
    1.         npm init -y
2.  vue      npm install --save vue
3.  vue js    node_modules/vue/dist/vue.min.js

    <body>
     <!-- 1.       v  -->
     <div id="box">
          <!-- 4.             -->
          {{text}}
          <h2>    ：{{arr[2]}}</h2>
          <h2>    ：{{obj.name}}</h2>
          <h2>    ：{{bool?"  ":"  "}}</h2>
     </div>
   
</body>
<script src="node_modules/vue/dist/vue.min.js"></script>
<script>
     //2.vm     vue               
     new Vue({
         el:"#box", //Vue         
          // 3.      m         
         data:{
             text:"asdfaj",
             bool:true,
             arr:["guod",12,6,13,7],
             obj:{
                 name:"guo",
                 age:10,
              }
          }
      })
</script>

    レンダー(Render)
    コマンドレンダリング:私たちのプログラムに何をするかをコマンドすると、プログラムはあなたのコマンドに従って宣言レンダリングを実行します.私たちはプログラムにどのような効果がほしいかを教えるだけで、他のことはプログラムに任せます.
    15-Vueの計算プロパティ
    vueでのカスタム命令で、input値がnumberと小数点の桁数に制限されます.