uniapp心得体会

最新推荐文章于 2024-09-14 11:41:55 发布
最新推荐文章于 2024-09-14 11:41:55 发布
阅读量147 收藏
点赞数
文章标签： uni-app javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_72061591/article/details/131225048
版权

一、介绍

(一) Vue.js是什么

Vue（读音 /vjuː/，类似于view）是一套用于构建用户界面的渐进式框架。Vue被设计为可以自底向上逐层应用。

Vue.js使用了基于HTML的模板语法，允许开发者声明式地将DOM绑定至底层Vue实例的数据。所有Vue.js的模板都是合法的HTML，所以能被遵循规范的浏览器和HTML解析器解析。

在底层的实现上，Vue将模板编译成虚拟DOM渲染函数。结合响应系统，Vue能够智能地计算出最少需要重新渲染多少组件，并把DOM操作次数减到最少。

Vue.js的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进DOM的系统，只关注视图层，易于上手。所有东西都是响应式的。

(二) vue相比传统js的开发优势

在传统开发中，用原生的JavaScript DOM操作函数对DOM进行频繁操作的时候，浏览器要不停的渲染新的DOM树，导致页面看起来非常卡顿。

vue是单页面应用，使页面局部刷新，不用每次跳转页面都要请求所有数据和DOM，这样大大加快了访问速度和提升用户体验。

1、vue的优势

  • 轻量级渐进式框架

  • 视图、数据和结构的分离

  • 响应式双向数据绑定

  • 组件化

  • 虚拟DOM

  • 运行速度快，易于上手

  • 便于与第三方库或既有项目整合

2、文件类型

  • 以前是.html文件，开发也是html，运行也是html。

  • 现在是.vue文件，开发是vue，经过编译后，运行时已经变成了js文件。

  • 现代前端开发，很少直接使用HTML，基本都是开发、编译、运行。所以uni-app有编译器、运行时的概念。

3、文件内代码架构的变化

  • 以前一个html大节点，里面有script和style节点。

    <!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8" />  
        <title></title>  
        <script type="text/javascript">
        </script>  
        <style type="text/css">  
        </style>  
    </head>  
    <body>  
    </body>  
</html>

  • 现在template是一级节点，用于写tag组件，script和style是并列的一级节点，也就是有3个一级节点。

    <template>  
    <view>  
    注意必须有一个view，且只能有一个根view。所有内容写在这个view下面。  
    </view>  
</template>  
<script>  
    export default {  
    }  
</script>  
<style>  
</style>

[操作]  在pages目录下新建vue目录，新增old.html与new.vue文件，对比代码架构。

4、外部文件引用方式变化

  • 以前通过script src、link href引入外部的js和css。

<script src="js/jquery-1.10.2.js" type="text/javascript"></script>  
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

  • 现在是es6的写法， require或import引入外部的js模块（注意不是文件）或css。

js要require进来，变成了对象。

function formatTime(time) {  
    return time;                // 这里面写逻辑  
}  
module.exports = {  
    formatTime: formatTime  
}
<script>  
    var util = require('../../common/util.js');         // require这个js模块  
    var formatedPlayTime = util.formatTime(playTime);      // 调用js模块的方法  
</script>

[操作]  在根目录下新建common目录，新增util.js文件，添加脚本代码。在pages/vue目录下，新增external.vue文件，引用util.js，调用其方法。

css外部文件导入。

<style>  
    @import "./common/uni.css";  
    .uni-hello-text{  
        color:#7A7E83;  
    }  
</style>

另外，vue支持组件导入，可以更方便的封装一个包括界面、js、样式的库。

5、组件/标签的变化

以前是html标签，比如<div>，现在是小程序组件，比如<view>。

那么标签和组件有什么区别，不都是用尖括号包围起来一段英文吗？

  • 其实标签是老的概念，标签属于浏览器内置的东西。

  • 但组件，是可以自由扩展的。类似你可以把一段js封装成函数或模块，你也可以把一个ui控件封装成一个组件。

