uniapp基本语法/组件使用

条件渲染

v-if

指令用于条件性地渲染一块内容

<template>
  <view>
   <view v-if="now">现在你可以看见我了！</view>
  </view>
</template>
<script>
	export default {
		data() {
			return {
				now:true,
			}
	}
</script>

输出结果为：

注意：判断要不要添加内容需要由true和false决定，当now的值为false时，此时内容隐藏

v-else

用来否定判断，且必须与v-if连用

<template>
  <view v-if="-1>0">yes</view>
  <view v-else>no</view>
</template>

此时输出结果为 ：no

v-else-if

用于连续使用判断语句

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

注：与v-else一样，必须与v-if连用

v-show

另一个用于根据条件展示元素的选项，与v-if用法大致一样

注：v-show不支持元素，也不支持v-else

列表渲染

v-for

用v-for把一个数组对应为一组元素

注：v-for指令需要使用item in items形式的特殊语法，items是源数据数组并且item是数组元素迭代的别名
key值的存在保证了唯一性，可以用于dom的重新渲染或是就地复用

<template>
<view>
  <view v-for="item in items" :key="item">
	 {{item.title}}
  </view>
</view>
</template>

<script>
  export default {
	data() {
		return {
			items:[
				{title:"今天是个晴天！"},
				{title:"今天是个阴天！"},
				{title:"今天是个雨天！"}
				],
			}
		}
	}

输出结果为：

模板语法

- 数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

<span>Message: {{ msg }}</span>

绑定的数据对象上msg属性发生了改变，插值处的内容都会更新。

- 使用v-once 指令，能执行一次性地插值，当数据改变时，插值处的内容不会更新

缩写语法

 v-bind缩写
//完整语法 
<a v-bind:href="url">...</a>

//缩写
<a :href="url">...</a>
v-on缩写
//完整语法
<a v-on:click="doSomething">...</a>

//缩写
<a @click="doSomething">...</a>

计算属性的 setter

计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：

computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

事件处理（监听事件）

v-on

可以用v-on指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码

v-on还可以接收一个需要调用的方法名称
v-on:click 给标签绑定函数，可以缩写为@，例如绑定一个点击函数 函数必须写在methods里面

事件修饰符

.stop
.prevent
.capture
.self
.once
.passive

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

组件定义使用

1.新建uniapp项目
2.新建目录components，此目录专门用于存放组件
3.在components组件目录里新建vue页面
在主页面中使用组件
1.在script标签内引入组件

2.注册组件

3.在试图模板中使用组件