uni-app(一)

最新推荐文章于 2024-08-09 17:30:47 发布

国家一级假勤奋研究牲

最新推荐文章于 2024-08-09 17:30:47 发布

阅读量1.9k

点赞数

分类专栏：前端文章标签： vue js javascript uni-app 前端设计

本文链接：https://blog.csdn.net/Enternalwiser/article/details/113729976

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

uni-app（一）

1. 插值
2. 指令
3. data属性
4. class与style绑定
5. ：key

1. 插值

数据绑定的最常见的形式：文本插值
我们使用两个大括号将需要的动态数据括起来
在script的data中通过键对的方式给出该变量的值

<template>
    <view>
        <view>Message: {{ msg }}</view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                msg: 'Hello Vue!'
            }
        }
    }
</script>

2. 指令

带有v-前缀的特殊属性

v-bind

动态的绑定一个或多个属性
v-bind可以缩写为：

<template class="app">
    <view v-bind:href="url">click me
    	<img  :src="imgsrc"> // 这里使用了缩写
    </view>
</template>  
<script>
	//创建一个vue对象
	var app = new Vue({
    el:'.app', //对应class='app'
    data:{
    //对应v-bind绑定的数据
        url:"https://www.baidu.com",
        imgsrc:"https://cn.vuejs.org/images/logo.png"
    }
});
</script>

v-on

用于监听DOM事件
v-on的缩写为@

<template class="app">
	<view>
    	<button v-on:click="myclick">click me</button>
    // 或者 @click="myclick"
    </view>
</tenplate>  
<script>
	var app = new Vue({
    el:'.app',
    data:{
        
    },
    //将绑定的事件触发写在methods中
    methods:{
        myclick:function(){
            console.log("hello");
        }
    }
});
</script>

v-html

更新元素的innerHTML
内容按照普通的HTML插入，不会作为vue模板进行编译

<template>
        <view>
            <view v-html="rawHtml"></view>
        </view>
    </template>
    <script>
        export default {
            data() {
                return {
                //这里的文本会按照HTML的模式渲染
                    rawHtml: '<div style="text-align:center;background-color: #007AFF;"><div >我是内容</div><img src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-uni-app-doc/d8590190-4f28-11eb-b680-7980c8a877b8.png"/></div>'
                }
            }
        }
    </script>

v-if 条件渲染

条件性的渲染一块内容，与编程中的if-else相同，当表达式的值为true时，加载内容
用法一：变量值为true/false来判断是否渲染

<template>
        <view>
            <view v-if="seen">现在你看到我了</view>
            <view v-else>你看不到我了</view>
        </view>
    </template>
    <script>
        export default {
            data() {
                return {
                    seen: true
                }
            }
        }
    </script>

用法二：表达式的值为true/false来判定是否渲染

<template>
        <view>
        //注意这里的表达式时三个=！
            <view v-if="type === 'A'">
                A
            </view>
            <view v-else-if="type === 'B'">
                B
            </view>
            <view v-else-if="type === 'C'">
                C
            </view>
            <view v-else>
                Not A/B/C
            </view>
        </view>
    </template>
    <script>
        export default {
            data() {
                return {
                    type:'B'
                }
            }
        }
    </script>

用法三：切换多个元素——将v-if绑定在template上

<template v-if="seen">
    <view>标题</view>
    <view>内容：现在你看到我了</view>
</template>

v-show

根据条件展示元素选项，用法与v-if大致相同

<view v-show="ok">Hello!</view>

v-for

实现基于数组来渲染一个列表

使用item， index in items形式的特殊语法

第一个参数item时被迭代的数组元素的别名
第二个参数index为当前项的索引，可选

用法一：迭代data中的items

<template>
        <view>
        这里的items对应数据中的items
            <view v-for="(item, index) in items">
                {{ index }} - {{ item.message }}//这里使用.message来显示其属性
            </view>
        </view>
    </template>
    <script>
        export default {
            data() {
                return {
                    items: [
                        { message: 'Foo' },
                        { message: 'Bar' }
                    ]
                }
            }
        }
    </script>

用法二：迭代data中的对象内容
形式：value，key， index in items
第一个为数组元素的值、第二个为键名，第三个为索引