6、js的变化

  • 以前的 DOM 操作，如果你想改变某个 DOM 元素的显示内容，比如一个view的显示文字：给view设id，然后js里通过选择器获取 DOM 元素，进一步通过js进行赋值操作，修改 DOM 元素的属性或值。

    <html>  
    <head>  
        <script type="text/javascript">  
            document.addEventListener("DOMContentLoaded",function () {  
                document.getElementById("spana").innerText="456"  
            })  
            function changetextvalue () {  
                document.getElementById("spana").innerText="789"  
            }  
        </script>  
    </head>  
    <body>  
        <span id="spana">123</span>  
        <button type="button" οnclick="changetextvalue()">修改为789</button>  
    </body>  
</html>

  • 现在的做法，是vue的绑定模式，给这个DOM元素绑定一个js变量，在script中修改js变量的值，DOM会自动变化，页面会自动更新渲染（MVVM）。

    <template>  
    <view>  
        <text>{{textvalue}}</text><!-- 这里演示了组件值的绑定 -->  
        <button :type="buttontype" @click="changetextvalue()">修改为789</button><!-- 这里演示了属性和事件的绑定 -->  
    </view>  
</template>  
<script>  
    export default {  
        data() {  
            return {  
                textvalue:"123",  
                buttontype:"primary"  
            };  
        },  
        onLoad() {  
            this.textvalue="456"//这里修改textvalue的值，其实123都来不及显示就变成了456  
        },  
        methods: {  
            changetextvalue() {  
                this.textvalue="789"//这里修改textvalue的值，页面自动刷新为789  
            }  
        }  
    }  
</script>

    [操作]  在pages/vue目录下新增oldjs.html与newjs.vue文件，对比脚本变化。

(三) 在uni-app中使用差异

uni-app在发布到H5时支持所有vue的语法；发布到App和小程序时，由于平台限制，无法实现全部vue语法，但uni-app仍是对vue语法支持度最高的跨端框架。

二、基础

(一) 模版语法

1、插值

a. 插值

数据绑定最常见的形式就是文本插值：

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

[注]  {{msg}}里的内容将会被替代为对应数据对象上msg的值。无论何时，绑定的数据对象上msg发生了改变，插值处的内容都会更新。

[操作]  在page目录下新建basic目录，新增data.vue文件，实现文本插值绑定。

b. 使用JavaScript表达式

迄今为止，在我们的模板中，我们一直都只绑定简单的property键值。但实际上，对于所有的数据绑定，Vue.js都提供了完全的JavaScript表达式支持。

<template>
    <view>
      <view>{{ number + 1 }}</view>
      <view>{{ ok ? 'YES' : 'NO' }}</view>
      <!-- 把一个字符串分割成字符串数组,颠倒其元素的顺序,把数组中的所有元素放入一个字符串 -->
      <view>{{ message.split('').reverse().join('') }}</view>
    </view>
</template>
<script>
  export default {
    data() {
      return {
        number:1,
        ok:true,
        message: 'Hello Vue!'
      }
    }
  }
</script>

[操作]  编辑data.vue文件，实现JavaScript表达式绑定。

<template>
  <view>
    <view v-for="(item,index) in 10">
      <!-- 通过%运算符求余数，实现隔行换色的效果 -->
      <view :class="'list-' + index%2">{{index%2}}</view>
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return { }
    }
  }
</script>
<style>
  .list-0{
    background-color: #aaaaff;
  }
  .list-1{
    background-color: #ffaa7f;
  }
</style>

[操作]  编辑data.vue文件，实现隔行换色。

这些表达式会在所属Vue实例的数据作用域下作为JavaScript被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。

<template>
  <view>
    <!-- 这是语句，不是表达式 -->
    <view>{{ var a = 1 }}</view>
    <!-- 流控制也不会生效，请使用三元表达式 -->
    <view>{{ if (ok) { return message } }}</view>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        ok:true,
        message: 'Hello Vue!'
      }
    }
  }
</script>

2、指令

指令是带有 v- 前缀的特殊属性。

  • v-bind：动态地绑定一个或多个属性，或一个组件prop到表达式。v-bind缩写为“:”。

    <image v-bind:src="imgUrl"></image>
