初心者向けの Vue の学習方法

今回は初心者向けのvueの学習方法と、初心者がvueを学習するための注意点について紹介します。実践的な事例を見てみましょう。

1. vue とは

Vue は、ユーザー インターフェイスを構築するための進歩的なフレームワークです。

圧縮後わずか17kb

2. Vue環境構築

直接ダウンロードして<script>タグでインポートするとVueがグローバル変数として登録されます。 </script>

ただし、Vue で大規模なアプリケーションを構築する場合は、NPM インストールを使用することをお勧めします。

ここでの推奨事項は、非常に高速なタオバオの cnpm を使用することです

npm install -g cnpm --registry=https://registry.npm.taobao.org

それからインストールしてください

# 全局安装 vue-cli
 npm install --g vue-cli
# 创建一个基于 webpack 模板的新项目
 vue init webpack my-project
# 安装依赖，走你
 cd my-project
 npm run dev

3、最初の Vue アプリケーション

nbsp;html>


 <meta>
 <title></title>


 <p>
  </p><p>{{title}}</p>
  <button>单击事件</button>
  <p>今年{{age}}</p>
  <input>
 


<script></script>
<script></script>
var app = new Vue({  //通过构造函数Vue就可以创建一个Vue的根实例，并启动Vue应用
 el: '#app', //指定页面上一个已经存在的DOM元素来挂载Vue实例
 data: {  //对象的数据
  title: 'hello vue', //通过插值语法{{}}绑定
  age: 22  //通过v-model进行双向数据绑定
 },
 methods: { //对象的方法
  say: function(){
   console.log(this.title);
  }
 },
 watch: { //监听数据的变化
  'age': function(newVal, oldVal){
   console.log(newVal, oldVal);
  }
 }
});

4。 ライフサイクル

各 Vue インスタンスが作成されると、一連の初期化プロセスが実行され、対応するライフサイクル フックも呼び出されます。これらのフックを使用して、適切なタイミングでビジネス ロジックを実行できます。

一般的なライフサイクルは次のとおりです: created---mounted---destroy

Vue の最も一般的に使用されるライフサイクルフックは次のとおりです:

• created はインスタンスの作成後に呼び出されます。この段階では、データの観察などが行われます。 . は完了しましたが、マウントされておらず、$el はまだ使用できません。 一部のデータを初期化して処理する必要がある場合にさらに便利です。

• マウントされた el は、インスタンスにマウントされた後に呼び出されます。通常、最初のビジネス ロジックはここから始まります。

• beforeDestroy はインスタンスが破棄される前に呼び出されます。 主に、addEventListener を使用して監視されているいくつかのイベントのバインドを解除します。

var app =new Vue({
 el: '# app',
 data: {
  a: 2
 } ,
 created: function () {
  console.log(this.a); //2
 },
 mounted: function () {
  console.log(this.el); //<p></p>
 }
});

完全なライフ サイクル図:

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Vue プロジェクトを環境ごとにパッケージ化する方法

dev から prd までの webpack v4 の詳細な手順

以上が初心者向けの Vue の学習方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。