vue topics face questions

1. What is the role of v-if and v-show is? What's the difference?

  v-if: Creating --- deleted, no elements. Switching big overhead. For the case with no frequent switching.

      Example: making a search box, navigation bar and search box overlap of two boxes, click on the search button to create the picture input box, and then click the button to remove the entry box. It does not occupy the position.

  v-show: show --- hidden, there are elements. Frequent switching, then use it. Just the initial rendering large overhead. Such as requirements, click the button to display the hidden box.

 2, vue life cycle: 8 large

  beforecreate---created---beforeMount---mounted---beforeUpdate---updated---beforeDestroy---destroy

2-1: Vue execution order of the parent component and subassembly lifecycle hook function?

  Lifecycle hooking function execution order Vue parent components and subcomponents can be classified into the following four parts:

  Load rendering process

  1,父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted

  2, the parent component update process

    父 beforeUpdate -> 父 updated

  3, sub-component update process

    父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated

 

  4, the destruction process

    父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

3. Which of the package components?

   (Personal) page package too, ha ha ha

? How communication component 4 brothers, how the parent-child communication components?

   Overall father to son through the props, the father of the child is passed through $ emit.

       举个父传子例子:父组件传值给子组件,即父组件去改变子组件的数据,比如文字。

父:

  0,首先引入子组件,import...

  1,  设置components:{ BtnStyle  } 节点,,注册子组件。

  2:return 返回真实数据:toMsg:“这是数据”。

  3,再在视图层把子组件用标签的形式展示出来,想改变子组件还得绑定好数据传给子组件:  <BtnStyle :toMsg="toMsg"></BtnStyle>

子:绑定数据到父组件,让父组件可以随时修改。

  0,暴露name,方便找到这个子组件。父组件也可以暴露自己组件的名字。

  1,设置节点接收父组件传递过来的数据:  prop:["toMsg"]

  2,不用设置return值,因为值在父组件设置了。

  3,最后在视图层需要文字处,用花括号填上动态数据:<h1> {{toSonData}} </h1>

  子传父:待补。

4,mvvm框架是啥?它和其它框架(jquery)的区别是什么?哪些场景适合?

  一个model+view+viewModel框架,数据模型model,viewModel连接两个

  区别:vue是数据驱动,通过数据来显示视图层而不是DOM节点去操作。

  场景:数据操作比较多的场景,更加便捷。。。。

5,什么是 MVVM , 和 MVC 是什么区别, 原理是什么?

  MVVM:数据模型数据双向绑定,view和model之间没有联系,通过 viewModel进行交互,而且Model和ViewModel之间的交互是双向的,

  因此视图的数据的变化会同时修改数据源,而数据源数据的变化也会立即反应view。

  MVC:是单向通信。

6,class与style 如何绑定实现动态改变样式 ?

  1,绑定类,用三元判断::class="[isActive?class1:class2]"

  2,返回三个值,1 是 isActive是true还是false? 以及两个类对应的类名。:class1:‘a’,.....b....

  3,设置a和a的样式

  延申:如何动态绑定多个类?

  1,绑定一个动态类::class="[active?'class-'+index:'']",到时可以随意改变index的值去设置不同的类。

  2,返回两个值:active: true,  和 index:1, 

  3,样式的选择器类选择器这样命名: .class-1{}

  总结: 有个JS基础的知识点:

  a=active -> true.

  a=null    -> false

  额外:

  对象的方法,不是数组的,不用三元的话要在返回值处判断

  <div v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>

  data: { isActive: true, hasError: false }。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Guess you like

Origin www.cnblogs.com/lvqiupingboke-2019/p/12082695.html