<!-- 缩写 -->
<image :src="imgUrl"></image>
​
<button v-bind:disabled="isButtonDisabled">Button</button>

    [操作]  在pages/basic目录新增instruct.vue文件，实现v-bind绑定。

  • v-on：用于监听DOM事件。v-on缩写为“@”。

    <!-- 完整语法 -->
<view v-on:click="doSomething">点击</view>    
<!-- 缩写 -->
<view @click="doSomething">点击</view>

    [操作]  编辑instruct.vue文件，实现v-on绑定。

(二) Data属性

data必须声明为返回一个初始数据对象的函数（注意函数内返回的数据对象不要直接引用函数外的对象）；否则页面关闭时，数据不会自动销毁，再次打开该页面时，会显示上次数据。

// 正确用法，使用函数返回对象
data() {
  return {
    title: 'Hello'
  }
}
​
// 错误写法，会导致再次打开页面时，显示上次数据
data: {
  title: 'Hello'
}
​
// 错误写法，同样会导致多个组件实例对象数据相互影响
const obj = {
  title: 'Hello'
}
data() {
  return {
    obj
  }
}

(三) Class与Style绑定

可以传给v-bind:class一个对象，实现动态地切换class。

也可以在对象中传入更多字段来动态切换多个class。此外，v-bind:class指令也可以与普通的class共存。

<template>
  <view>
    <!-- class -->
    <view class="static" :class="{ active: isActive}">111</view>
    <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,
        hasError: true,
        activeColor:"green",
        fontSize:50
      }
    }
  }
</script>
<style>
  .static{
    color: #2C405A;
  }
  .active{
    background-color: #007AFF;
  }
  .text-danger{
    color: #DD524D;
  }
</style>

[操作]  在pages/basic目录新增style.vue文件，实现Class与Style绑定。

(四) 条件渲染

1、v-if和v-else

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

v-else指令：表示v-if的“else块”。

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

[操作]  在pages/basic目录新增condition.vue文件，使用v-if和v-else指令。

2、v-else-if

v-else-if指令：充当v-if的“else-if块“，可以连续使用。

<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>

[操作]  编辑condition.vue文件，使用v-else-if指令。

3、条件渲染分组

因为v-if是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时可以把一个template元素当做不可见的包裹元素，并在上面使用v-if。最终的渲染结果将不包含template元素。

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

[操作]  编辑condition.vue文件，使用条件渲染分组。

4、v-show

v-show指令：根据条件展示元素选项的指令。用法大致和v-if一样。

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

不同的是带有v-show的元素始终会被渲染并保留在DOM中。v-show只是简单地切换元素的CSS属性的display。

[注]  v-show不支持template元素，也不支持v-else。

[操作]  编辑condition.vue文件，使用v-show指令。

(五) 列表渲染

1、在v-for里使用数组

v-for指令可以实现基于一个数组来渲染一个列表。

v-for指令需要使用item in items形式的特殊语法，其中items是源数据数组，而item则是被迭代的数组元素的别名。

<template>
  <view>
    <view v-for="(item, index) in items">
      {{ index }} - {{ item.message }}
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        items: [
          { message: 'Foo' },
          { message: 'Bar' }
        ]
      }
    }
  }
</script>

[注]  第一个参数item是被迭代的数组元素的别名。第二个参数，即当前项的索引index，是可选的。

[操作]  在pages/basic目录下，新增list.vue文件，实现列表渲染。

2、在v-for里使用对象

也可以用v-for来遍历一个对象的property。

<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: 'Anley',
          publishedAt: '2021-07-10'
        }
      }
    }
  }
</script>

[注]  第一个参数value是被迭代的对象元素的属性值。第二个参数为property名称 (也就是键名)。第三个参数作为索引。

[操作]  编辑list.vue文件，实现对象property遍历。

3、列表渲染分组

类似于v-if，可以利用带有v-for的template来循环渲染一段包含多个元素的内容。

<template v-for="item in items">
  <view>{{ item.message }}</view>
  <view class="divider" role="presentation"></view>
</template>

[操作]  编辑list.vue文件，使用template实现列表渲染。

4、key

当Vue正在更新使用v-for渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue将不会移动DOM元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。

