vue.js1.0 バージョンの使用を開始する

巴扎黑

リリース： 2017-07-22 17:52:17

オリジナル

1421 人が閲覧しました

vue

vue.jsは、インタラクティブなWebインターフェイスを構築するためのライブラリです。 MVVM データバインディングと、シンプルで柔軟な API を備えた構成可能なコンポーネントシステムを提供します。技術的に言えば、Vue.js は MVVM パターン上のビューモデルレイヤーに焦点を当てており、双方向のデータバインディングを通じてビューとモデルを接続します。実際の DOM 操作と出力フォーマットは、ディレクティブとフィルターに抽象化されます。他の MVVM フレームワークと比較して、Vue.js は簡単に始めることができます。

Vue.js は、Web インタラクティブインターフェイスを作成するためのライブラリです。シンプルで柔軟な API を通じてデータ駆動型 UI コンポーネントを作成できます。

 <br>

ログイン後にコピー

Vue1.0共通構文

<span style="font-size: 18px"><code class="hljs oxygene"><span class="hljs-keyword">var vm = <span class="hljs-keyword">new Vue(<span class="hljs-comment">{

　　el: "选择器",  挂载到页面的那个元素里，即确定vue的作用范围  外部可通过vm.$el访问，得到的是一个原生dom元素，可进行对应操作

　　a: '',  //自定义属性  外部可通过vm.$options访问

　　data: { }, <span class="hljs-comment">//实例属性都在这里面，外部通过实例名,即vm.$data调用

　　computed: <span class="hljs-comment">{ }, <span class="hljs-comment">//计算属性，也是实例属性，只是以方法的形式存在，并可以有逻辑运算的属性

　　<span class="hljs-function"><span class="hljs-keyword">method: <span class="hljs-comment">{ }, <span class="hljs-comment">//实例方法都在这里

　　watch: <span class="hljs-comment">{ }, <span class="hljs-comment">//对data和computed的属性进行监听，当属性有变化时自动触发，以方法的形式存在 外部通过$.watch调用

　　<span class="hljs-comment">//注意：以上属性和方法，实例内部都通过this调用,外部则通过对应的实例方法访问

　　<span class="hljs-comment">//在vue的生命周期过程中，它自身还提供了一系列的钩子函数供我们使用，进行自定义逻辑的注入：　　　

　　created: <span class="hljs-function"><span class="hljs-keyword">function<span class="hljs-params">()<span class="hljs-comment">{ 实例已经创建 }

　　<span class="hljs-title">beforeCompile: <span class="hljs-function"><span class="hljs-keyword">function<span class="hljs-params">()<span class="hljs-comment">{ 模块编译之前 }

　　<span class="hljs-title">compiled: <span class="hljs-function"><span class="hljs-keyword">function<span class="hljs-params">()<span class="hljs-comment">{ 模块编译之后；即模板占位符被是内容替换}

　　<span class="hljs-title">ready: <span class="hljs-function"><span class="hljs-keyword">function<span class="hljs-params">()<span class="hljs-comment">{ 模板插入到文档中了；相当于window.onload }//<span class="hljs-title">Vue2.0已改为<span class="hljs-title">mounted

　　注意： 以上4个方法在对象被实例化后即按顺序执行，以下2个方法需通过事件触发，并通过调用 实例名.$<span class="hljs-title">destory<span class="hljs-params">() 才执行

　　<span class="hljs-title">beforeDestroy: <span class="hljs-function"><span class="hljs-keyword">function<span class="hljs-params">()<span class="hljs-comment">{ 对象销毁之前 }

　　<span class="hljs-title">destroyed: <span class="hljs-function"><span class="hljs-keyword">function<span class="hljs-params">()<span class="hljs-comment">{ 对象销毁之后 }

});<br></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></span>

ログイン後にコピー

Vueオブジェクト分析:

1、オブジェクト属性

data、el、options、watch、computed

2、オブジェクトメソッド

ライフサイクルフック関数

3、オブジェクトインスタンスへのアクセスと属性とメソッドの呼び出し

