一、起步
Vue框架的核心思想是MVVM（Model-View-View-Model），实现了视图和数据的双向绑定，即改变视图会触发数据的改变，同样改变数据会触发视图的改变。
<!DOCTYPE html>
<html lang="zh">
<head>
<title>Vue</title>
</head>
<body id="app">
{{ message }}
</body>
<script src="/resources/js/vue.js" type="text/javascript"></script>
<script type="text/javascript">
let app = new Vue({ -> 创建Vue对象
el: '#app', -> 定义Vue的作用域
data: { -> 定义双向绑定的属性
message: 'Hello Vue!'
}
});
</script>
this.data = JSON.parse(JSON.stringify(this.data)); -> 刷新双向绑定
二、标签语法
- v-bind:attribute，动态绑定标签原有的属性
<span v-bind:title="message"></span>
<span :title="message"></span> -> 缩写
对象语法，value为true时写入
<div class="div" v-bind:class="{active:true}"></div> -> class="div active"
数组语法，所有属性都写入
<div v-bind:class="['div',‘active’]"></div> -> class="div active"
内联样式
<div v-bind:style="{color:'red',fontSize:'20px'}"></div> -> style="color:red;fontSize:20px"
<div v-bind:style="[{color:'red'},{fontSize:'20px'}]"></div> -> style="color:red;fontSize:20px"
- v-if、v-else-if、v-else，动态生成满足条件的标签
<span v-if="false">if条件成立</span> -> 不生成span标签
<span v-else-if="false">else-if条件成立</span> -> 不生成span标签
<span v-else>else条件成立</span> -> 生成span标签
- v-show，满足条件时显示元素，不满足时隐藏
<span v-show> {{ message }} </span>
- v-for，循环生成标签和数据渲染
<ul>
<li v-for="item in array"> {{ item.name }} </li>
</ul>
<script type="text/javascript">
let app = new Vue({
el: '#app',
data: {
array: [{"name":"w"},{"name":"j"},{"name":"x"}]
}
});
</script>
- v-model，表单元素的内容双向绑定
<input v-model="input">
<textarea v-model="textarea"></textarea>
.lazy -> 输入内容在change事件后同步
.number -> 输入内容自动转数值类型
.trim -> 输入内容首尾空格字符清除
语法: v-model.lazy v-model.number v-model.trim
<script type="text/javascript">
let app = new Vue({
el: '#app',
data: {
input:'this is input',
textarea:'this is textarea'
}
});
- v-once，只执行一次赋值，属性发生改变时也不会刷新到UI
<span v-once> {{ message }} </span>
- v-html，输出html片段，不进行转义
<div v-html="<span>html</span>"></div>
- v-text，对字符串转义输出文本
<span v-text="message"></span>
三、事件语法
- v-on:event，监听事件作出响应
<button v-on:click="reverse"> {{ message }} </button>
<button @click="reverse"> {{ message }} </button> -> 缩写
<button @click.prevent="reverse"> {{ message }} </button> -> 阻止冒泡
let app = new Vue({
el: '#app',
data: {
message : 'wjx'
},
methods: { -> 定义方法
reverse: function () {
this.message =this.message.reverse(); -> 反转字符并回显
}
}
})
四、计算和侦听
<span> {{reversedMessage}} </span>
var app = new Vue({
el: '#app',
data: {
message: 'Hello'
},
computed: { -> 属性值发生改变时触发计算并将结果放入缓存,反之从缓存中读取值
reversedMessage: function () {
return this.message.split('').reverse().join('');
}
},
watch: { -> 属性值发生改变时触发方法,适合处理开销大的操作(网络请求)
message: function (newValue, oldValue) { -> 侦听属性名
$.ajax({}); -> 模拟网络请求获取数据
}
}
});
五、自定义组件
Vue规定每个组件必须只有一个根元素
Vue.component('blog-post', { -> 组件名称
props: ['post'], -> 属性入参名
template: `
<div class="blog-post">
<h3>{{ post.title }}</h3>
<div v-html="post.content"></div>
</div>
<button v-on:click="$emit('button-event')"> -> 向父组件传递名为button-event的事件
Button Event
</button>
`
});
<blog-post -> 使用方式
v-bind:key="post.id"
v-bind:post="post"
v-on:button-event="buttonEvent" -> 父组件接收子组件触发名为button-event的事件
></blog-post>
<template> -> 自定义组件(wjx-slot.vue)
<view>
<view> -> 每个模板(*.vue)都有自身的作用域,数据只在本作用域调取
<slot name="header" v-bind:header="header">{{header}}</slot>
</view>
<view>
<slot>{{content}}</slot> -> name="default"
</view>
<view> -> 将子作用域的数据通过v-bind指令传递给父作用域
<slot name="footer" v-bind:footer="footer">{{footer}}</slot>
</view>
</view>
</template>
<script>
export default {
data() {
return {
header: "header",
content: "content",
footer: "footer"
}
},
mounted() {
console.log(this.$slots);
console.log(this.$scopedSlots);
}
}
</script>
<template>
<view>
<wjx-slot> -> 使用组件
<view slot="header" slot-scope="params">I'm new header</view>
<view slot="default">I'm new content</view>
<view slot="footer" slot-scope="params">I'm new footer</view>
</wjx-slot>
<wjx-slot> -> v-slot指令只能添加在<template>上
<template v-slot:header="params">{{params.header}}</template>
<template v-slot:default>I'm new content</template>
<template v-slot:footer="params">{{params.footer}}</template>
</wjx-slot>
</view>
</template>
<script>
import wjxSlot from '@/pages/component/slot.vue'; -> 引入组件
export default {
components:{
wjxSlot -> 声明组件
}
}
</script>
六、UniApp多平台发行
- 基础配置
应用名称(APP应用名称)
WJX
应用描述(应用的[版本信息]功能)
一款超级豪华的移动应用
应用版本名称(应用的[版本信息]功能)
1.0.0
应用版本号(必须是整数,升级时必须高于上一次设置的值)
100
- H5配置(HBuilderX)
页面标题(默认为应用名称)
客户资源管理系统
index.html模板路径(默认为空,可定制生成的html代码,自定义meta、引入外部js)
template.h5.html
路由模式(hash[请求路径带特殊符号]、history[页面不支持刷新])
hash
运行的基础路径(例:/h5/,代表在域名的/h5目录下部署运行)
/h5/
启用https协议
h5(根目录) -> 发行H5结果,将整个目录复制到Web项目的resources目录下(resources/h5)
hybrid(可忽略该目录)
static(静态资源目录) -> 访问Web项目的接口时只需使用相对路径
index.html -> H5页面入口,在Web项目配置Servlet请求(template/index.html)
Tip:发行前请将HBuilderX更新至最新版本,避免h5端产生浏览器兼容问题
- Android原生App配置(HBuilderX)
工具栏 - 发行 - 原生App-云打包 -> 生成Android安装包(*.apk)
工具栏 - 发行 - 原生App-制作移动端App资源升级包 -> 生成Android升级包(*.wgt)
1、在应用生命周期的onLaunch()中检测资源更新并自动下载(前端页面整体压缩包)
2、在系统中安置检测更新的功能，用于整包更新(模块、配置、版本等变化)
3、切换是否强制整包更新，通过资源更新修改功能的逻辑
Web应用检测更新数据库设计(版本号依次向上迭代)
| id | code | url | type | date |
| 主键 | 版本号 | 下载地址 | 升级类型 | 更新日期 |
| 1 | 101 | *.apk | 1 | 2020-01-01 |
| 2 | 102 | *.wgt | 2 | 2020-01-01 |
App应用检测当前版本方式
plus.runtime.getProperty(plus.runtime.appid,function(info){
console.log("当前应用版本："+info.version);
});
let downloadTask = null;
downloadTask = uni.downloadFile({
url: *.apk,
success: res => {
if (res.statusCode === 200) {
plus.runtime.install(
res.tempFilePath,
{
force: true
},
function() {
plus.runtime.restart();
},
function(e) {
console.error('install fail...');
}
);
}
}
});
downloadTask.onProgressUpdate((res) => {
console.log('下载进度' + res.progress + "%");
console.log('已下载大小:' + res.totalBytesWritten + "byte");
console.log('应用安装包大小:' + res.totalBytesExpectedToWrite + "byte");
});
getFileSize(size) { -> 转换大小单位
if (!size) return ""; -> 单位:byte
var num = 1024.00; -> byte是最小单位
if (size < num) return size + "B";
if (size < Math.pow(num, 2)) return (size / num).toFixed(2) + "K";
if (size < Math.pow(num, 3)) return (size / Math.pow(num, 2)).toFixed(2) + "M";
if (size < Math.pow(num, 4)) return (size / Math.pow(num, 3)).toFixed(2) + "G";
return (size / Math.pow(num, 4)).toFixed(2) + "T";
}
网友评论