ホームページ > 記事 > ウェブフロントエンド > vue.jsプログレッシブフレームワークの使用方法の詳細な説明

vue.jsプログレッシブフレームワークの使用方法の詳細な説明

php中世界最好的语言オリジナル: 2018-04-17 14:51:272337ブラウズ

今回はvue.jsプログレッシブフレームワークの使い方を詳しく解説します。vue.jsプログレッシブフレームワークの使い方を詳しく解説する際の注意点について、実際の事例を交えて見ていきましょう。

Vue.js は、ユーザーインターフェイスを構築するための進歩的なフレームワークです。他の重量級フレームワークとは異なり、Vue は基本的には最小限のコストで段階的に採用可能な設計を採用します。ヴューコアライブラリはビューレイヤーのみに焦点を当てており、他のサードパーティライブラリや既存のプロジェクトと簡単に統合できます。一方、Vue エコシステムによってサポートされる単一ファイルのコンポーネントおよびライブラリと組み合わせると、Vue また、複雑な単一ページアプリケーションに強力なドライバーを提供する機能も備えています。

Vue.js は 2.x に更新され、機能と構文にいくつかのアップグレードと変更が加えられています。この記事では、まず基本的な内容を紹介します。

1、初心者ガイド

vue の使用方法は非常に簡単です。vue.js または vue.min.js をダウンロードして直接インポートします。

2. vue を使い始める

2.1 宣言的レンダリング

Vue.js の中核は、簡潔なテンプレート構文を使用して宣言的にデータを DOM にレンダリングできることです。これで「Hello Vue!」と入力されます。

最初の Vue アプリケーションを生成しました。これは文字列テンプレートのレンダリングに非常によく似ていますが、Vue は舞台裏で多くの作業を行います。今はデータとDOM すでに結合されているため、すべてのデータと DOM はリアクティブです。これらすべてを明確に理解するにはどうすればよいでしょうか?ブラウザでJavaScriptをオンにするだけですコンソール (現在のページで開いています) を開き、app.message の値を設定すると、上記の例でレンダリングされた DOM 要素がそれに応じて更新されることがわかります。

テキスト補間に加えて、次の方法で DOM 要素属性をバインドすることもできます:

<p id="app">
 {{ message }}
</p>
var app = new Vue({
 el: '#app',
 data: {
 message: 'Hello Vue!'
 }
})

マウスを数秒間ホバーすると、動的なプロンプトが表示されます。

ここで私たちは新しいものに出会う。表示される v-bind 属性はディレクティブと呼ばれます。ディレクティブには、Vue によって生成されたことを示すために v- という接頭辞が付けられます。特別なプロパティが提供されます。ご想像のとおり、レンダリングされた DOM 上で特殊なリアクティブな動作が生成されます。つまり、このディレクティブがここで行うことは、「この要素の title 属性を次のものと一致させる」ということです。 Vue インスタンスのメッセージプロパティは関連性を維持し、更新されます。"

ブラウザの JavaScript コンソールを再度開き、 app2.message = 'Some new message' と入力すると、title 属性にバインドされた HTML が更新されたことが再度わかります。

2.1 条件とループ

要素の表示の制御も非常に簡単です:

<p id="app-2">
 <span v-bind:title="message">
 鼠标悬停此处几秒，
 可以看到此处动态绑定的 title！
 </span>
</p>
var app2 = new Vue({
 el: '#app-2',
 data: {
 message: '页面加载于 ' + new Date().toLocaleString()  }
})

＾コンソールで「app3.seen = false」と入力し続けると、span が消えていることが確認できます。

この例は、

データ

をテキストとプロパティにバインドできるだけでなく、DOM 構造にもバインドできることを示しています。さらに、Vue は強力な Transition Effect システムも提供しており、Vue が要素を挿入/更新/削除するときに自動的にトランジションエフェクトを使用できます。他にもコマンドがあり、それぞれに特殊な機能があります。たとえば、v-for ディレクティブは配列内のデータを使用して項目のリストを表示できます:

<p id="app-3">
 <p v-if="seen">现在你可以看到我</p>
