uni-app

uniapp的文件目录属性

如图所示当我们创建好一个uni-app项目之后会有如下目录

 然后我们在index写一个简单的页面

 然后按下图点击运行编译,也可以运行到内置浏览器

 

在uniapp的页面vue里面的书写注意事项

uni-app借鉴微信小程序组件库

在项目制作之后需要适配H5，APP和小程序，所以必须书写官方提供的专业标签，写出来的代码才能直接编译到不同的客户端，

语法：

        1，模板语法：

                1.1：文本渲染

   1：    {{表达式}}
   2：      <view v-text=“表达式”></view>     
   3：             表达式
   4：    简单的js运算
   5：          <view>{{2+3}}</view>   
   6：     js方法调用
   7：          <view>{{title.length}}</view>      
   8：          <view>{{title.split("").reverse().join("")}}</view> 
   9：    3元运算符
  10：            <view>{{title.length>15?'长度很长':'字少事大'}}</view>
   11：       <view v-html="富文本 "></view>   

        1.2，条件渲染

if判断：    <view v-if="isnow>90">
                优秀
            </view>
            <view v-else-if="isnow>70 && isnow<90">
                良好
            </view>
            <view v-else-if="isnow>60 && isnow<70">
                及格
            </view>
            <view v-else="isnow<60">
                不及格
            </view>

show：v-show

        1.3，列表选项 

           1.3.1：字符串，数字，列表，对象都可以遍历

           1.3.2：一定要保证兄弟元素间的key值是唯一

        <view>

              
            <view v-for="(value,key) in person" :key="key">{{key}}:{{value}}</view>
            <view v-for="item in list" :key="item">{{item}}</view>
            <view v-for="(item,index) in 'L love China'" :key="item+index">{{item}}</view>
            <view v-for="item in 5" :key="item">{{item}}</view>
        </view>

        1.4， 属性绑定 

     1：<button v-bind:disabled=“true”>

     2：<button :disabled="true">           

        1.5，表单绑定 

                默认(单向绑定)：

 1， :value="单向绑定"              

                双向绑定： 

 v-model=“双向绑定”  目前只能在input里面使用

1：<switch type="checkbox" :checked="isCheck" @change="isCheck = $event.detail.value"></switch>

2：事件的值$event.detail.value

         1.6，修饰符

   事件修饰符
        .once 响应一次
        .prevent 阻止默认事件
        .stop 停止事件冒泡
    表单修饰符
        .number 转换为数字
        .Lazy chang事件触发 默认是input事件
    按键修饰符
        .up .right .bottom .Left
        .space .deLete .enter .esc

   1： <button @click.once="biaobai('你好')">爱就一个字，我就说一次</button>

   2：其他修饰符的写法是一至的 

vue选项 

data ：数据
methods： 方法
computed ：计算
watch：监听

data用来书写各种数据 

 

methods用来书写各种方法事件

 computed 可以计算数据的变化

 watch监听数据的变化

 uni-app的生命周期

 uni-app组件定义使用以及父子组件传值

         1：首先在components文件夹下新建一个vue文件，components是默认放置组建的目录。

 

        2：可以在父组件中导入与注册子组件，在页面上调用子组件名，也可以不导入子组件，uni-app可以自动生成

 

        3： 父组件传值给子组件

                3.1：通过 props 来完成父组件向子组件传值。
                组件中 props 定义的变量，在父组件中使用时就是子组件的属性名，通过给属性名赋值就完成了向子组件传值。

 

 

     4：子组件传值给父组件 

                4.1：

           子组件传值给父组件是通过在子组件中使用$emit来触发事件向父组件中传递参数，在父组件中使用v-on简写成@传递过来的事件名来监听子组件触发的事件。

 

 

         5：跨页面传参方法

                5.1：在参数数量少的情况下可以在url中传参

1：uni.navigateTo(

2：       { url:"http://text.exam.cn:80/test?name=张三&age=20" }

        )

                5.2：传参成功后在onload()里面接收 

1：onload(option)

2：       {

3：               var name = option.name var age = option.age

4：        }