Vue.js basic features

An instance of Vue var vm = new Vue({})
When instantiating, we can pass in an options object, including options such as data, templates, mount elements, methods, lifecycle hooks, etc.

module

The options that mainly affect the template or DOM are el and template, render.

<div id="app">
  <p>123</p>
</div>
<script id="tpl" type="x-template">   <div class='tpl'>
   <p>This is a tpl from script tag</p>   </div>
</script>
<script type="text/javascript">
  var vm = new Vue({    el : '#app',
   template : '#tpl'   });
</script>

Every Vue.js instance needs to have a root element

data

var MyComponent = Vue.component('my-component', {   props : ['title', 'content'],
  data : function() {
   return {
    desc : '123'
   }
 },
  template : '<div>     
      <h1>{{title}}</h1>     
      <p>{{content}}</p>     
</div>'
})

method

You can define methods through the options property methodsobject , and use v-ondirectives to listen to DOM events

The life cycle

A Vue.js instance has a series of initialization steps when it is created, such as establishing data observations, compiling templates, creating data bindings, etc. During this process, we can run business logic through some defined lifecycle hook functions

var vm = new Vue({
        el : '#app',
        beforeCreate: function(){
            console.log('beforeCreate: 1,实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用');
        },
        created: function() {
           console.log('created: 2,在实例创建之后调用。此时已完成数据绑定、事件方法，但尚未开始 DOM 编 译，即未挂载到document中');
        },
        beforeMount: function(){
            console.log('beforeMount: 3,在挂载开始之前被调用：相关的 render 函数首次被调用')
        }, 
        mounted: function() {
           console.log('mounted: 4,el被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内');
        },
        beforeUpdate: function(){
            console.log('beforeUpdate: 5,数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。')
        },
        updated: function(){
            console.log('updated: 6,由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。')
        },
        activated: function(){
            console.log('activated: 7,keep-alive 组件激活时调用。')
        },
        deactivated: function(){
            console.log('deactivated: 8,keep-alive 组件停用时调用')
        },
        beforeDestroy: function() {    
            console.log('beforeDestroy: 9,实例销毁之前调用。在这一步，实例仍然完全可用。');  
        },
        destroyed: function() {
           console.log('destroyed: 10,Vue实例销毁后调用。调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。');  
        }
    });

data binding

The core of Vue.js is a responsive data binding system. After the binding is established, the DOM will be synchronized with the data, so that there is no need to manually maintain the DOM, making the code more concise and easy to understand and improve efficiency.
Vue.js data binding syntax

1. text interpolation

<span>Hello {{ name }}</span>
<span v-once=”name”>{{name}}</span>

1. The instructions of the form control
   v-model perform two-way data binding on the form elements

conditional rendering

Vue.js provides v-if, v-show, v-else, v-for instructions to describe the logical relationship between templates and data, which basically constitute the main part of the template engine.

component communication

Parent (parent component) –Pass/Props–> Child (child component)
Child (child component) –Emit/Events–> Parent (parent component)

In the parent component, load the child component

import slideShow from '../components/slideShow'  //通过`import`载入子组件
export default{   //设置导出模板
    components: {
      slideShow
   },
}

Use in <template>, <com-a></com-a>rule: all uppercase must be converted to
lowercase . The <p :is="com-a"></p>advantage of introducing templates through is is that dynamic components can be rendered at that location.

<p :is="comTorender"></p>
data(){
   return{
    comToRender:'com-b'//这里comToRender变为了一个动态的属性
    }   
}

Parent and child components communicate

For example, the child component transmits information to the parent component: Event: Emit triggers or on listening For
example parent component transmits information to the child component: Props: Pass

In the parent component, <p number=8></p>
in the child component, props：['number'], and numberthe rendering that can be performed in the child component can
also be obtained by this.numbergetting the value passed from the parent component

Note: The property is also case-insensitive and needs to be distinguished by -;
at this time, when number is a string in the parent component, <p number=8></p>
when specifying the type in the child component, it should also be String, or 'number': [Number, String]

Subcomponents pass data out

1. First set a click method in the child component

this.$emit('my-event',this.hello)  //表示我们使父组件触发一个事件，名字叫做my-event，并且向这个方法传递一个参数,即子组件的hello属性

2. Secondly, listen to the triggered event my-event in the parent component. When this event is triggered, it will trigger another method of the parent component, getMyevent(hello), in this method, receive a parameter hello from the child component, Here you can print the value of the property hello of the child component

The parent component passes a template element to the child component: slot

1. first in the parent component

<com-a>
<p slot="header">123</p>  //这里插入一个模板
</com-a>

2. Add a label to the subcomponent <slot name="header">no slot</slot>
//set the default value for the slot no slot, which is nameconvenient for positioning when the subcomponent is used