如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如input中的输入内容，switch的选中状态），需要使用:key来指定列表中项目的唯一的标识符。

:key的值以两种形式提供

  • 使用v-for循环array中item的某个property，该property的值需要是列表中唯一的字符串或数字，且不能动态改变。

  • 使用v-for循环中item本身，这时需要item本身是一个唯一的字符串或者数字。

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

<template>
  <view>
    <!-- array 中 item 的某个 property -->
    <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>

[操作]  编辑list.vue文件，实现列表渲染时key的赋值。

5、在组件上使用v-for

在自定义组件上，你可以像在任何普通元素上一样使用v-for 。

<my-component v-for="item in items" :key="item.id"></my-component>

当在组件上使用v-for时，key是必须的。

(六) 事件处理器

1、监听事件

可以用@事件监听DOM事件，并在触发时运行一些JavaScript代码。

<template>
  <view>
    <button @click="counter += 1">Add 1</button>
    <text>The button above has been clicked {{ counter }} times.</text>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        counter:0
      }
    }
  }
</script>

[操作]  在pages/basic目录下，新增event.vue文件，实现列表渲染。

2、事件处理方法

然而许多事件处理逻辑会更为复杂，所以直接把JavaScript代码写在@事件中是不可行的。因此@事件还可以接收一个需要调用的方法名称。

<template>
  <view>
    <!-- greet是在下面定义的方法名 -->
    <button @click="greet">Greet</button>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        name: 'Vue.js'
      }
    },
    // 在methods对象中定义方法
    methods: {
      greet(event){
        // event是原生DOM事件
        console.log(event);
        uni.showToast({
          title: 'Hello ' + this.name + '!'
        });
      }
    }
  }
</script>

[操作]  编辑event.vue文件，实现较复杂的事件处理。

3、内联处理器中的方法

除了直接绑定到一个方法，也可以在内联JavaScript语句中调用方法：

<template>
  <view>
    <button @click="say('hi')">Say hi</button>
    <button @click="say('what')">Say what</button>
  </view>
</template>
<script>
  export default {
    methods: {
      say(message) {
        uni.showToast({
          title: message
        });
      }
    }
  }
</script>

[操作]  编辑event.vue文件，实现内联处理方法。

4、事件修饰符

修饰符（modifier）是以半角句号.指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

@事件（v-on）提供了以下事件修饰符：

  • .stop：阻止冒泡，各平台均支持。

  • .prevent：阻止默认事件，仅在H5平台支持。

  • .capture：添加事件侦听器时使用事件捕获模式，仅在H5平台支持。

  • .self：只当事件在该元素本身（比如不是子元素）触发时触发回调，仅在H5平台支持。

  • .once：事件只触发一次，仅在H5平台支持。

<!-- 阻止单击事件继续传播 -->
<view @click.stop="doThis"></view>

[操作]  编辑event.vue文件，使用.stop修饰符阻止冒泡。

(七) 表单控件绑定

1、v-model

你可以用v-model指令在表单input、textarea及select元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。

<template>
  <view>
    <input v-model="message" placeholder="edit me">
    <text>Message is: {{ message }}</text>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        message:""
      }
    }
  }
</script>

[注]  v-model会忽略所有表单元素的value、checked、selected等attribute的初始值而总是将Vue实例的数据作为数据来源。你应该通过JavaScript在组件的data选项中声明初始值。

[操作]  在pages/basic目录下，新增form.vue文件，实现双向数据绑定。

2、uni-app表单组件

  • H5的select标签用picker组件进行代替。

    <template>
  <view>
    <picker @change="bindPickerChange" :value="index" :range="array">
      <view class="picker">
        当前选择：{{array[index]}}
      </view>
    </picker>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        index: 0,
        array: ['A', 'B', 'C']
      }
    },
    methods: {
      bindPickerChange(e) {
        console.log(e)
      }
    }
  }
