uniapp 语法基础

前言

本文主要讲述 uniapp 的语法基础，讲述了数据绑定、条件判断和列表渲染等常用知识点并结合案例

知识点

• 数据绑定
• 条件判断
• 列表渲染

数据绑定

插值

数据绑定常见形式之一：文本插值

{{ message }}里的内容将会被替代为对应数据对象上 message 的值。绑定的数据对象上 message 发生了改变，插值处的内容会实时进行同步的更新。

<template>
 <view class="content">
  <view>数据绑定常见形式之一：{{ message }}</view>
 </view>
</template>

<script>
 export default {
  data() {
   return {
    message: '文本插值'
   }
  }
 }
</script>

<style>
 .content {
  font-size: 48rpx;
  margin-top: 28rpx;
  text-align: center;
 }
</style>

pages.json 文件中进行设置文件路径，并且可以设置表头的背景颜色和文字颜色：

{
 "pages": [ 
  {
   "path": "pages/grammar/message",
   "style": {
    "navigationBarTitleText": "文本插值"
    
   }
  },
  {
   "path": "pages/index/index",
   "style": {
    "navigationBarTitleText": "uniapp"
    
   }
  }
 ],
 "globalStyle": {
  "navigationBarTextStyle": "white",
  "navigationBarTitleText": "uni-app",
  "navigationBarBackgroundColor": "#2B9939",
  "backgroundColor": "#F8F8F8"
 }
}

浏览器显示效果如下：

指令

含义：带有 v- 前缀的特殊属性。

作用：当表达式的值改变时，DOM 会响应式地进行改变。

在pages.json 文件中进行设置文件路径:

注意写的时候是在 pages 数组里面写一个对象：

{
    "path": "pages/grammar/instruction",
    "style": {
        "navigationBarTitleText": "v-指令"
    }
},

常用指令 1：v-bind

作用：

• 动态地绑定一个或多个属性

• 一个组件 prop 到表达式。

缩写形式：

<!-- v-bind 是完整写法 -->
<image class="logo" v-bind:src="imgUrl"></image>
<!-- : 是缩写的形式 -->
<image class="logo" :src="imgUrl"></image>

常用指令 2：v-on

作用：

• 监听 DOM 事件

<!-- v-on 是完整写法 -->
<button class="button" v-on:tap="doSomething">v-on 是完整写法</button>    
<!-- @ 是缩写的形式 -->
<button class="button" @tap="doSomething">@ 是缩写的形式</button>

常用指令 3：v-html

作用：

• 更新元素的 innerHTML

注意：

• 其他端不支持此属性，除了 App 端和 H5 端支持。

<view v-html="htmlText"></view>

data() {
    return {
        imgUrl: '/static/logo.png',
        htmlText:'<div style="background-color: #2B9939;"><div >我是html</div>'
    }
},

案例全部源码：

<template>
 <view class="content">
   <!-- v-bind 是完整写法 -->
   <image class="logo" v-bind:src="imgUrl"></image>
   <!-- : 是缩写的形式 -->
   <image class="logo" :src="imgUrl"></image>

   <!-- v-on 是完整写法 -->
   <button class="button" v-on:tap="doSomething">v-on 是完整写法</button>    
   <!-- @ 是缩写的形式 -->
   <button class="button" @tap="doSomething">@ 是缩写的形式</button>

   <view v-html="htmlText"></view>

 </view>
</template>

<script> 
 export default {
  data() {
      return {
          imgUrl: '/static/logo.png',
          htmlText:'<div style="background-color: #2B9939;"><div >我是html</div>'
      }
 },
 methods:{
     doSomething(){
         console.log("hello uni-app")
     }
   }
 }
</script>

<style>
 .content {
    font-size: 48rpx;
    margin: 28rpx;
    text-align: center;
  }
  .logo {
    height: 200rpx;
    width: 200rpx;
    margin: 28rpx;
  }
  .button{
    background: #2B9939;
    color: #FFFFFF;
    margin:20rpx 0;
  }
</style>

浏览器显示效果：

条件判断

在pages.json 文件中进行设置文件路径:

{
    "path": "pages/grammar/condition",
    "style": {
        "navigationBarTitleText": "条件判断"
    }
},

v-if 和 v-else

