1. V-ショーがあるV-場合との役割は何ですか?違いは何ですか?
V-IF:作成---削除、ない要素。大きなオーバーヘッドを切り替えます。ない頻繁な切り替えの場合のために。
例:、検索ボックス、ナビゲーションバーと2つのボックスの検索ボックスの重複を作る映像入力ボックスを作成するには、検索ボタンをクリックし、入力ボックスを削除するには、ボタンをクリックしてください。これは、位置を占めていません。
V-ショー:ショー---隠された、要素があります。頻繁に切り替え、それを使用しています。ただ、最初のレンダリングに大きなオーバーヘッド。このような要件として、隠されたボックスを表示し、ボタンをクリックしてください。
2、VUEライフサイクル:8大
beforecreate --- ---作成beforeMount --- ---マウントのBeforeUpdate ---更新--- --- beforeDestroy破壊
2-1:親コンポーネントおよびサブアセンブリのライフサイクルフック関数のVueの実行順序?
ライフサイクルフッキング機能の実行順序Vueの親コンポーネントとサブコンポーネントは、以下の4つの部分に分けることができます。
ロードレンダリング処理
1、父beforeCreate - >父作成 - >父beforeMount - >子beforeCreate - >子作成 - >子beforeMountは - >父搭載 - >子搭載しました
図2に示すように、親コンポーネント更新プロセス
父のBeforeUpdate - >父更新
図3に示すように、サブコンポーネント更新プロセス
父のBeforeUpdate - >子のBeforeUpdate - >子更新 - >父更新
4、破壊プロセス
父beforeDestroy - >子beforeDestroy - >子破壊 - >父破壊
3.パッケージコンポーネントのどれですか?
あまりにも(個人)ページパッケージ、ハッハッハ
?どのように通信コンポーネント4人の兄弟、どのように親子通信コンポーネント?
小道具による息子への総合的な父親は、子供の父親は$ 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 }。