</script>

    [操作]  编辑form.vue文件，实现picker组件。

  • 表单元素radio用radio-group组件进行代替。

    <template>
  <view>
    <radio-group class="radio-group" @change="radioChange">
      <label class="radio" v-for="(item, index) in items" :key="item.name">
        <radio :value="item.name" :checked="item.checked" /> {{item.value}}
      </label>
    </radio-group>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        items: [{
            name: 'USA',
            value: '美国'
          },
          {
            name: 'CHN',
            value: '中国',
            checked: 'true'
          },
          {
            name: 'BRA',
            value: '巴西'
          },
          {
            name: 'JPN',
            value: '日本'
          },
          {
            name: 'ENG',
            value: '英国'
          },
          {
            name: 'TUR',
            value: '法国'
          }
        ]
      }
    },
    methods: {
      radioChange(e) {
        console.log('radio发生change事件，携带value值为：', e.target.value)
      }
    }
  }
</script>

    [操作]  编辑form.vue文件，实现radio-group组件。

三、组件

组件是视图层的基本组成单元。

组件是一个单独且可复用的功能模块的封装。

一个组件包括开始标签和结束标签，标签上可以写属性，并对属性赋值。

(一) 注册

在注册一个组件的时候，我们始终需要给它一个名字。 定义组件名的方式有两种：

  • 使用kebab-case

当使用kebab-case（短横线分隔命名）定义一个组件时，你也必须在引用这个自定义元素时使用kebab-case，例如<my-component-name>。

  • 使用PascalCase

当使用PascalCase（驼峰式命名）定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说<my-component-name>和<MyComponentName>都是可接受的。

在uni-app工程根目录下的components目录，创建并存放自定义组件：

│─components                   符合vue组件规范的uni-app组件目录
│  └─componentA                符合‘components/组件名称/组件名称.vue’目录结构，easycom方式可直接使用组件
│          └─componentA.vue    可复用的componentA组件
│  └─component-a.vue           可复用的component-a组件

1、全局注册

uni-app支持配置全局组件，需在main.js里进行全局注册，注册后就可在所有页面里使用该组件。

  • main.js里进行全局导入和注册

    import Vue from 'vue'
import pageHead from './components/page-head.vue'
Vue.component('page-head',pageHead)

    [注]  Vue.component的第一个参数必须是静态的字符串。

  • index.vue里可直接使用组件

    <template>
  <view>
    <page-head></page-head>
  </view>
</template>

[操作]  新建components目录，新增page-head.vue文件，完成组件设计。在main.js中进行全局导入和注册。在pages目录中新建component目录，新增page1.vue文件，设计页面，引用page-head组件。

2、局部注册

局部注册之前，在需要引用该组件的页面，导入你想使用的组件。

  • 传统vue规范

    在.vue页面中，通过import方式引入组件，在components选项中定义你想要使用的组件。

    <!-- 在index.vue引入 uni-badge 组件-->
<template>
  <view>
    <uni-badge text="1"></uni-badge><!-- 3.使用组件 -->
  </view>
</template>
<script>
  // 1.导入组件（这步属于传统vue规范，但在uni-app的easycom下可以省略这步）
  import uniBadge from '@/components/uni-badge/uni-badge.vue';
  export default {
    // 2.注册组件（这步属于传统vue规范，但在uni-app的easycom下可以省略这步）
    components:{ uniBadge }
  }
</script>

    [操作]  在components目录新建uni-badge目录，新增uni-badge.vue文件，完成组件设计。在pages/component目录中新增page2.vue文件，注册并引用uni-badge组件。

  • 通过uni-app的easycom

    将组件引入精简为一步。只要组件安装在项目的uni_modules目录下，并符合uni_modules/组件名称/components/组件名称/组件名称.vue目录结构。就可以不用引用、注册，直接在页面中使用。

    <!-- 在index.vue引入 uni-badge 组件-->
<template>
  <view>
    <uni-badge text="1"></uni-badge><!-- 3.使用组件 -->
  </view>
</template>
<script>
  // 这里不用import引入，template里就可以直接用
  export default {
    data() {
      return {
      }
    }
  }
</script>

    [注]  easycom是自动开启的，不需要手动开启。

    [操作]  新建/uni_modules/uni-badge/components/uni-badge目录，新增uni-badge.vue文件，完成组件设计。在pages/component目录中新增page3.vue文件，直接引用uni-badge组件。

