开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 17 天，点击查看活动详情响应式数据的基本实现

js表达式

<template>
    <view>
      <view>{{ number + 1 }}</view>
      <view>{{ ok ? 'YES' : 'NO' }}</view>
      <!-- 把一个字符串分割成字符串数组,颠倒其元素的顺序,把数组中的所有元素放入一个字符串 -->
      <view>{{ message.split('').reverse().join('') }}</view>
      <view v-for="(item,index) in 10">
      <!-- 通过%运算符求余数，实现隔行换色的效果 -->
      <view :class="'list-' + index%2">{{index%2}}</view>
    </view>
</template>

动态class

<template>

    <view class="static" :class="{ active: isActive, 'text-danger': hasError }">222</view>
    <view class="static" v-bind:class="[isActive ? activeClass : '', errorClass]">222</view><!-- 三元表达式 -->
    <view class="static" v-bind:class="[{ active: isActive }, errorClass]">333</view>
</template>

<script>
	export default {
		data() {
			return {
				isActive: true,
				activeClass: 'active',
				errorClass: 'text-danger',
				activeColor:"green",
				fontSize:50
			}
		}
	}
</script>

v-show 不支持 template 元素，也不支持 v-else。nvue 页面不支持 v-show。

事件

<button @click="functionName('Form cannot be submitted yet.', $event)">
Submit
</button>

复杂逻辑用compulete属性

  <view>Computed reversed message: "{{ message.split('').reverse().join('') }}"</view>

更改为


<template>


    <view>Computed reversed message: "{{ reversedMessage }}"</view>
</template>
<script>
    export default {
            data() {
                    return {
                            message: 'Hello'
                    }
            },
            computed: {
                    // 计算属性的 getter
                    reversedMessage(){
                      return this.message.split('').reverse().join('')
                    }
            }
    }
</script>

组件

符合components/组件名称/组件名称.vue这种目录结构，easycom（不需要import导包）方式可直接使用组件。 easycom不需要局部注册，也不需要导包，直接用烤串命名方式引入组件即可。

nvue 页面暂不支持main.js注册的全局组件。

组件属性配置 type default required validator


export default {
        props: {
                // 检测类型 + 其他验证
                age: {
                        type: Number,
                        default: 0,
                        required: true,
                        validator: function(value) {
                                return value >= 0
                        }
                }
        }
}

通信

this.$refs.child来获取child-component实例


<!-- 非H5端不支持通过this.$refs.content来获取view实例 -->
<view ref="content">hello</view>

<!-- 支持通过this.$refs.child来获取child-component实例 -->
<child-component ref="child"></child-component>

.sync

父组件

 <syncA :title.sync="title"></syncA>

子组件

<view @click="changeTitle">{{title}}</view>

methods:{
    changeTitle(){
    //触发一个更新事件
         this.$emit('update:title',"uni-app")
         }
}

slot

相当于react 的this.props.children

<Child>
    <Slot></Slot> ==等价于React的== {this.props.children} 
</Child>

具名slot

    <template v-slot:header>
            <view>Here might be a page title</view>
    </template>
    <template v-slot:default>
            <view>A paragraph for the main content.</view>
            <view>And another one.</view>
    </template>

简写为

  <template #header>
            <view>Here might be a page title</view>
    </template>

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 17 天，点击查看活动详情响应式数据的基本实现

uni-app vue开发

组件

通信

.sync

slot