Vue.jscomponent コンテンツの実装を調べる

それでは、Vue を体系的に学習しましょう (vue.js 公式ドキュメントを参照してください):

Vue.js は、データ駆動型の Web インターフェイスを構築するためのライブラリです。その目標は、応答性の高いデータ バインディングと結合されたビュー コンポーネントを実装することです。

Vue.js はデータ駆動型ビューの概念を採用しています。これは、通常の HTML テンプレートの特別な使用法を使用して、DOM を基礎となるデータに「バインド」できることを意味します。バインディングが作成されると、DOM はデータの同期を維持します。

以下の参照コードは上記のモデルに対応します

<!-- 这是我们的 View -->
<div id="example-1">
   Hello {{ name }}!
</div>
// 这是我们的 Model
var exampleData = {
   name: &#39;Vue.js&#39;
}
  
// 创建一个 Vue 实例或 "ViewModel"
// 它连接 View 与 Model
var exampleVM = new Vue({
   el: &#39;#example-1&#39;,  // 在一个id为&#39;example-1&#39;的实体上挂载
   data: exampleData  // 数据流
})

通常、次の記述は上記の記述と同じ効果があります:

<!-- 这是我们的 View -->
<div id="example-1">
   Hello {{ name }}!  <!--- Vue的数据模型用{{datamodel}}包裹起来 --->
</div>
  
// 创建一个 Vue 实例或 "ViewModel"
// 它连接 View 与 Model<br><script>
var exampleVM = new Vue({
   el: &#39;#example-1&#39;,  // 在一个id为&#39;example-1&#39;的实体上挂载
   data: {
       name: &#39;Vue.js&#39;
      } // 数据流
})<br></script>

このようなプログラムが実行された後、 #example-1 では、このコントロールに「Hello Vue.js!」が表示されます。

ディレクティブを見てみましょう:
ディレクティブは、接頭辞 v- が付いている特別な機能です。ディレクティブの値は、if ディレクティブなどのバインディング式に限定されます:

hello!

次のような特定の属性値をいくつかの値にバインドするバインディング命令もあります:

"v-bind" はここでは省略されているため、input の属性値の割り当ては "計算" 効果を持ちます。

計算された属性

ここでは、他のデータに基づいてデータを変更する必要がある場合に使用される $watch の使用法を紹介します:

<script><br>var vm = new Vue({
 el: &#39;#demo&#39;,
 data: {
  firstName: &#39;Foo&#39;,
  lastName: &#39;Bar&#39;,
  fullName: &#39;Foo Bar&#39;
 }
})<br></script>
  
vm.$watch(&#39;firstName&#39;, function (val) { // 当firstname改变时，立马更新vm.fullname
 this.fullName = val + &#39; &#39; + this.lastName
})
  
vm.$watch(&#39;lastName&#39;, function (val) {  // 当lastname改变时，立马更新vm.fullname
 this.fullName = this.firstName + &#39; &#39; + val
})

ここでは、すべてのデータ オブジェクトは vm.firstname などを通じて取得できます。アクセス。

v-model

その名前が示すように、Vueのデータモデルです。Vueインスタンスでデータをバインドするために使用されます:

<!--- bi-direction bound --->
<div id="app">
  <p>{{message}}</p>
  <input v-model="message"> <!--Model，input输入的数据会立即反馈到Vue实例中--> 
</div>
<script>
  new Vue({
    el: &#39;#app&#39;,  // View
    data: {
      message: &#39;Hello Vue.js&#39;
    }
  })
</script>

例えば、フォームコントロールをバインドするには、選択された値を表示します。 :

<!---    表单控件绑定-单选 --->
<div id="myselect">  // 外面这一层我一开始没有加，然后就出错了，el好像一般是挂载在<div>构件上
<select v-model="selected"> // data的数据类型是selected，值是选取的值
  <option seleceted>A</option>
  <option>B</option>
  <option>C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
  
<script>
  new Vue({
    el: &#39;#myselect&#39;,
    data:{
      selected:[]
    }
  })
</script>

v-if, v-else

