本章节讲解一下uniapp开发的基本组件
一、视图容器之一view
<template>
<div>
<h2>详情页</h2>
<view>我是一个大盒子</view>
</div>
</template>
<script>
export default{
}
</script>
<style scoped>
</style>
<view>组件就相当于我们html容器中的<div>
view中有哪些属性:
二、template标签
Vue模板的主要特点
- 使用XML语法
- 使用{{}}插入表达式，只能包含单个表达式
- 使用v-html v-on v-bind 等指令操作DOM
- 使用v-if v-for等指令实现条件判断和循环
模板template三种写法
一、Vue完整版，写在HTML里
// html文件
<div id=xxx>
{{n}}
<button @click="add">+1</button>
</div>
二、Vue完整版，写在选项里
<div id="app"></div>
new Vue({
template: `
<div>
{{n}}
<button @click="add">+1</button>
</div>`,
data:{n:0}, // data
methods:{add(){ this.n += 1 }}
}).$mount('#app')
注意：div#app 会被取代
三、Vue非完整版，配合xxx.vue文件
// xxx.vue
<template>
<div>
{{n}}
<button @click="add">+1</button>
</div>
</template>
<script>
export default {
data(){ return {n:0} }, // data 必须为函数
methods:{add(){ this.n += 1 }}
}
</script>
<style>这里写 CSS </style>
// js文件
import Xxx from './xxx.vue'
new Vue({
render: h => h(Xxx)
}).$mount('#app')
注意：这里的template里面的不是html语法，而是xml语法
html和xml的两个区别：
- html：<input name="username">| <input name="username" />两种写法都可以，xml 只能写 <input name="username" />
- html写空的标签：<div></div>，xml <div></div>、<div />两种都可以
展示内容
1、v-text——表达式
{{object.a}} 表达式
{{ n+1 }} 可以写任何运算
{{ fn(n) }} 可以调用函数
如果值为undefined 或 null 就不显示
另一种写法是 <div v-text="表达式"></div> 很少用2、v-html——HTML内容
假设 data.x 值为 <strong>hi</strong>
<div v-html="x"></div> 就可以显示粗体的hi使用v-html动态渲染的任意 HTML 可能会非常危险，因为它很容易导致XSS 攻击。只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。
3、v-pre——展示 {{ n }} ，两对花括号都展示出来
<div v-pre>{{ n }}</div>
// v-pre 不会对模板进行编译绑定属性
v-bind
// 绑定src
<img v-bind:src="x" />
// 简写成
<img :src="x" />
// 绑定对象
<div :style="{width: 100}"></div>
// 注意这里100默认是100px，不写px也可以，如果是em，就需要写上'100em'绑定事件
v-on
<button v-on:click="add">+1</button>
// 点击之后，Vue会运行 add()
<button v-on:click="xxx(1)">xxx</button>
// 点击之后，Vue会运行 xxx(1)
<button v-on:click="n+=1">xxx</button>
// 点击之后，Vue会运行 n+=1缩写：<button @click="n+=1">xxx</button>，正常人都用缩写
条件判断
v-if、v-else-if、v-else
<div v-if="x > 0"> x 大于 0 </div>
<div v-else-if="x === 0"> x 等于 0 </div>
<div v-else="x < 0"> x 小于 0 </div>循环
for(value, key) in 对象或数组
// 数组
<ul>
<li v-for="(u, index) in users" :key="index">
索引： {{index}} 值：{{u.name}}
</li>
</ul>
// 对象
<ul>
<li v-for="(value, name) in obj" :key="name">
属性名： {{name}} 属性值：{{value}}
</li>
</ul>:key="index"有bug，后面补充
显示、隐藏
v-show
<div v-show="n % 2 === 0">n是偶数</div>近似等于
<div :style="{display:n%2===0?'block':'none'}"> n是偶数 </div>看得见的元素display不只有block，如table 的 display 为table，li 的 display 为list-item
v-once——优化更新性能
只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。不能滥用v-once，只有在一个组件包含大量静态内容的情况下考虑使用
v-cloak
这个指令保持在元素上直到关联实例结束编译。和 CSS 规则一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
[v-cloak] {
display: none;
}
<div v-cloak>
{{ message }}
</div>不会显示，直到编译结束。
修饰符
@click.stop="x" 表示阻止事件传播/冒泡
@click.prevent="x" 表示阻止默认动作
@click.stop.prevent="x" 同时表示两种意思
其他：
1、v-on：
.{keycode|keyAlias }
.stop
.prevent
.capture .self .once .passive .native
快捷键：.ctrl .alt .shift .meta .exact
鼠标：.left .right .middle
2、v-bind：
.prop
.camel
.sync
3、v-model：
.lazy
.number
.trim
加粗的重点学习
.sync
当需要对一个 prop 进行“双向绑定”的时候，如下示例
// App.vue
<template>
<div class="app">
App.vue 我现在有 {{total}}
<hr>
<Child :money="total" v-on:update:money="total = $event"/> // 监听并更新money
</div>
</template>
<script>
import Child from "./Child.vue";
export default {
data() {
return { total: 10000 };
},
components: { Child: Child }
};
</script>
<style>
</style>
// Child.vue
<template>
<div class="child">
{{money}}
<button @click="$emit('update:money', money-100)"> // 对父组件的money赋新值
<span>花钱</span>
</button>
</div>
</template>
<script>
export default {
props: ["money"]
};
</script>
<style>
</style>代码中 <Child :money="total" v-on:update:money="total = $event"/>
可以简写成 <Child :money.sync="total">
注意：v-bind带有.sync修饰符时，不能和表达式一起使用
上面代码中的Vue规则：
- 组件不能修改prop外部数据
- $emit可以触发事件，并传参
- $event可以获取$emit的参数
- 使用update:xxx的模式
未来计划
1、ruoyi非分离版本拆解
2、ruoyi-vue-pro：讲解工作流
3、ruoyi-vue-pro：支付模块，电商模块
4、基于ruoyi-vue-pro项目开发
5、JEECG低代码开发平台
请关注我，本星球会持续推出更多的开源项目代码解析，如有更好的意见请留言回复或者私信。