</p>
var app3 = new Vue({
 el: '#app-3',
 data: {
 seen: true
 }
})

3、vueインスタンスすべての Vue アプリケーションは、Vue 関数を通じて新しい Vue インスタンスを作成することから始まります:

<p id="app-4">
 <ol>
 <li v-for="todo in todos">
  {{ todo.text }}
 </li>
 </ol>
</p>
var app4 = new Vue({
 el: '#app-4',
 data: {
 todos: [
  { text: '学习 JavaScript' },
  { text: '学习 Vue' },
  { text: '创建激动人心的代码' }
 ]
 }
})

Vue の設計は MVVM パターンに完全に従っているわけではありませんが、依然として MVVM パターンからインスピレーションを得ています。慣例として、通常は変数 vm (ViewModel の略) を使用して Vue インスタンスを表します。

3.1データとメソッド

Vue インスタンスを作成すると、データオブジェクト内にあるすべてのプロパティが Vue のリアクティブシステムに追加されます。これらのプロパティの値が変更されるたびに、ビューは「応答」し、対応する新しい値で更新されます。

りー

データオブジェクトが変更されるたびに、ビューの再レンダリングがトリガーされます。インスタンスが作成されている場合、データ内にすでに存在するプロパティのみがリアクティブになることに注意してください。つまり、インスタンスの作成後に新しい属性を追加した場合、たとえば次のようになります。

vm.b = 'hi'

然后，修改 b 不会触发任何视图更新。如果你已经提前知道，之后将会用到一个开始是空的或不存在的属性，你就需要预先设置一些初始值。例如：

data: {
 newTodoText: '',
 visitCount: 0,
 hideCompletedTodos: false,
 todos: [],
 error: null
}

除了 data 属性， Vue 实例还暴露了一些有用的实例属性和方法。这些属性与方法都具有前缀 $，以便与用户定义(user-defined)的属性有所区分。例如：

var data = { a: 1 }
var vm = new Vue({
 el: '#example',
 data: data
})
vm.$data === data // => true
vm.$el === document.getElementById('example') // => true
// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {
 // 此回调函数将在 `vm.a` 改变后调用
})

3.2vue实例的声明周期

vue实例的声明周期是一个很重要的概念，理解之后可以通过它实现很多功能。

看下这段代码。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
 </head>
 <body>
  <p id="container">我的声明周期，大家看吧！</p>
 </body>
 <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
 <script type="text/javascript" src="js/vue.js" ></script>
 <script type="text/javascript">
  //以下代码时显示vm整个生命周期的流程
  var vm = new Vue({
   el: "#container",
   data: {
    test : 'hello world'
   },
   beforeCreate: function(){
    console.log(this);
    showData('创建vue实例前',this);
   },
   created: function(){
    showData('创建vue实例后',this);
   },
   beforeMount:function(){
    showData('挂载到dom前',this);
   },
   mounted: function(){
    showData('挂载到dom后',this);
   },
   beforeUpdate:function(){
    showData('数据变化更新前',this);
   },
   updated:function(){
    showData('数据变化更新后',this);
   },
   beforeDestroy:function(){
    vm.test ="3333";
    showData('vue实例销毁前',this);
   },
   destroyed:function(){
    showData('vue实例销毁后',this);
   }
  });
  function realDom(){
   console.log('真实dom结构：' + document.getElementById('container').innerHTML);
  }
  function showData(process,obj){
   console.log(process);
   console.log('data 数据：' + obj.test)
   console.log('挂载的对象：')
   console.log(obj.$el)
   realDom();
   console.log('------------------')
   console.log('------------------')
  }
 </script>
</html>

通过控制台的打印效果可以看出来，实例化 vue 对象大致分为创建vue实例、挂载到dom、数据变化更新、vue实例销毁 4个阶段，，注意每个阶段都有对应的钩子，我们可以通过对这些钩子进行操作，达成一些功能。虽然初学者用不太上，但是提前了解一下还是好的，到时候碰到实际功能要能想得到生命周期的钩子。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

vue.jsプログレッシブフレームワークの使用方法の詳細な説明

関連記事