<template>
        <view>
            <view v-for="(value, name, index) in object">
                 {{ index }}. {{ name }}: {{ value }}
            </view>
        </view>
    </template>
    <script>
        export default {
            data() {
                return {
                    object: {
                        title: 'How to do lists in Vue',
                        author: 'Jane Doe',
                        publishedAt: '2020-04-10'
                    }
                }
            }
        }
    </script>

结果

	0.title: How to do lists in Vue,
    1.author: Jane Doe,
    2.publishedAt: 2020-04-10

3. data属性

data必须声明为一个返回初始数据对象的函数，否则页面关闭时，数据不会自动销毁，再次打开时，会显示上次的数据

 //正确用法，使用函数返回对象
    data() {
    //注意这里需要使用return来返回对象
        return {
            title: 'Hello'
        }
    }

    //错误写法，会导致再次打开页面时，显示上次数据
    data: {
        title: 'Hello'
    }

    //错误写法，同样会导致多个组件实例对象数据相互影响
    const obj = {
        title: 'Hello'
    }
    data() {
        return {
            obj
        }
    }

4. class与style绑定

实现一：可以传给v-bind：class一个对象，实现动态切换class
注意v-bind：class可以与普通的class共存

 <template>
        <view>
            <!-- class -->
            //这里使用：class动态绑定了属性active
            <view class="static" :class="{ active: isActive}">111</view>
            //这里的active用isActive来管理是否开启
            <view class="static" :class="{ active: isActive, 'text-danger': hasError }">222</view>
            <!-- style -->
            <view v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">333</view>
        </view>
    </template>
    <script>
        export default {
            data() {
                return {
                    isActive: true, //这里为Boolean变量，表示样式的开启和禁止
                    hasError: false,
                    activeColor:"green",//绑定在style中
                    fontSize:50
                }
            }
        }
    </script>
    <style>
    .static{
        color: #2C405A;
    }
    .active{
        background-color: #007AFF;
    }
    .text-danger{
        color: #DD524D;
    }
    </style>

实现二：通过传入数组实现多个样式的动态加载

<template>
    <view>
        <!-- class -->
        <view class="static" :class="[activeClass,errorClass]">111</view>
        //传入数组直接加载两个样式
        <view class="static" v-bind:class="[isActive ? activeClass : '', errorClass]">222</view><!-- 三元表达式 -->
        //使用三元表达式选择应该加载的样式
        <view class="static" v-bind:class="[{ active: isActive }, errorClass]">333</view>
        //使用数组来规定是否需要加载第二个样式
        <!-- style -->
        <view v-bind:style="[{ color: activeColor, fontSize: fontSize + 'px' }]">444</view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                isActive: true,
                activeClass: 'active',
                errorClass: 'text-danger',
                activeColor:"green",
                fontSize:50
            }
        }
    }
</script>
<style>
    .static{
        font-size:30rpx;
    }
    .active{
        background-color: #007AFF;
    }
    .text-danger{
        font-size:60rpx;
        color:#DD524D;
    }
</style>

5. ：key

当vue更新使用v-for渲染的元素列表时，它默认使用“就地更新”的策略，即使数据项的顺序改变，vue并不会移动DOM元素来匹配其顺序

如果列表中项目的位置想要发生动态改变或者有新项目的添加，并且让其他项目保持自己的特征和状态，我们需要使用：key来指定类别中项目的唯一标识符

两种提供形式

v-for中item的某个key-value中的key
v-for中item本身——需要ite本身为一个唯一字符串或者数字

当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率

    <template>
        <view>
            <!-- array 中 item 的某个key -->
            <view v-for="(item,index) in objectArray" :key="item.id">
                {{index +':'+ item.name}}
            </view>
            <!-- item 本身是一个唯一的字符串或者数字时，可以使用 item 本身 -->
            <view v-for="(item,index) in stringArray" :key="item">
                {{index +':'+ item}}
            </view>
        </view>
    </template>
    <script>
    export default {
        data () {
            return {
            //注意这里是数组套字典
                objectArray:[{
                    id:0,
                    name:'li ming'
                },{
                    id:1,
                    name:'wang peng'
                }],
                stringArray:['a','b','c']
            }
        }
    }
    </script>