今回は、Vue の初心者が始めるにあたって知っておくべきことの基礎知識をお届けします。Vue の初心者が始めるにあたって知っておくべき 注意事項 については、次のとおりです。一緒にそれで。 1. vue とは何ですか? Vue は、ユーザー インターフェイスを構築するための進歩的なフレームワークです。 圧縮後わずか17kb 2. Vue環境構築 直接ダウンロードしてタグでインポートするとVueがグローバル変数として登録されます。 </p> <p style="text-align: left;">ただし、Vue を使用して大規模なアプリケーションを構築する場合は、NPM インストールを使用することをお勧めします。 </p> <p style="text-align: left;">ここでの推奨事項は、非常に高速な淘宝網の cnpm を使用することです</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>npm install -g cnpm --registry=https://registry.npm.taobao.org</pre><div class="contentsignin">ログイン後にコピー</div></div> <p style="text-align: left;"></p> <p style="text-align: left;">3. 最初の vue アプリケーション<span style="color: #ff0000"><strong></strong><div class="code" style="position:relative; padding:0px; margin:0px;"><pre># 全局安装 vue-cli npm install --g vue-cli # 创建一个基于 webpack 模板的新项目 vue init webpack my-project # 安装依赖，走你 cd my-project npm run dev</pre><div class="contentsignin">ログイン後にコピー</div></div></span></p> <p style="text-align: left;"><span style="color: #ff0000"><img alt="" src="https://img.php.cn/upload/article/000/061/021/c82fbcfc8249826e052c8b8b2528b9ef-0.png"></span></p> <p style="text-align: left;">4. <span style="color: #ff0000">ライフサイクル<strong><a href="//m.sbmmt.com/php/php-tp-being.html" target="_blank"></a></strong></span>各 Vue インスタンスが作成されると、一連の初期化プロセスが実行され、対応するライフサイクル フックも呼び出されます。これらのフックを使用して、適切なタイミングでビジネス ロジックを実行できます。 </p> <p style="text-align: left;">一般的なライフサイクルは次のとおりです: created---mounted---destroy</p> <p style="text-align: left;"> Vue の最も一般的に使用されるライフサイクルフックは次のとおりです: </p> <p style="text-align: left;">• created はインスタンスの作成後に呼び出されます。この段階では、データの観察などが行われます。 . は完了しましたが、まだマウントされておらず、$el はまだ使用できません。 一部のデータを初期化して処理する必要がある場合にさらに便利です。 </p> <p style="text-align: left;">• マウントされた el は、インスタンスにマウントされた後に呼び出されます。通常、最初のビジネス ロジックはここから始まります。 </p> <p style="text-align: left;">• beforeDestroy はインスタンスが破棄される前に呼び出されます。 主に、addEventListener を使用して監視されるいくつかのイベントのバインドを解除します。 </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <p id="app"> <p>{{title}}</p> <button @click="say()">单击事件</button></br> <p>今年{{age}}</p> <input v-model="age"> </p> </body> </html> <script src="lib/vue.js"> 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); } } });ログイン後にコピー 完全なライフサイクル図: この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。 推奨読書: vue 組み込み命令の説明 FileReader によるファイル リーダーの実装方法
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