(二) props

props可以是数组或对象，用于接收来自父组件的数据。props可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义验证和设置默认值。

<template>
  <view>
    <!-- 我是子组件componentA -->
    <view>{{age}}</view>
  </view>
</template>
<script>
  export default {
    props: {
      // 检测类型 + 其他验证
      age: {
        type: Number,       // type：会检查一个prop是否是给定的类型，否则抛出警告。
        default: 0,         // default：为该prop指定一个默认值。如果该prop没有被传入，则换做用这个值。对象或数组的默认值必须从一个工厂函数返回。
        required: true,     // required：定义该prop是否是必填项。
        validator: function(value) {     // 自定义验证函数会将该prop的值作为唯一的参数代入。
          return value >= 0
        }
      }
    }
  }
</script>
<template>
  <view>
    <!-- 我是父组件 -->
    <componentA :age="10"></componentA>
  </view>
</template>

[操作]  在pages/component目录下，新增componentA.vue文件，完成子组件设计。新增props.vue文件，完成父组件设计，引用componentA子组件。

如果你想要将一个对象的所有property都作为prop传入，你可以使用不带参数的v-bind（取代v-bind:prop-name）。

post: {
  id: 1,
  title: 'My Journey with Vue'
}
<blog-post v-bind="post"></blog-post>
<!-- 上面的模板等价于： -->
<blog-post
  v-bind:id="post.id"
  v-bind:title="post.title"
></blog-post>

[操作]  在pages/component目录下，新增blogPost.vue文件，完成子组件设计。编辑props.vue文件，引用blogPost子组件。

所有的prop都使得其父子prop之间形成了一个单向下行绑定：父级prop的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。

(三) ref

ref是被用来给元素或子组件注册引用信息的。引用信息将会注册在父组件的$refs对象上。

<template>
  <!-- 父组件 -->
  <div>
    <h1>我是父组件！</h1>
    <child ref="msg"></child>
  </div>
</template>
<script>
  import child from '../components/child1.vue'
  export default {
    components: {child},
    mounted: function () {
      console.log(this.$refs.msg);
      this.$refs.msg.setMessage('我是子组件一！')
    }
  }
</script>
<template>
  <!-- 子组件 -->
  <h3>{{message}}</h3>
</template>
<script>
  export default {
    data(){
      return{
        message:''
      }
    },
    methods:{
      setMessage(m){
        this.message=m;
      }
    }
  }
</script>

[操作]  在pages/component目录下，新增child1.vue文件，完成子组件设计。新增ref.vue文件，完成父组件设计，引用child1子组件，并调用其方法。

[prop与ref之间的区别]  prop着重于数据的传递，它并不能调用子组件里的属性和方法。ref着重于索引，主要用来调用子组件里的属性和方法，其实并不擅长数据传递。

(四) emit

prop与ref主要都是父组件向子组件通信，而通过emit实现子组件向父组件通信。

<template>
  <div>
    <h1>{{title}}</h1>
    <child @setMessage="showMsg"></child>
  </div>
</template>
​
<script>
  import child from '../components/child2.vue'
  export default {
    components: {child},
    data(){
      return{
        title:''
      }
    },
    methods:{
      showMsg(title){
        this.title = title;
      }
    }
  }
</script>
<template>
  <h3>我是子组件！</h3>
</template>
<script>
  export default {
    mounted: function () {
      this.$emit('setMessage', '我是父组件！')
    }
  }
</script>

[操作]  在pages/component目录下，新增child2.vue文件，完成子组件设计。新增emit.vue文件，完成父组件设计，引用child2子组件，并调用其方法。

(五) 自定义事件

如果想要在一个组件的根元素上直接监听一个原生事件。这时可以使用@事件的.native修饰符。

<template>
  <!-- 我是父组件 -->
  <view>
    <componentB @click.native="clickComponentB" style="height: 200px;"></componentB>
  </view>
</template>
<script>
  import componentB from './componentB.vue'
  export default {
    components: { componentB },
    methods: {
      clickComponentB(){
        console.log("clickComponentB");
      }
    }
  }
