Vue+koa2開發一款全棧小程序(3.vue入門、Mpvue入門）

本文轉載自查看原文 2018-10-03 00:12 1131

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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Vue+koa2開發一款全棧小程序(4.Koa入門） Vue+koa2開發一款全棧小程序(5.服務端環境搭建和項目初始化）學習筆記：mpvue開發小程序——入門小程序開發之mpVue 小程序的全棧開發新時代全棧開發實戰：用Vue2+Koa1開發完整的前后端項目 MPVUE - 使用vue.js開發微信小程序使用mpvue開發小程序 Vue+Koa2 入門教程構建前端后端最簡單的應用全棧之路-微信小程序-SKU開發（代碼）