Explore Vue.jscomponent content implementation

Now let’s learn Vue systematically (refer to vue.js official documentation):

Vue.js is a library for building data-driven web interfaces. Its goal is to achieve response data binding and combination view component.

Vue.js embraces the concept of data-driven views, which means that we can use special usage in ordinary HTML templates to "bind" the DOM to the underlying data. Once the binding is created, the DOM will keep the data in sync.

The following reference code corresponds to the above model

<!-- 这是我们的 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  // 数据流
})

Usually we will write the Model in the Vue instance. The following writing method has the same effect as the above writing method:

<!-- 这是我们的 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>

After such a program is executed, 'Hello Vue.js!' will be displayed in the #example-1 control.

Let’s take a look at directives:
Directives are special features with the prefix v-. The value of the directive is limited to a binding expression, such as an if directive:

hello!

There are also binding instructions, which bind certain attribute values ​​​​to some values, such as:

The "v-bind" is omitted here, making the input attribute Value assignment has the effect of "computation".

Computed properties

Here is an introduction to the usage of $watch, which is used when a data needs to change based on other data:

<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
})

Here , all data objects can be accessed through vm.firstname, etc.

v-model　

As the name suggests, it is the data model in Vue. It is used to bind data in Vue instances:

<!--- 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>

For example, to bind Defining a form control is to display the selected value:

<!---    表单控件绑定-单选 --->
<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　

This command can be used very flexibly. For example, if I generate new questions in the form, there are three types: "single choice question", "multiple choice question", and "text question". Then the controls that should be displayed for different questions are different. In this case, you can use the following syntax:

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

v-for

This is used to traverse array elements, for example:

<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>

The above code means traversal The items array in the demo instance displays each array element ('Foo', 'Bar') in the

tag.

In order to avoid rendering the entire list, it is often used :track-by = "$index" means that only the current array element will be operated.

At this point, the most basic things about Vue have been introduced. If you need more API information, you can refer to: http://cn.vuejs.org/api/

The structure of Vue files And data flow control

In vue files, we can often see this format:

<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>