このコマンドは非常に柔軟に使用できます。たとえば、「単一選択の質問」、「複数選択の質問」、「 text question" の場合、表示されるコントロールは質問ごとに異なります。この場合、次の構文を使用できます:

<div v-if="questItem.type === &#39;textarea&#39;"> // 注意是三个等号
    <textarea></textarea>
</div>
<div v=else>
    <div></div>
</div>

v-for

これは、配列要素を走査するために使用されます。例:

<ul id="demo">
  <li
    v-for="item in items"
    class="item-{{$index}}">  <!--- $index指的是当前数组元素在数组中的位置 --->
    {{parentMessage}} - {{$index}} - {{item.message}} <!--一个view结构-->
  </li>
</ul>
<button id="btn1">点击我</button>
<script>
  var demo= new Vue({
    el: &#39;#demo&#39;,
    data:{
      parentMessage: &#39;Parent&#39;,
      items:[
        {message: &#39;Foo&#39;},
        {message: &#39;Bar&#39;}
      ]
    }
  })
</script>

上記のコードは、デモインスタンスの items 配列を走査し、

タグ内の各配列要素 ('Foo'、'Bar') をそれぞれ表示することを意味します

リスト全体のレンダリングを避けるために、よく使用されます。 :track-by = "$index" は、現在の配列要素のみが操作されることを意味します。

この時点では、Vue に関する最も基本的な事項が紹介されています。さらに API 情報が必要な場合は、http://cn.vuejs.org/api/ を参照してください。

Vue ファイル構造とデータ フロー制御

vue ファイルでは、次の形式がよく見られます:

<template>
    <div> </div>
</template>
  
<script>
    export default{
       data(){ ...
       },
       methods:{ // 自定义方法，可对data进行处理
          method1(){ ... }
          ...    
       },
       components: { ... }
       vuex: {
          getters:{ // 获取store的数据
            questionnaire: state => state.currentQuestionnaire
          }
          actions: { //用来分发数据容器store中mutations方法
            action1(){ dispatch("SET_QUEST", item) } // dispatch用来调用父组件store的"SET_QUEST"方法
            action2(){ ... }
       }
       directives: {
          &#39;my-directive&#39;: {
            bind: function(){ //钩子函数，只调用一次，在指令第一次绑定到元素上时调用 }
            update: function(newValue, oldValue) { //钩子函数，在bind之后以初始值为参数第一次调用，之后每当绑定至变化时调用 }
            unbind: function(){ //钩子函数，只调用一次，在指令从元素上解绑时调用 }
          }
       } 
　　　　　　　　　　// 自定义指令，在<template>中以<div v-my-directives = ""> 方式调用   
     }
</script>
  
<style>  </style>

「this」キーワードはメソッドでよく使用され、Vue コンポーネントのインスタンスを指します。

event.target: イベントをトリガーする特定のコントロールは、それが誰であってもバブリング効果を生成しません。これは、次のようなイベントをトリガーするコントロールをロックするときによく使用されます。これについて話しましょう。 $els: v-el

<div @click.stop = "addItem($event)">
   <span data-type = "radio">单选题</span>
   <span data-type = "checkbox">多选题</span>
   <span data-type = "textarea">文本题</span>
</div>
  
<script>
   export default{
      method: {
          addItem(event){
             let target = event.target
             if(target.nodeName.toLowerCase() === &#39;span&#39;) { // 当点击了选择的按钮后
                this.showMask = true  // 显示弹出框
                this.questItem.type = target.dataset.type  // 设置问题的类型
             }
      }
   }
</script>

で登録された DOM 要素を含むオブジェクト 上記のコードは不完全ですが、v-el が「item-title」という名前のエンティティにコントロールをマウントしていることがわかります。 " , we can extract it through this.$els.itemTitle

コントロールの属性値(入力値)を使用するには、次のようにすることができます:

this.$els.itemTitle.value

上記はこの記事の全内容が皆さんの学習に役立つことを願っています。また、皆さんが PHP 中国語 Web サイトをサポートしてくれることを願っています。

Vue.jscomponent コンテンツの実装を検討するその他の記事については、PHP 中国語 Web サイトに注目してください。