大约 5 分钟
相关信息
感谢黑马程序员提供的完善资料。该文章基于黑马程序员教材做了少量改动。
项目架构
项目架构图
大约 5 分钟
提示
感谢黑马程序员提供的完善资料。该文章基于黑马程序员教材做了少量改动。
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到 iOS、Android、Web（响应式）、以及各种小程序、快应用等多个平台。
本来以为，开发手机 app，或者微信小程序，还需要另外学技术。有了 uni-app 后，很开心，前几年学的 VUE，现在用得上了，这是在暗示着创业顺利嘛哈哈哈
大约 6 分钟
小程序开发指南
小程序的主要开发语言是 JavaScript ，小程序的开发同普通的网页开发相比有很大的相似性。对于前端开发者而言，从网页开发迁移到小程序的开发成本并不高，但是二者还是有些许区别的。
大约 6 分钟
VUE 3
VUE 3 官网：https://cn.vuejs.org/guide/quick-start.html
快速回顾
安装相关依赖
npm install -g @vue/cli vue-router
大约 5 分钟
Vue 基础
VUE 官网
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
快速上手
完整示例如下：
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 需要在下面中声明 new Vue, 对应的数据需要在
对应的 Vue 示例下进行储存 -->
在 id="app" 层下可以直接使用 message 变量：
<br>
{{message}}<br>
<span title="this is a title" >
鼠标悬停查看<br>
</span>
<span v-bind:title="message" >
鼠标悬停查看<br>
</span>
<a v-bind:href="message" >
自定义链接<br>
</a>
<!-- 使用 v-model 支持改变页 vue 中的 data，
他的数据来源是该标签下的 value。-->
<textarea v-model="message"> v-model 数据来源 </textarea>
<br>
<input type="radio" name="sex" value=true v-model="view">true
<input type="radio" name="sex" value="" v-model="view">false
<ol>
<!-- 创建一个 todo-item 组件的实例 -->
<div v-if="view">
<todo-item
v-for="item in mylist"
v-bind:todo="item"
v-bind:key="item.id"></todo-item>
</div>
</ol>
{{message}}
</div>
<script>
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{todo}}</li>'
});
var app = new Vue({
el: '#app',
data: {
message: 'vue 中的 data',
mylist:["123","234",2345446,],
view: false
}
})
</script>
</body>
</html>
大约 15 分钟