Vue+koa2开发一款全栈小程序(3.vue入门、Mpvue入门）
1.Vue-cli
1.新建一个vue项目
打开cmd
官方命令行工具
npm install -g vue-cli //安装脚手架
cd到你想要存放demo的目录下，然后
vue init webpack vue-demo //新建demo
其中user EsLint....那一行选项要选n
还有选最后一条时，让你选npm、yarn、No,I can handle it myselft，要选第三个No,I can handle it myselft，不然有可能一整天都新建不完。
然后执行
cd vue-demo
cnpm install
npm run dev
浏览器访问http://localhost:8080 可以看到vue的默认界面
2.数据渲染
用vscode打开vue-demo项目
在main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router' Vue.config.productionTip = false /* eslint-disable no-new */
// new Vue({
// el: '#app',
// router,
// components: { App },
// template: '<App/>'
// }) new Vue({
el:'#app',
data:{
title:'hello vuejs',
subTitle:'Vue React Angular is good',
showSub:false,
todos:['吃饭','睡觉','写代码']
}
})
在index.html中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>vue-demo</title>
</head>
<body>
<div id="app">
<p>{{title}}</p>
<p v-if='showSub'>{{subTitle}}</p>
<ul>
<li v-for='todo in todos'>{{todo}}</li>
</ul>
</div> <!-- built files will be auto injected -->
</body>
</html>
浏览器中效果
3.简单事件处理
main.js中
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router' Vue.config.productionTip = false /* eslint-disable no-new */
// new Vue({
// el: '#app',
// router,
// components: { App },
// template: '<App/>'
// }) new Vue({
el:'#app',
data:{
title:'hello vuejs',
subTitle:'Vue React Angular is good',
showSub:false,
todos:['吃饭','睡觉','写代码'],
mytodo:''
},
methods:{
handleClick(){
//this.title='你好 小程序'
this.todos.push(this.mytodo)
this.mytodo=''
}
}
})
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>vue-demo</title>
</head>
<body>
<div id="app">
<p>{{title}}</p>
<p v-if='showSub'>{{subTitle}}</p>
<div>
<input type="text" v-model="mytodo">
<button @click="handleClick">添加</button>
</div>
<ul>
<li v-for='todo in todos'>{{todo}}</li>
</ul>
</div> <!-- built files will be auto injected -->
</body>
</html>
效果图
4.循环事件处理，计算属性computed（购物车功能用得上）
main.js中
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router' Vue.config.productionTip = false /* eslint-disable no-new */
// new Vue({
// el: '#app',
// router,
// components: { App },
// template: '<App/>'
// }) new Vue({
el:'#app',
data:{
title:'hello vuejs',
subTitle:'Vue React Angular is good',
showSub:false,
todos:[
{text:'吃饭',done:false},
{text:'睡觉',done:false},
{text:'写代码',done:false}
],
mytodo:''
},
computed:{
remain(){
return this.todos.filter(v=>!v.done).length
}
},
methods:{
handleClick(){ this.todos.push({
text:this.mytodo,
done:false
})
this.mytodo=''
},
toggle(i){
this.todos[i].done=!this.todos[i].done
},
clean(){
this.todos=this.todos.filter(v=>!v.done)
}
}
})
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>vue-demo</title>
<style>
li.done{
text-decoration: line-through;
color:'red'
}
</style>
</head>
<body>
<div id="app">
<p>{{title}}</p>
<p v-if='showSub'>{{subTitle}}</p>
<div>
<input @keyup.enter="handleClick" type="text" v-model="mytodo">
<button @click="handleClick">添加</button>
<button @click="clean">清理</button>
</div>
<ul>
<li :class="{'done':todo.done}" @click="toggle(index)" v-for='(todo,index) in todos'>{{index+1}}:{{todo.text}}</li>
</ul>
<p>{{remain}}/{{todos.length}}</p> </div> <!-- built files will be auto injected -->
</body>
</html>
5.改造成单文件组件
1.在src目录下新建 Todolist.vue将上面的代码组件化
1.index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>vue-demo</title>
<style> </style>
</head>
<body>
<div id="app"> </div> <!-- built files will be auto injected -->
</body>
</html>
2.main.js中
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router' import Todolist from './Todolist' Vue.config.productionTip = false /* eslint-disable no-new */
// new Vue({
// el: '#app',
// router,
// components: { App },
// template: '<App/>'
// }) new Vue({
el:'#app',
components:{
Todolist
},
template:'<Todolist/>' })
3.Todolist.vue中
<template>
<div>
<p>{{title}}</p>
<p v-if='showSub'>{{subTitle}}</p>
<div>
<input @keyup.enter="handleClick" type="text" v-model="mytodo">
<button @click="handleClick">添加</button>
<button @click="clean">清理</button>
</div>
<ul>
<li :class="{'done':todo.done}" @click="toggle(key)" v-for='(todo,key) in todos'>{{key+1}}:{{todo.text}}</li>
</ul>
<p>{{remain}}/{{todos.length}}</p> </div>
</template>
<script>
export default {
data(){
return {
title:'hello vuejs',
subTitle:'Vue React Angular is good',
showSub:false,
mytodo:'',
todos:[
{text:'吃饭',done:false},
{text:'睡觉',done:false},
{text:'写代码',done:false}
]
}
},
computed:{
remain(){
return this.todos.filter(v=>!v.done).length
}
},
methods:{
handleClick(){ this.todos.push({
text:this.mytodo,
done:false
})
this.mytodo=''
},
toggle(i){
this.todos[i].done=!this.todos[i].done
},
clean(){
this.todos=this.todos.filter(v=>!v.done)
}
}
}
</script>
<style>
li.done{
text-decoration: line-through;
color:'red'
}
</style>
2.将todolist中的title再分出一个组件（组件间传值）
1.Todolist.vue中
<template>
<div>
<Title :title="title" :subtitle="subtitle"></Title>
<div>
<input @keyup.enter="handleClick" type="text" v-model="mytodo">
<button @click="handleClick">添加</button>
<button @click="clean">清理</button>
</div>
<ul>
<li :class="{'done':todo.done}" @click="toggle(key)" v-for='(todo,key) in todos'>{{key+1}}:{{todo.text}}</li>
</ul>
<p>{{remain}}/{{todos.length}}</p> </div>
</template>
<script>
import Title from './components/Title' export default {
components:{
Title
},
data(){
return {
title:'hello vuejs',
subtitle:'Vue React Angular is good',
showSub:false,
mytodo:'',
todos:[
{text:'吃饭',done:false},
{text:'睡觉',done:false},
{text:'写代码',done:false}
]
}
},
computed:{
remain(){
return this.todos.filter(v=>!v.done).length
}
},
methods:{
handleClick(){ this.todos.push({
text:this.mytodo,
done:false
})
this.mytodo=''
},
toggle(i){
this.todos[i].done=!this.todos[i].done
},
clean(){
this.todos=this.todos.filter(v=>!v.done)
}
}
}
</script>
<style>
li.done{
text-decoration: line-through;
color:'red'
}
</style>
2.在src/components目录下新建组件Title.vue
<template>
<div class="title">
<p>{{title}}</p>
<p>{{subtitle}}</p>
</div>
</template>
<script>
export default {
props:['title','subtitle']
}
</script> <style>
.title{
color: red;
}
</style>
2.mpvue入门
1.新建mpvue项目
1.新建mpvue项目，打开cmd，cd到想要放置项目的目录
vue init mpvue/mpvue-quickstart my-project Project name mpvue-demo
wxmp appid //登录微信小程序后台，找到appid
//然后全都默认即可
2.cd 到my-project
npm install
npm run dev
3.打开微信开发者工具，选择添加项目，项目目录选择my-project
2.生命周期
vue生命周期+兼容小程序生命周期
1.Create 创建初始化
2.Vue不支持的 用小程序自己的，比如 onPullDownRefresh（下拉刷新）
3.模板语法
computed+模板+熟悉的html
1.动态style和class使用计算属性返回字符串
2.v-if和v-for用法不变
3.表单v-model全支持
4.模板
除了动态渲染，别的都支持
1..vue单文件组件
2.小程序自带的组件也可以用
3.自带组件事件绑定也使用vue的，比如@click
5.todolist迁移
1.在src/components目录下，新建Todolist.vue组件
<template>
<div> <div>
<input @keyup.enter="handleClick" type="text" v-model="mytodo">
<button @click="handleClick">添加</button>
<button @click="clean">清理</button>
</div>
<ul>
<li :class="{'done':todo.done}" @click="toggle(key)" :key="key" v-for='(todo,key) in todos'>{{key+1}}:{{todo.text}}</li>
</ul>
<p>{{remain}}/{{todos.length}}</p> </div>
</template>
<script>
export default {
data(){
return {
title:'hello vuejs',
subtitle:'Vue React Angular is good',
showSub:false,
mytodo:'',
todos:[
{text:'吃饭',done:false},
{text:'睡觉',done:false},
{text:'写代码',done:false}
]
}
},
computed:{
remain(){
return this.todos.filter(v=>!v.done).length
}
},
methods:{
handleClick(){ this.todos.push({
text:this.mytodo,
done:false
})
this.mytodo=''
},
toggle(i){
this.todos[i].done=!this.todos[i].done
},
clean(){
this.todos=this.todos.filter(v=>!v.done)
}
}
}
</script>
<style>
li.done{
text-decoration: line-through;
color:'red'
}
</style>
2.在src/pages目录下，新建目录todolist，在todolist目录下新建index.vue和main.js
index.vue
<template>
<div>
<h1>vuejs is good</h1>
<Todolist></Todolist>
</div>
</template> <script>
import Todolist from '@/components/Todolist' export default {
components:{
Todolist
}
}
</script>
<style>
h1{
color: red;
}
</style>
main.js(通用)
import Vue from 'vue'
import App from './index' const app = new Vue(App)
app.$mount()
在src/pages/index/index.vue中
3.在src/app.json中，增加路由
4.在package.json中的lint，添加--fix属性
5.修正代码，在cmd里，Ctrl+C y 停止正在运行的项目，执行
npm run lint
6.启动项目
npm run dev
Vue+koa2开发一款全栈小程序(3.vue入门、Mpvue入门）的更多相关文章
- Vue+koa2开发一款全栈小程序(1.课程介绍+2.ES6入门）
1.课程介绍 1.课程概述 1.做什么? Vue+koa2开发一款全栈小程序 2.哪些功能? 个人中心.图书列表.图书详情.图书评论.个人评论列表 3.技术栈 小程序.Vue.js.koa2.koa- ...
- Vue+koa2开发一款全栈小程序(5.服务端环境搭建和项目初始化）
1.微信公众平台小程序关联腾讯云 腾讯云的开发环境是给免费的一个后台,但是只能够用于开发,如果用于生产是需要花钱的,我们先用开发环境吧 1.用小程序开发邮箱账号登录微信公众平台 2.[设置]→[开发者 ...
- Vue+koa2开发一款全栈小程序(6.个人中心）
1.用户信息的获取和展示 1.初始化数据库 cd到server目录下,执行 node tools/initdb.js 登录mysql控制界面,查看初始化以后生成的表 show databases; u ...
- Vue+koa2开发一款全栈小程序(9.图书详情页）
1.获取图书详情 1.修改server/controllers/bookdetail.js为 const {mysql}=require('../qcloud') module.exports=asy ...
- Vue+koa2开发一款全栈小程序(8.图书列表页）
1.图书列表页获取数据 1.在server/routes/index.js中新增路由 router.get('/booklist',controllers.booklist) 2.在server/co ...
- Vue+koa2开发一款全栈小程序(7.图书录入功能）
1.图书录入功能 1.获取图书信息 1.在mydemo/src/until.js中封装工具函数post和get // 工具函数 import config from './config' // htt ...
- Vue+koa2开发一款全栈小程序(4.Koa入门）
1.Koa是什么? 基于nodejs平台的下一代web开发框架 1.Express原班人马打造,更精简 2.Async+await处理异步 3.洋葱圈型的中间件机制 新建一个koa项目 1.打开cmd ...
- 微信小程序云开发－从0打造云音乐全栈小程序
第1章 首门小程序“云开发”课程,你值得学习本章主要介绍什么是小程序云开发以及学习云开发的重要性,并介绍项目的整体架构,真机演示项目功能,详细介绍整体课程安排.课程适用人群以及需要掌握的前置知识.通过 ...
- 从零开发一款自己的小程序UI组件库（一）
写在前面:有开发过小程序的朋友肯定知道组件化开发的特性,高内聚与低耦合.使用已有的UI组件库,诸如:vantUI-weapp.minUI-weapp等UI组件库的诞生使我们的开发速度大大的加快,丰富的 ...
随机推荐
- shiro框架的UsernamePasswordToken与对应Realm中的AuthenticationToken的一点比较
这里以简单的登陆为例子 控制器对应的登陆方法: @RequestMapping(value = "/login", method = RequestMethod.GET) publ ...
- Git拉取项目时报错“remote: HTTP Basic: Access denied”解决方法
问题: Git拉取项目时报错“remote: HTTP Basic: Access denied”,此问题多为本地密码与远端密码不符导致. 解决方法: 在下载地址中加上用户名和密码即可,如下: htt ...
- SpringBoot之整合Mybatis范例
依赖包: <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http:/ ...
- Java多线程之定时任务（Timer）
package org.study2.javabase.ThreadsDemo.schedule; import java.util.Date; import java.util.Timer; imp ...
- springboot+jpa+mysql+swagger整合
Springboot+jpa+MySQL+swagger整合 创建一个springboot web项目 <dependencies> <dependency> < ...
- axis函数
axis函数 axis([xmin xmax ymin ymax]) 用来标注输出的图线的最大值最小值. MATLAB中坐标系的设置函数 MATLAB 函数 axis([XMIN XMAX YMI ...
- Atcoder Beginner Contest 118 C-Monsters Battle Royale(贪心)
题目链接 题意就是要让给出的数字去互相取余,看看能得到最小的数事多少. 那么就可以从小到大排序,每一次都贪心地把最小的数作为攻击者,去攻击其他的数字(也就是大的取余小的),然后再一次排序,循环这个过程 ...
- Nginx 如何处理上游响应的数据
陶辉93 一个非常重要的指令 proxy_buffer_size 指令限制头部响应header最大值 proxy_buffering 指令主要是指 上游服务器是否接受完完整包体在处理 默认是on 也就 ...
- Android 模块化/热修复/插件化 框架选用
概念汇总 动态加载:在程序运行的时候,加载一些程序自身原本不存在的文件并运行这些文件里的代码逻辑.动态加载是热修复与插件化实现的基础. 热修复:修改部分代码,不用重新发包,在用户不知情的情况下,给ap ...
- Django中Form组件的使用
Form介绍 HTML页面中利用form表单向后端提交数据时,都会写一些获取用户输入的标签并且用form标签把它们包起来. 与此同时我们在好多场景下都需要对用户的输入做校验,比如校验用户是否输入,输入 ...