A: インスタンス属性の呼び出し: $options、$el、$data、$watch

ここ$watch に焦点を当てます。その一般的な構文は次のとおりです。

vm.$watch("监听的实例属性名",function() { // 对于监听数据变化后的业务处理代码 });     --浅度监听

ログイン後にコピー

監視対象のプロパティが基本的なデータ型の場合は、上記の使用方法に問題はありません。ただし、監視対象のプロパティがオブジェクトの場合は、オブジェクト内のデータが使用されます。上記の書き込みメソッドは監視できません。詳細な監視にはパラメータが必要です:

vm.$watch("监听的实例属性名",function() { // 对于监听数据变化后的业务处理代码 },{deep: true});　　--深度监听

ログイン後にコピー

B: インスタンスメソッド呼び出し: $mount()、$log()、$ destroy()

4. 組み込みフィルターとカスタムフィルター

A: Vue の組み込みフィルターは次のとおりです:

capitalize (最初の文字を大文字にする)、uppercase、currency、json (同等) to JSON.Stringify() )、debounce (秒が続く、イベントと一致する、実行を遅延する)

limitBy (パラメータ1、パラメータ2) よく使われる単語 v-for配列、出力数と出力先を制限する; パラメータ 1 は出力の数を表し、パラメータ 2 は

がデータをフィルタリングし、パラメータを含むデータをフィルタリングし、入力ボックスと連携し、入力変数を介してフィルタリングし、効果を達成する出力を表します。ホットサーチの

orderBy(parameter)はデータを並べ替えます、パラメータが1の場合は正の順序、-1の場合は逆の順序になります他にはどのようなパラメータがありますか？したがって、1 と -1 は基本的に一般的な状況です

B: カスタムフィルター構文 (タイムスタンプ処理の場合、より一般的に使用されるカスタムフィルターです)

<span style="font-size: 18px"><code class="hljs actionscript">Vue.filter(<span class="hljs-string">"过滤器名称",<span class="hljs-function"><span class="hljs-keyword">function<span class="hljs-params">(参数<span class="hljs-rest_arg">...){

　　　　...  //业务处理

　　　　return <span class="hljs-rest_arg">...;

　　});<br></span></span></span></span></span></span></code></span>

ログイン後にコピー

5、組み込み命令とカスタム命令を使用します

ディレクティブは HTML 構文の拡張であり、v- で始まる必要があります。一般的に、この属性命令を使用する要素は、対応する属性関数を指します。属性とは異なります。説明書

A: 説明書が付属しています: v-if、v-show、v-else、v-module、v-text、v-html、v-bind、v-on、v-el、v-cloak ...

ここでは、v-text と v-cloak に焦点を当てます。テンプレートでインスタンス属性データを呼び出すときは、通常、この {{ インスタンス属性}} を実行します。これにより、ネットワーク速度が比較的遅い場合に、ページが点滅すると、中括弧とその中の元のコンテンツが表示され、ユーザーエクスペリエンスが向上しません。この状況に対処するには 2 つの方法があります:

1. 大きな段落要素で v- Clock を使用します。コマンドを実行し、要素の css を設定します。テンプレート内のd名、または v-command name="parameter" とすると、コマンド呼び出し時にパラメータを渡すことができます

コマンド名定義時は不要です v-を追加、テンプレート使用時はv-を追加します

C:カスタム要素コマンド(ほとんど役に立たないと言われていますが、無視しても構いません。達成したい効果はコンポーネントによって上回られています)

　Vue.directive("指令名称",function(..){
　　　　this.el.style.background = 'red';   //这里的this代表new出来的实例，this.el代表原生的dom元素
　　});

ログイン後にコピー

B case 構文はサポートされていませんが、B case 構文もバインドされていますデフォルト

6、カスタムキーボード情報

 Vue.elementDirective("自定义元素名称",{
　　　　bind: function() {};
　　});

ログイン後にコピー

テンプレート呼び出し@keydown.ctrl = "カスタムメソッド"

以上がvue.js1.0 バージョンの使用を開始するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。