v-if 指令作用：

• 条件性地渲染一块内容，当值为 true 的时候被渲染。

• 使用 v-else 指令来表示 v-if 的 else 块。

v-if 指令原理：

• 销毁或者重建条件块内的事件监听器和子组件

v-if 指令使用场景：

• 切换开销高，适合在运行时条件很少改变的情况下使用

v-if 指令使用注意：

• 不推荐同时使用 v-if 和 v-for，因为v-for 具有比 v-if 更高的优先级。

<!-- v-if 和 v-else -->
<view>
    <view style="color:black" v-if="manifest">manifest是true显示黑色</view>
    <view style="color:green" v-else>manifest是false显示绿色</view>
</view>

data() {
    return {
        manifest: false
    }
}

v-else-if

类似于 v-else ，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。

<!-- v-else-if -->
<view>
    <view style="color:red"    v-if="color == 'red'">red</view>
    <view style="color:yellow" v-else-if ="color == 'yellow'">yellow</view>
    <view style="color:green"  v-else-if ="color == 'green'">green</view>
    <view style="color:none"   v-else>No color</view>
</view>

data() {
    return {
        color: 'red'
    }
}

v-show

v-show 指令作用：

• 根据条件展示元素选项的指令

v-show 指令原理：

• 切换元素的 CSS 属性的 display
• 带有 v-show 的元素始终会被渲染并保留在 DOM 中

v-if 指令使用场景：

• 适合需要频繁切换的情况

<!-- v-show -->
<view v-show="show">来了，展示~</view>

data() {
    return {
        show: true
    }
}

案例全部源码：

<template>
 <view class="content">
        <!-- v-if 和 v-else -->
        <view>
            <view style="color:black" v-if="manifest">manifest是true显示黑色</view>
            <view style="color:green" v-else>manifest是false显示绿色</view>
        </view>

        <!-- v-else-if -->
        <view>
            <view style="color:red"    v-if="color == 'red'">red</view>
            <view style="color:yellow" v-else-if ="color == 'yellow'">yellow</view>
            <view style="color:green"  v-else-if ="color == 'green'">green</view>
            <view style="color:none"   v-else>No color</view>
        </view>

        <!-- v-show -->
        <view v-show="show">来了，展示~</view>
 </view>
</template>

<script> 
 export default {
  data() {
   return {
    manifest: false,
    color: 'red',
    show: true,
   }
  }
 }
</script>

<style>
 .content {
  font-size: 48rpx;
  margin-top: 28rpx;
  text-align: center;
 }
</style>

浏览器显示效果：

列表渲染

在pages.json 文件中进行设置文件路径:

{
    "path": "pages/grammar/renderingList",
    "style": {
        "navigationBarTitleText": "列表渲染"
    }
},

v-for 渲染数组

作用：

• 基于一个数组来渲染一个列表

语法：

 (item,index) in items

• item ：被迭代的数组元素的别名

• index：代表索引/下标，可选值

• items ：源数据数组

简单的案例如下：

<view v-for="(item, index) in items">
    第{{ index }}本书:  {{ item.book }}
</view>

data() {
    return {
        items:[
            { book:'JavaScript高级程序设计' },
            { book:'JavaScript设计模式与开发实践' },
            { book:'你不知道的JavaScript' },
            { book:'JavaScript DOM编程艺术' }
        ]
    }
}

浏览器显示效果：

v-for 渲染对象属性

作用：

• 用 v-for 可以遍历一个对象的属性，即 property

语法：

(value, name, index) in object

• value：被迭代的对象元素的属性值
• name：键名
• index：索引/下标

简单的案例如下：

<!-- 对象 -->
<view v-for="(value, name, index) in object">
    信息{{ index }}：{{ name }} = {{ value }}
</view>

object:{
    name: 'HLS',
    age: 18,
    profession: '前端开发工程师'
}

浏览器显示效果：

小结

本文主要讲述 uniapp 的部分语法基础，比如数据绑定的双大括号插值和 v-指令； v-if 和 v-show 的含义、作用、原理以及它们之间的使用场景；使用 v-for 渲染数组或者渲染对象属性等，结合案例进行讲解，如有疑惑扫码加作者vx，或者想进前端交流群也可添加，之后拉你进群~