</script>
<template>
  <!-- 我是子组件 -->
  <view>
    <view type="default" @click.stop="open" style="height: 30px;">点击</view>
  </view>
</template>
<script>
  export default {
    methods:{
      open(){
        console.log("open");
      }
    }
  }
</script>

[操作]  在pages/component目录下，新增componentB.vue文件，完成子组件设计。新增native.vue文件，完成父组件设计，引用componentB子组件。点击子组件时，会触发子组件内的点击事件。如果在父组件中添加native关键词，点击子组件时，会触发子组件内和父组件内的点击事件。如果在子组件中添加stop关键字，点击子组件时，会触发子组件内的点击事件。

目录

一、介绍

(一) Vue.js是什么

(二) vue相比传统js的开发优势

1、vue的优势

2、文件类型

3、文件内代码架构的变化

4、外部文件引用方式变化

5、组件/标签的变化

6、js的变化

(三) 在uni-app中使用差异

二、基础

(一) 模版语法

1、插值

2、指令

(二) Data属性

(三) Class与Style绑定

(四) 条件渲染

1、v-if和v-else

2、v-else-if

3、条件渲染分组

4、v-show

(五) 列表渲染

1、在v-for里使用数组

2、在v-for里使用对象

3、列表渲染分组

4、key

5、在组件上使用v-for

(六) 事件处理器

1、监听事件

2、事件处理方法

3、内联处理器中的方法

4、事件修饰符

(七) 表单控件绑定

1、v-model

2、uni-app表单组件

三、组件

(一) 注册

1、全局注册

2、局部注册

(二) props

(三) ref

(四) emit

(五) 自定义事件

