一 單文件組件介紹css
三 快速原型開發vue
四 vue-cli3生成項目node
五 購物車項目搭建python
六 購物車項目操做webpack
七 Mock模擬數據ios
十 表單組件設計-Input實現雙向數據綁定github
一 單文件組件介紹
/* * 在vue中 把.vue的文件稱爲 單文件組件 webpack等構建工具 * * 不少項目中使用 * Vue.components('組件名'，{}) * new Vue({}) * 用在中小規模的項目中 會很好 可是大型的項目 就不友好了 * * 有哪些缺點 * 1. 全局定義 每一個名字都不能重複 * 2. 字符串模板【還好的是es6提供了模板字符串】碰見特殊的符號時 要用 反斜槓來轉義 很繁瑣 * 3. 不支持css * 4. 沒有構建步驟 * * * 之後的模塊化開發 包括了 template style script * */
二 如何安裝Vue-Cli3腳手架
① 安裝node.js
https://nodejs.org/en/download/
保證Node.js 是8.9或者更高的版本
在終端 node -v 保證已經安裝
② 安裝 淘寶鏡像源
npm install -g cnpm --registry=https://registry.npm.taobao.org
之後的npm可使用cnpm來代替
③ 安裝Vue Cli3腳手架
cnpm install -g @vue/cli
④ 檢查版本是否正確
vue --version
三 快速原型開發
使用 vue serve 和 vue build命令對單個 *.vue 文件進行快速原型開發，不過這須要先額外安裝一個全局的擴展：
cnpm install -g @vue/cli-service-global
vue serve 的缺點就是它須要安裝全局依賴，這使得它在不一樣機器上的一致性不能獲得保證。所以這隻適用於快速原型開發。
開始測試
1 npm init
新建一個App.vue文件
<template>
<div><h3>{{msg}}</h3></div>
</template>
<script>
export default {
data(){
return{
msg:'單文件測試'
}
}
}
</script>
<style scoped>
h3{
color: red;
}
</style>
而後在這個App.vue文件所在的目錄下運行
vue serve
四 vue-cli3生成項目
建立一個項目
vue create 項目名
回車
在回車
在回車
接下來就是考驗網速的時候了 咱們耐心等待 當出現下面的圖 就ok啦
輸入上面的命令
點擊網址 看效果
恭喜你第一個 vue項目啓動
五 購物車項目搭建
組件化開發
1 咱們首先在 components 建一個 car.vue 的文件
2.這個文件在主入口的文件 App.vue 的文件中導入 掛載和使用
<template>
<div> <MyCart :cart="cartList" :title="title"></MyCart> ❤ 使用 ❤ </div> </template> <script> import MyCart from './components/car.vue' ❤ 導入 ❤ export default { name: 'app', data() { return { title:'購物車', cartList: [ {id: 1, title: 'Vue實戰開發', price: 188,active:true,count:1}, {id: 2, title: 'python實戰開發', price: 189,active:true,count:1} # 構造假的數據 ] } }, components: { MyCart ❤ 掛載 ❤ } } </script> <style> </style>
3. car.vue 的操做
<template> <div> <h2>{{title}}</h2> <table border="1"> <tr> <th>#</th> <th>課程</th> <th>單價</th> <th>數量</th> <th>總價</th> </tr> <tr v-for="c in cart" :key="c.id"> <td><input type="checkbox" v-model="c.active"></td> <td>{{c.title}}</td> <td>{{c.price}}</td> <td> <button>-</button> {{c.count}} <button>+</button> </td> <td>￥{{c.price*c.count}}</td> </tr> </table> </div> </template> <script> export default { name: 'cart', props: ['title', 'cart'] <!--1.props導入父組件的數據--> } </script> <style scoped> </style>
六 購物車項目操做
上圖 咱們要作勾選一個課程 就能獲得價錢 還有數量的加減
1. 先寫數量
<td> <button @click="substract(index)">-</button> {{c.count}} <button @click="add(index)">+</button> </td>
methods: { remove(i){ if(window.confirm('肯定要刪除嗎')){ this.cart.splice(i) } }, substract(i) { let count = this.cart[i].count; count > 1 ? this.cart[i].count -= 1 :this.remove(i); # 三元運算 }, add(i) { this.cart[i].count++; }, },
總代碼----在上面的代碼基礎上修改 car.vue
<template> <div> <h2>{{title}}</h2> <table border="1"> <tr> <th>#</th> <th>課程</th> <th>單價</th> <th>數量</th> <th>總價</th> </tr> <tr v-for="(c,index) in cart" :key="c.id"> <td><input type="checkbox" v-model="c.active"></td> <td>{{c.title}}</td> <td>{{c.price}}</td> <td> <button @click="substract(index)">-</button> {{c.count}} <button @click="add(index)">+</button> </td> <td>￥{{c.price * c.count}}</td> </tr> <tr> <td></td> <!--<td colspan="2">{{ '1/2' }}</td>--> <!--用計算屬性獲得--> <td colspan="2">{{activeCount}}/{{ count }}</td> <td colspan="2">總價￥{{ totalPrice }}</td> </tr> </table> </div> </template> <script> export default { name: 'cart', props: ['title', 'cart'], methods: { remove(i){ if(window.confirm('肯定要刪除嗎')){ this.cart.splice(i) } }, substract(i) { let count = this.cart[i].count; count > 1 ? this.cart[i].count -= 1 :this.remove(i); }, add(i) { this.cart[i].count++; }, }, computed: { count() { return this.cart.length }, activeCount() { return this.cart.filter(v => v.active).length }, totalPrice() { let sum = 0; this.cart.forEach(c => { if (c.active) { sum += c.price * c.count } }); return sum } } } </script> <style scoped> </style>
七 Mock模擬數據
Mock有他本身的官方網站 可是咱們不用 咱們在vue裏用一個配置文件 vue.config.js
module.exports = { devServer: {
// 後期由於報錯會加個配置 // mock模擬數據 before(app, server) { // 接口 app.get('/api/carList', (req, res) => { res.json({ result: [ {id: 1, title: 'Vue實戰開發', price: 188, active: true, count: 1}, {id: 2, title: 'python實戰開發', price: 189, active: true, count: 1} 數據 ] }) }) } } };
在 App.vue中註銷以前的數據
咱們啓動項目以後 訪問 http://localhost:8080/ 是沒有任何反應的 可是咱們的數據是有了的 http://localhost:8080/api/carList 來獲取
咱們須要安裝一個東西
npm i axios -s
在main.js中須要配置
import axios from 'axios' Vue.prototype.$http = axios;
這樣咱們就能夠啓動啦
在回App.vue中
<script> import MyCart from './components/car.vue' export default { name: 'app', data() { return { cartList: [], 以前的數據刪掉了 如今建立一個空的列表 title: '購物車', } }, created(){ this.$http.get('/api/carList') 兩種方式實現 模擬數據 .then(res=>{ this.cartList = res.data.result; }).catch(err=>{ console.log(err) }) }, // async created() { // // try { // const res = await this.$http.get('/api/carList'); // this.cartList = res.data.result; //// console.log('this.carList',this.carList) // } catch (error){ // console.log(error) // } // // // }, components: { MyCart } } </script>
八 Vue中使用第三方組件（element-ui）
* 通用組件----基礎組件，大部分UI都是這種組件，好比表單 佈局 彈窗等
* 業務組件----與需求掛鉤，會被複用，好比抽獎 搖一搖等
* 頁面組件----每一個頁面都是一個組件，不會複用
使用第三方組件
好比 vue 最流行的element，就是典型的通用組件，執行 npm install element-ui 安裝
import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' import App from './App.vue' Vue.use(ElementUI); new Vue({ el:'#app', render: h => h(App), });
在使用 vue-cli 中可使用 vue add element 安裝
九 Element的表單組件分析