предисловие
Я написал проект vue и апплет и обнаружил, что у них много общего, и я хотел бы обобщить общие черты и различия между ними. В отличие от этого функция ловушки апплета намного проще.
Я написал проект vue и апплет и обнаружил, что у них много общего, и я хотел бы обобщить общие черты и различия между ними.
1. Жизненный цикл
Сначала выложил две картинки:
жизненный цикл
жизненный цикл апплета
В отличие от этого функция ловушки апплета намного проще.
Когда функция ловушки Vue переходит на новую страницу, функция ловушки будет запущена, но функция ловушки апплета и различные методы перехода на страницу будут запускать разные ловушки.
- onLoad: загрузка страницы
Страница будет вызываться только один раз, вы можете получить параметр запроса, вызываемый для открытия текущей страницы в onLoad.
- onShow: отображение страницы
Он вызывается каждый раз при открытии страницы.
- onReady: начальная визуализация страницы завершена.
Страница будет вызвана только один раз, что указывает на то, что страница готова к взаимодействию со слоем представления.
Для настроек интерфейса, таких как wx.setNavigationBarTitle, установите его после onReady. посмотреть жизненный цикл
- onHide: скрыть страницу
Вызывается при переключении навигации или нижней вкладки.
- onUnload: выгрузка страницы
Вызывается при redirectTo или navigationBack.
запрос данных
Когда страница загружается и запрашивает данные, использование этих двух хуков в чем-то похоже: Vue обычно запрашивает данные в create или Mount, а в апплете — в onLoad или onShow.
2. Привязка данных
VUE: когда vue динамически связывает переменную, значение которой является атрибутом элемента, перед переменной добавляется двоеточие:, например:
1. <img :src="imgSrc"/>
Небольшая программа: Когда значение переменной привязано к атрибуту элемента, оно будет заключено в две фигурные скобки.Если скобки не добавлены, это считается строкой. пример:
1. <image src="{{imgSrc}}"></image>
3. Рендеринг списка
Вставьте код напрямую, они все еще чем-то похожи
вид:
1. <ul id="example-1">
2. <li v-for="item in items">
3. {{ item.message }}
4. </li>
5. </ul>
7. var example1 = new Vue({
8. el: '#example-1',
9. data: {
10. items: [
11. { message: 'Foo' },
12. { message: 'Bar' }
13. ]
14. }
15. })
Апплеты:
1. Page({
2. data: {
3. items: [
4. { message: 'Foo' },
5. { message: 'Bar' }
6. ]
7. }
8. })
10. <text wx:for="{{items}}">{{item}}</text>
В-четвертых, показывать и скрывать элементы
В vue используйте v-if и v-show для управления отображением и скрытием элементов.
В апплете используйте wx-if и hidden для управления отображением и скрытием элементов.
5. Обработка событий
vue: используйте v-on:event для привязки событий или используйте @event для привязки событий, например:
1. <button v-on:click="counter += 1">Add 1</button>
2. <button v-on:click.stop="counter+=1">Add1</button> //阻止事件冒泡
В апплете используйте bindtap (bind+event) или catchtap (catch+event) для привязки событий, например:
1. <button bindtap="noWork">明天不上班</button>
2. <button catchtap="noWork">明天不上班</button> //阻止事件冒泡
6. Двусторонняя привязка данных
1. Установка значения
В vue нужно только добавить v-model к элементу формы, а затем привязать соответствующее значение в данных, при изменении содержимого элемента формы соответственно изменится и соответствующее значение в данных, что очень приятно по сути дела.
1. <div id="app">
2. <input v-model="reason" placeholder="填写理由" class='reason'/>
3. </div>
5. new Vue({
6. el: '#app',
7. data: {
8. reason:''
9. }
10. })
Но в апплете такой функции нет. тогда что нам делать?
Когда содержимое формы изменяется, запускается метод, привязанный к элементу формы, а затем в этом методе значение в форме присваивается соответствующему значению в данных через this.setData({key:value}).
Ниже приведен код, вы можете его почувствовать:
1. <input bindinput="bindReason" placeholder="填写理由" class='reason' value='{{reason}}' name="reason" />
2. Page({
3. data:{
4. reason:''
5. },
6. bindReason(e) {
7. this.setData({
8. reason: e.detail.value
9. })
10. }
11. })
Когда на странице много элементов формы, изменение значения является физической задачей. По сравнению с апплетом v-модель vue просто крутая и ненужная.
2. Стоимость
В vue получить значение через this.reason
В апплете значение получается через this.data.reason
7. Привязка параметров события
Во Vue очень просто привязать события и передать параметры, вам нужно только передать данные, которые будут переданы как формальные параметры в методе, который запускает событие, например:
1. <button @click="say('明天不上班')"></button>
2. new Vue({
3. el: '#app',
4. methods:{
5. say(arg){
6. consloe.log(arg)
7. }
8. }
9. })
В апплет нельзя напрямую передавать параметры в методе привязки событий, нужно использовать параметры как значения атрибутов и привязать их к data-атрибуту на элементе, а потом в методе передать e.currentTarget .dataset.* способ получить, чтобы завершить передачу параметров, это очень хлопотно, есть ли...
1. <view class='tr' bindtap='toApprove' data-id="{{item.id}}"></view>
2. Page({
3. data:{
4. reason:''
5. },
6. toApprove(e) {
7. let id = e.currentTarget.dataset.id;
8. }
9. })
Восемь, связь между компонентами родитель-потомок
1. Использование подкомпонентов
В vue вам нужно:
- писать подкомпоненты
- Вводится путем импорта в родительский компонент, который необходимо использовать
- Регистрация в Vue Components
- использовать в шаблоне
1. //子组件 bar.vue
2. <template>
3. <div class="search-box">
4. <div @click="say" :title="title" class="icon-dismiss"></div>
5. </div>
6. </template>
7. <script>
8. export default{
9. props:{
10. title:{
11. type:String,
12. default:''
13. }
14. }
15. },
17. methods:{
18. say(){
19. console.log('明天不上班');
20. this.$emit('helloWorld')
21. }
22. }
23. </script>
25. // 父组件 foo.vue
26. <template>
27. <div class="container">
28. <bar :title="title" @helloWorld="helloWorld"></bar>
29. </div>
30. </template>
32. <script>
33. import Bar from './bar.vue'
34. export default{
35. data:{
36. title:"我是标题"
37. },
38. methods:{
39. helloWorld(){
40. console.log('我接收到子组件传递的事件了')
41. }
42. },
43. components:{
44. Bar
45. }
46. </script>
В апплете нужно:
1. Напишите подкомпоненты
2. В json файле дочернего компонента объявить файл как компонент
1. {
2. "component": true
3. }
3. В файле json родительского компонента, который нужно импортировать, заполните имя компонента и путь импортируемого компонента в usingComponents.
1. "usingComponents": {
2. "tab-bar": "../../components/tabBar/tabBar"
3. }
4. В родительский компонент можно напрямую импортировать
1. <tab-bar currentpage="index"></tab-bar>
Конкретный код:
1. // 子组件
2. <!--components/tabBar/tabBar.wxml-->
3. <view class='tabbar-wrapper'>
4. <view class='left-bar {{currentpage==="index"?"active":""}}' bindtap='jumpToIndex'>
5. <text class='iconfont icon-shouye'></text>
6. <view>首页</view>
7. </view>
8. <view class='right-bar {{currentpage==="setting"?"active":""}}' bindtap='jumpToSetting'>
9. <text class='iconfont icon-shezhi'></text>
10. <view>设置</view>
11. </view>
12. </view>
2. Связь между родительским и дочерним компонентами
во вью
Чтобы передать данные от родительского компонента к дочернему, вам нужно только передать значение в дочернем компоненте через v-bind, а в дочернем компоненте получить его через props для завершения передачи данных.Пример:
1. // 父组件 foo.vue
2. <template>
3. <div class="container">
4. <bar :title="title"></bar>
5. </div>
6. </template>
7. <script>
8. import Bar from './bar.vue'
9. export default{
10. data:{
11. title:"我是标题"
12. },
13. components:{
14. Bar
15. }
16. </script>
18. // 子组件bar.vue
19. <template>
20. <div class="search-box">
21. <div :title="title" ></div>
22. </div>
23. </template>
24. <script>
25. export default{
26. props:{
27. title:{
28. type:String,
29. default:''
30. }
31. }
32. }
33. </script>
Дочерний компонент связывается с родительским компонентом для передачи методов и данных родительскому компоненту через this.$emit.
в апплете
Связь между родительским компонентом и дочерним компонентом аналогична vue, но апплет не передает v-bind, а напрямую присваивает значение переменной, как показано ниже:
1. <tab-bar currentpage="index"></tab-bar>
Здесь «индекс» — это значение, которое будет передано дочернему компоненту.
В свойствах дочернего компонента получить переданное значение
1. properties: {
2. // 弹窗标题
3. currentpage: { // 属性名
4. type: String, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
5. value: 'index' // 属性初始值（可选），如果未指定则会根据类型选择一个
6. }
7. }
Связь между дочерним компонентом и родительским компонентом аналогична Vue, код выглядит следующим образом:
1. //子组件中
2. methods: {
3. // 传递给父组件
4. cancelBut: function (e) {
5. var that = this;
6. var myEventDetail = { pickerShow: false, type: 'cancel' } // detail对象，提供给事件监听函数
7. this.triggerEvent('myevent', myEventDetail) //myevent自定义名称事件，父组件中使用
8. },
9. }
10. //父组件中
11. <bar bind:myevent="toggleToast"></bar>
12. // 获取子组件信息
13. toggleToast(e){
14. console.log(e.detail)
15. }
Если родительский компонент хочет вызвать метод дочернего компонента
Vue добавит к подкомпоненту атрибут ref, а подкомпонент можно будет получить через значение this.$refs.ref, а затем можно вызвать любой метод в подкомпоненте, например:
1. //子组件
2. <bar ref="bar"></bar>
3. //父组件
4. this.$ref.bar.子组件的方法
Апплет состоит в том, чтобы добавить идентификатор или класс дочернему компоненту, затем найти дочерний компонент через this.selectComponent, а затем вызвать метод дочернего компонента, например:
1. //子组件
2. <bar id="bar"></bar>
3. // 父组件
4. this.selectComponent('#id').syaHello()
Апплет и Vue слишком похож на это, есть древесина. . .
9. Глупости
Осталось еще много не дописанных мест, которые будут добавлены и упрощены позже. Я чувствую, что то, что я написал, немного избыточно, не распыляйтесь! ! !
Оригинальный адрес: https://segmentfault.com/a/1190000015684864
больше ссылок
Наконец-то я все-таки сделал карту Китая
Прелюдия SVG - сделайте свой View красочным
Поделитесь несколькими надежными фреймворками с открытым исходным кодом для Android
Золотой сезон золотых 9 серебряных 10 интервью, несколько важных вопросов для интервью