计算机应用技术3班-柯林钢
关注
单项选择器radio-group
weixin_43167546的博客
08-12 1万+
单项选择器 radio-group 内部由多个组成. 通过把多个包裹在一个下, 实现radio的单选 @change:选中项改变时触发 value: radio的标识, 选中时触发chang事件, 会携带的value值 disabled: 是否禁用, 默认为false checked: 当前是否选中, 可用来设置默认选中 color: radio的颜色, 同css的颜色 调节CheckBox的大小:在css中使用transform:scale(num) <!-- 单选
多端小程序通用 radio-group
开发猫
08-06 853
前言： 1.除了支付宝外的小程序 radio都可以重复点击，确认取消 2.之前多选按钮是自己的手撸控件，为了还原设计效果 3.微信端label需要设置 block属性 <template> <view class="page"> <view class="container" v-if="isok"> <view class...
uniapp--表单：form
魏依一的博客
02-06 1760
携带 form 中的数据触发 submit 事件，event.detail = {value : {'name': 'value'} , formId: ''}，report-submit 为 true 时才会返回 formId。支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器。单项选择器，内部由多个 组成。通过把多个radio包裹在一个radio-group下，实现这些radio的单选。e中为表单中传过来的值。
uniapp 单选框 radio-group 组件change方法传递多个参数
imcholl的博客
05-30 4262
uniapp 官网关于单选框的详解 ：https://uniapp.dcloud.io/component/radio.html <!-- 触发change事件时 会调用 onChangeMarkChoose方法--> <radio-group @change="(e) => onChangeMarkChoose(e,markData.chooseSuspect.guid,item)" value="1" class="group-box" v-for="(item, index)
微信小程序单项选择框radio-group用法
热门推荐
qq_38949477的博客
06-21 4万+
wxml &lt;radio-group class="radio-group" bindchange="radioChange"&gt; &lt;label class="radio" &gt; 男&lt;radio value="" checked=""/&gt;
学习uniapp心得体会
2301_78819026的博客
06-20 159
总之，Java是一种非常有用的编程语言，它具有广泛的应用和极高的可扩展性，可以让开发者的程序在不同的平台上运行，也可以应对不同的实际场景和需求。Java在当时的计算机领域巨大的影响力，它的出现实现了"一次编写，到处运行"的理想，这也是Java成为开发者最喜欢的编程语言之一的原因之一。它的创造者是Dennis Ritchie， C语言是在1969年到1973年之间由贝尔实验室开发的，早期作为Unix操作系统的语言，后来迅速发展成为独立的编程语言，并成为学习计算机科学的重要工具。
uniapp 心得体会
2401_84915971的博客
06-16 888
uni-app是一个使用Vue.js开发所有前端应用的框架，它允许开发者编写一套代码，然后发布到iOS、Android、Web（响应式）、以及各种小程序、快应用等多个平台。这个框架是DCloud公司从2012年开始研发小程序技术，并优化webview的功能和性能后推出的。
Uniapp心得体会
qq_42940064的博客
06-20 267
Uniapp还有另一个非常实用的特点，即其类似组件的封装，如uni-list、uni-form和uni-modal等，使得开发者可以快速构建具有标准化结构的应用页面，从而极大地提高了开发效率。通过其灵活的结构、高效的性能和强大的生态系统等特性，Uniapp将不断出现在各种应用程序的开发和创新中，具有非常广阔的应用场景。总之，Uniapp的未来发展前景非常广阔，将继续成为最受欢迎和广泛采用的跨平台框架之一，为开发者提供更丰富、更高效、更智能的开发平台，也将为应用程序的开发和推广带来更多的便利和机会。
uniapp学习心得体会
06-27
uniapp学习心得体会
关于学习uniapp心得体会
Apooppp的博客
06-21 277
uni-app支持通过 可视化界面、两种方式快速创建项目。可视化的方式比较简单，HBuilderX内置相关环境，开箱即用，无需配置nodejs。HBuilderX是通用的前端开发工具，但为uni-app做了特别强化。
uniapp学习心得
qq_67746824的博客
06-15 391
作为uniapp的基础底层框架，Vue.js的掌握程度直接决定了你能够如何使用uniapp，特别是在使用Vue的生命周期函数时，更是需要深入理解Vue的整个生命周期。总结：通过以上学习心得，我认为，掌握vue.js的基础知识和熟练使用uniapp框架、注意跨平台的兼容性问题、合理利用第三方插件、以及重视代码优化和重构，是成为一个优秀的uniapp开发者的基本条件。在开发过程中，你需要时刻关注不同平台的差异，特别是在样式和布局方面，不同平台的兼容性问题尤为突出。2.熟悉uniapp框架的使用方法。
uni-app怎么使用uni-icons
肖肖肖丽珠的博客
09-11 378
然后再页面中引用这个vue的组件并对照着官网把他的type找到就可以了。把这个插件下载下来。我们找到uni_modules。把里面的uni-icons粘贴到自己的项目中。我是放在了我的components下面了。
若依后端正常启动但是uniapp移动端提示后端接口异常
小耳朵晨晨
09-10 536
pc端能用模拟器也能正常连接接口，手机端真机调试连不上接口。1. 先看config.js的。2.网络环境问题（防火墙）点击属性 然后选择专用。
uniapp设置隐藏qiun-data-charts数据标签
weixin_59685936的博客
09-10 466
uniapp设置隐藏qiun-data-charts数据标签
Uniapp + Vue3 + Vite +Uview + Pinia 实现购物车功能（最新附源码保姆级）
一名全栈小白的博客
09-11 609
Uniapp + Vue3 + Vite +Uview + Pinia 实现购物车功能（最新附源码保姆级）
uniapp两个scroll-view且uni-popup里面的scroll-view可以滚动
最新发布
qq_43780814的博客
09-14 459
【代码】uniapp两个scroll-view且uni-popup里面的scroll-view可以滚动。
【移动端】Flutter与uni-app：全方位对比分析
一个不断前行的程序者
09-12 1025
它支持一套代码编译到iOS、Android、Web、小程序等多个平台，实现了真正意义上的“一次开发，多处运行”。（5）打包与发布：将应用打包成iOS、Android安装包，并发布到应用市场。（5）打包与发布：将应用打包成iOS、Android安装包，并发布到应用市场。（3）丰富的组件库：提供丰富的内置组件，方便开发者快速搭建应用。（4）强大的社区支持：Google背书，社区活跃，持续更新。（4）调试与优化：在模拟器和真机上调试应用，优化性能。（4）调试与优化：在模拟器和真机上调试应用，优化性能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值