文章目录
- 整体结构
- 项目初识
- pages.json
- app.vue
- main.js
- mainfest.json
- 应用表示不可更改
- 应用名称
- 应用版本名称
- 应用生命周期
- 标签内部数据绑定
- 标签外部
- 标签内部
- 事件
- 条件渲染
- for
- v-for key
整体结构
- template
数据都写在{{}}中，类似于django的数据传递方式 - script
里面就有一个协调者、调度器，mvvm架构的vm。
data就是model，存在所有的数据；return的对象可以是任意的 - style
以上三个结构在一个页面只能出现一次
项目初识 pages.json 是一个json对象，https://uniapp.dcloud.io/collocation/pages
详情可以在网站查看
“navigationBarTitleText”: "uni-app"可以修改页面的导航栏
app.vue 全局样式，公共页面的样式css可以放在这里
main.js 项目入口文件，可以采用默认配置。
也可以在这里配置全局变量
mainfest.json 应用配置
应用表示不可更改
应用名称
自定义
应用版本名称
自定义
应用生命周期
- onLaunch
初始化完成时候触发，只触发一次 - onShow
页面启动 - onHide
页面进入后台 - onUniNViewMessage
用于通信，对nvue页面发送的数据进行监听
标签内部 不支持{{}}传递
应该用
v-bind:组件属性名,缩写用:开头
例如：
/navigator>
或者
/navigator>
>
export default {
data() {
return {
title: 'Hello world!',
student: {
name: "wangxiong",
age: 18
},
url:"../hello/hello"
}
},
onLoad() {},
methods: {}
}
事件 在标签内部用 @+方法，之后在下方的methods里编写对应的方法。
- @tap和@click建议使用tap事件，两者取其一即可
- @longpress和longtap,不建议使用longtap
- @touchstart
- @touchend
- @touchmove
- @touchcancel,注意来电时候可以做出的一些回调函数
- v-if
若是错误会在view中被移除- 支持三元表达式
- 支持三元表达式
- v-show
display若为错误只是显示为display为none
男性
女性
未知
>
export default {
data() {
return {
isShow: true,
sex: 3
}
},
for
姓名:{{student.name}}
年龄:{{student.age}}
技能:
{{skill}}
v-for key 设置了:key可保证选中的元素的绑定的一致性
>
export default {
data() {
return {
studentArray: [{
id: 1,
name: "jack",
age: 19,
skill: ["c++", "java"]
}, {
id: 2,
name: "tom",
age: 12,
skill: ["c++"]
}, {
id: 3,
name: "jarry",
age: 25,
skill: ["python"]
}, {
id: 4,
name: "wx",
age: 63,
skill: ["QT"]
}, ]
}
},
methods: {
addstu() {
var studentArray = this.studentArray;
var newId = studentArray.length + 1;
var newStu = {
id: newId,
name: "新生" + newId,
age: 18
}
// studentArray.push(newStu);
studentArray.unshift(newStu);
}
}
}
