uniapp基本语法/组件使用

悠悠 2021-09-13 15:54 935阅读 0赞

## 条件渲染 ##

### v-if  ###

###  ###

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

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

输出结果为：  
![在这里插入图片描述][20200310170217809.png]  
**注意：判断要不要添加内容需要由true和false决定，当now的值为false时，此时内容隐藏**

### v-else  ###

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

此时输出结果为 ：no

### v-else-if  ###

用于连续使用判断语句

**注：与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:"今天是个雨天！"}
    				],
    			}
    		}
    	}

输出结果为：  
![在这里插入图片描述][202003101735338.png]

## 模板语法 ##

**- 数据绑定最常见的形式就是使用“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>
    
    
    
    <div v-on:click.self="doThat">...</div>

## 组件定义使用 ##

1.新建uniapp项目  
2.新建目录components，此目录专门用于存放组件  
3.在components组件目录里新建vue页面  
**在主页面中使用组件**  
1.在script标签内引入组件  
![import  组件名称  from "../../components/组件名.vue"][import _ from _.._.._components_.vue]  
2.注册组件  
![export default\{components:\{组件名称\},\}][export default_components]  
3.在试图模板中使用组件  
![在这里插入图片描述][20200311161741660.png]

[20200310170217809.png]: /images/20210913/eeadb1d68f364bf3a42058587e0bbb8d.png
[202003101735338.png]: /images/20210913/14ef036356f74ac381e2069a35af5056.png
[import _ from _.._.._components_.vue]: /images/20210913/c0ccf618795e4cd288b428e9fef0ffcf.png
[export default_components]: /images/20210913/ab878788a3f446389a673292c3aa92f5.png
[20200311161741660.png]: /images/20210913/a1aab2e09d3e430cb5be3eec81e9f4c0.png