uniapp语法（vue语法）

时间：2024-10-07 07:23:56

模板指令

条件渲染

v-if#

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染。

<h1 v-if="awesome">Vue is awesome!</h1>

v-else#

你也可以使用 v-else 为 v-if 添加一个“else 区块”

    

  1. 

    

    
<button @click="sayhi = !sayhai">点击</button>

    

    2. 

  2. 

    

     
    

    3. 

  3. 

    

    
<h1 v-if="sayhai">哈喽!</h1>

    

    4. 

  4. 

    

    
<h1 v-else>再见！</h1>

    

    5.

v-else-if#

顾名思义，v-else-if 提供的是相应于 v-if 的“else if 区块”。它可以连续多次重复使用：和 v-else 类似，一个使用 v-else-if 的元素必须紧跟在一个 v-if 或一个 v-else-if 元素后面。

    

  1. 

    

    <view v-if="score>80">
    

    2. 

  2. 

    

       优秀 
    

    3. 

  3. 

    

    
</view>   
    

    4. 

  4. 

    

    <view v-else-if="socre>70">
    

    5. 

  5. 

    

        良好
    

    6. 

  6. 

    

    </view>
    

    7. 

  7. 

    

    
<view v-else>不及格</view>

    

    8.

列表渲染

v-for#

我们可以使用 v-for 指令基于一个数组来渲染一个列表。v-for 指令的值需要使用 item in items 形式的特殊语法，其中 items 是源数据的数组，而 item 是迭代项的别名：

    

  1. 

    

    
data() {
    

    2. 

  2. 

    

      return {
    

    3. 

  3. 

    

        items: {1,2,3,4}
    

    4. 

  4. 

    

      }
    

    5. 

  5. 

    

    }
    

    6. 

<view v-for="item in items">{{item}}</view>

在 v-for 块中可以完整地访问父作用域内的属性和变量。v-for 也支持使用可选的第二个参数表示当前项的位置索引。

    

  1. 

    

    <view v-for="(item,index) in ' i love china' " :key="index">
    

    2. 

  2. 

    

        {{item}}
    

    3. 

  3. 

    

    </view>
    

    4.

属性绑定

双向绑定

    

  1. 

    

    <view class="title">
    

    2. 

  2. 

    

        双向绑定
    

    3. 

  3. 

    

    </view>
    

    4. 

  4. 

    

    <switch type="checkbox" :checked="ischeck" @change="ischeck=$" />
    

    5. 

  5. 

    

    
<button :disabled="!ischeck" type="warn">提交</button>

    

    6.

表单绑定 

    

  1. 

    

    <input :value="单向绑定" />
    

    2. 

  2. 

    

    <input v-modle="双向绑定" />
    

    3. 

  3. 

    

    <input @change="$" />
    

    4.

事件绑定 

    

  1. 

    

    
<button @click="showMsg" type="primary">事件响应不带（）</button>

    

    2. 

  2. 

    

    
<button @click="showMsg()">事件响应带（） </button>

    

    3. 

  3. 

    

    
<button @click="showMsg($event)">事件响应带($event)</button>

    

    4. 

  4. 

    

    
<button @click="showMsg($event,'38妇女节快乐')">事件响应带($event)</button>

    

    5. 

    

  1. 

    

    
methods: {
    

    2. 

  2. 

    

        showMsg(e,msg='春天到啦'){
    

    3. 

  3. 

    

            console.log(e,'事件参数');
    

    4. 

  4. 

    

            uni.showToast({
    

    5. 

  5. 

    

                title:msg
    

    6. 

  6. 

    

            })
    

    7. 

  7. 

    

        }
    

    8. 

  8. 

    

    }
    

    9.

修饰符

事件修饰符

.once响应一次

.prevent 阻止默认事件

.stop 停止事件冒泡

表单修饰符

. number转换为数字

lazy chang 事件触发默认是input事件

按键修饰符

.up .right . bottom .left

.space .delete .enter .esc 

<button @="biaobai">你好 </button>

选项

    

  1. 

    

    export default {
    

    2. 

  2. 

    

        //存放数据
    

    3. 

  3. 

    

        data(){
    

    4. 

  4. 

    

            return {
    

    5. 

  5. 

    

            }
    

    6. 

  6. 

    

        },
    

    7. 

  7. 

    

        //监听
    

    8. 

  8. 

    

        watch:{},
    

    9. 

  9. 

    

        //函数方法
    

    10. 

  10. 

    

        methods:{},
    

    11. 

  11. 

    

        //计算
    

    12. 

  12. 

    

        computed:{}
    

    13. 

  13. 

    

    }
    

    14.

生命周期

创建前后

beforeCreate

在实例初始化之后被调用

created

在实例创建完成后被立即调用

挂载前后

beforeMount

在挂载开始之前被调用。

mounted

挂载到实例上去之后调用。

更新前后

beforeUpdate

数据更新时调用，发生在虚拟 DOM 打补丁之前

updated

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

卸载前后

beforeDestroy

实例销毁之前调用。在这一步，实例仍然完全可用。

destroyed

Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

组件

创建

在app根目录新建components文件夹，右键新建一个组件

导入

在需要的页面进行导入

    

  1. 

    

    
import cut from '@/components/cut/'

    

    2. 

  2. 

    

    
export default{
    

    3. 

  3. 

    

    //注册组件
    

    4. 

  4. 

    

     components:{cut},
    

    5. 

  5. 

    

    }
    

    6. 

    

  1. 

    

    //使用组件
    

    2. 

  2. 

    

    <view class="">
    

    3. 

  3. 

    

        <cut :seconds="10" ref="cut1" :auto="true"></cut>

    

    4. 

  4. 

    

    </view>
    

    5.

父子传参

父组件传递参数，子组件通过props接收参数

    

  1. 

    

    props:{
    

    2. 

  2. 

    

                seconds:{
    

    3. 

  3. 

    

                    type:Number,
    

    4. 

  4. 

    

                    default:1
    

    5. 

  5. 

    

                },
    

    6. 

  6. 

    

                auto:{
    

    7. 

  7. 

    

                    type:Boolean,
    

    8. 

  8. 

    

                    default:false
    

    9. 

  9. 

    

                }
    

    10. 

  10. 

    

            }
    

    11.

子父传参

子组件中定义一个方法，父组件接收

    

  1. 

    

    //父组件
    

    2. 

  2. 

    

    
<button @click="$refs.()" type="warn">开始</button>

    

    3. 

    

  1. 

    

    //子组件
    

    2. 

  2. 

    

    
tiker(){
    

    3. 

  3. 

    

                    this.ind=setInterval(()=>{
    

    4. 

  4. 

    

                        this.count--;
    

    5. 

  5. 

    

                        if(this.count<=0){
    

    6. 

  6. 

    

                            clearInterval(this.ind)
    

    7. 

  7. 

    

                            //向父组件发送事件

    

    8. 

  8. 

    

                            this.$emit("stop",this.count)
    

    9. 

  9. 

    

                        }
    

    10. 

  10. 

    

                    },1000)
    

    11. 

  11. 

    

                }
    

    12.

跨层传参

跨层传参通常使用$emit

相关文章