vue筆記

時間 2019-11-21

標籤 vue 筆記简体版

原文原文鏈接

使用淘寶鏡像
- 地址：http://npm.taobao.org/
- 安裝cnpm:
shell npm install -g cnpm --registry=https://registry.npm.taobao.orgjavascript

搭建vue的開發環境：

必需要安裝nodejs
搭建vue的開發環境，安裝vue的腳手架工具官方命令行工具

npm install --global vue-cli  /   cnpm install --global vue-cli         （此命令只須要執行一次）

建立項目必須cd到對應的一個項目裏面
```
vue init webpack vue-demo01css

cd  vue-demo01 

  cnpm install   /  npm install          若是建立項目的時候沒有報錯，這一步能夠省略。若是報錯了  cd到項目裏面運行  cnpm install   /  npm install

  npm run dev

```html

另外一種建立項目的方式（推薦） ***

vue init webpack-simple vuedemo02

        cd  vuedemo02
        
        cnpm install   /  npm install        
        
        npm run dev

如今開始建立一個.vue文件，在src下建立MyApp.vuevue

<template>
  <div id="myapp">
    <img src="./assets/logo.png" alt="">
    <h1>{{msg}}</h1>
    <h3>{{obj.name}}</h3>
    <hr>
    <ul>
      <li v-for="item in lists">{{item}}</li>
    </ul>
  </div>
</template>

<script>
    export default {
        name: "MyApp",
        data() {
            return {
                msg: 'welcome to myapp',
                obj:{
                    name:'張三'
                },
                lists:['1','2','A','B']
            }
        }
    }
</script>

<style scoped>

</style>

修改main.jsjava

import Vue from 'vue'
import MyApp from './MyApp'

new Vue({
  el: '#app',
  render: h => h(MyApp)
})

添加刪除小案例

<template>
  <div id="myapp">
    +add：<input v-model="todo" @keydown="addList($event)">
    <h3>正在進行</h3>
    <ul>
      <li v-for="(v,k) in lists3" v-if="!v.checked">
        <input type="checkbox" v-model="v.checked"> {{v.title}} <button @click="delV(k)">-del</button>
      </li>
    </ul>
    <hr>
    <h3>完成</h3>
    <ul>
      <li v-for="(v,k) in lists3" v-if="v.checked">
        <input type="checkbox" v-model="v.checked"> {{v.title}} <button @click="delV(k)">-del</button>
      </li>
    </ul>
    <hr>
  </div>
</template>

<script>
    export default {
        name: "MyApp",
        data() {
            return {
                todo:'',
                lists3:[],
            }
        },
        methods:{
            addList(e){
                if (e.keyCode===13){
                    this.lists3.push({
                        title:this.todo,
                        checked:false
                    });
                    this.todo = '';
                }
            },
            delV(key){
                this.lists3.splice(key,1)//刪除lists3的第key個，刪除一個
            },
        }
    }
</script>

<style scoped>

</style>

刷新數據會丟失，接下來咱們保存到本地瀏覽器中node

<template>
  <div id="myapp">
    +add：<input v-model="todo" @keydown="addList($event)">
    <h3>正在進行</h3>
    <ul>
      <li v-for="(v,k) in lists3" v-if="!v.checked">
        <input type="checkbox" v-model="v.checked" @change="addLocalStorage()"> {{v.title}} <button @click="delV(k)">-del</button>
      </li>
    </ul>
    <hr>
    <h3>完成</h3>
    <ul>
      <li v-for="(v,k) in lists3" v-if="v.checked">
        <input type="checkbox" v-model="v.checked" @change="addLocalStorage()"> {{v.title}} <button @click="delV(k)">-del</button>
      </li>
    </ul>
    <hr>
  </div>
</template>

<script>
    export default {
        name: "MyApp",
        data() {
            return {
                todo:'',
                lists3:[],
            }
        },
        methods:{
            addList(e){
                if (e.keyCode===13){
                    this.lists3.push({
                        title:this.todo,
                        checked:false
                    });
                    this.todo = '';
                    this.addLocalStorage()
                }
            },
            delV(key){
                this.lists3.splice(key,1)//刪除lists3的第key個，刪除一個
                this.addLocalStorage()
            },
            addLocalStorage(){
                localStorage.setItem('list',JSON.stringify(this.lists3))
            }
        },
        mounted() {//vue頁面刷新就會執行的方法
            var list = JSON.parse(localStorage.getItem('list'));
            if(list){
                this.lists3 = list;
            }
        }
    }
</script>

<style scoped>

</style>

接下來考慮對localStorage操做進行封裝：
storage.js:webpack

// localStorage的操做封裝
// src/model/storage.js

var storage = {
  set(key,value){
    localStorage.setItem(key,JSON.stringify(value))
  },
  get(key){
    return JSON.parse(localStorage.getItem(key))
  },
  remove(key){
    localStorage.removeItem(key)
  }
};

export default storage

引入storageios

<script>
    import storage from './model/storage'
    export default {
        name: "MyApp",
        data() {
            return {
                todo:'',
                lists3:[],
            }
        },
        methods:{
            addList(e){
                if (e.keyCode===13){
                    this.lists3.push({
                        title:this.todo,
                        checked:false
                    });
                    this.todo = '';
                    this.addLocalStorage()
                }
            },
            delV(key){
                this.lists3.splice(key,1)//刪除lists3的第key個，刪除一個
                this.addLocalStorage()
            },
            addLocalStorage(){
                storage.set('list',this.lists3);
            }
        },
        mounted() {//vue頁面刷新就會執行的方法
            var list = storage.get('list');
            if(list){
                this.lists3 = list;
            }
        }
    }
</script>

組件的使用

Home.vue
```html
git

home組件

引入組件htmlweb

```

生命週期實例

<template>
  <div>
    <h3>home組件</h3>

  </div>
</template>

<script>
    export default {
        name: "home",
        beforeCreate() {
            console.log('實例剛剛被建立1')
        },
        created() {
            console.log('實例已經建立完成2')
        },
        beforeMount() {
            console.log('模板編譯以前3')
        },
        mounted() {  //請求數據，操做dom可在這進行
            console.log('模板編譯完成4')
        },
        beforeUpdate() {
            console.log('數據更新以前')
        },
        updated() {
            console.log('數據更新完畢')
        },
        beforeDestroy() {//頁面銷燬前報錯數據
            console.log('實例銷燬以前')
        },
        destroyed() {
            console.log('實例銷燬完成')
        }
    }
</script>

<style scoped>

</style>

<template>
  <div id="myapp">
      <v-home v-if="flag"></v-home>
      {{msg}}
      <button @click="changeMsg()">change</button>
      <br>
      <button @click="flag=!flag">掛載組件/銷燬組件</button>
  </div>
</template>

<script>
    import home from './components/Home'
    export default {
        name: "MyApp",
        data(){
            return{
                msg:'改變以前',
                flag:false
            }
        },
        methods:{
            changeMsg(){
                this.msg = '改變以後'
            }
        },
        components:{
            'v-home':home
        },
        beforeCreate() {
            console.log('實例剛剛被建立1')
        },
        created() {
            console.log('實例已經建立完成2')
        },
        beforeMount() {
            console.log('模板編譯以前3')
        },
        mounted() {  //請求數據，操做dom可在這進行
            console.log('模板編譯完成4')
        },
        beforeUpdate() {
            console.log('數據更新以前')
        },
        updated() {
            console.log('數據更新完畢')
        },
        beforeDestroy() {//頁面銷燬前報錯數據
            console.log('實例銷燬以前')
        },
        destroyed() {
            console.log('實例銷燬完成')
        }
    }
</script>

<style scoped>
  /*scoped 局部做用域*/
</style>

初始化項目

vue init webpack vue-demo

ESLint ? N 是否須要 js 語法檢測

進入 cd vue-demo

執行

npm install

接下來執行

npm run dev

，默認瀏覽器會自動打開

打包發佈：

npm run build

npm install -g serve

serve dist

基礎指令：

{{}}

v-one: 只渲染一次

v-html:解析HTML結構

v-bind: => 簡寫：

v-if :是惰性的

v-else

v-show:是否顯示或隱藏，只是經過操做css

v-for (k,i) (v,k,i) :key

v-on: => 簡寫 @

<!-- 阻止單擊事件繼續傳播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件再也不重載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修飾符能夠串聯 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件監聽器時使用事件捕獲模式 -->
<!-- 即元素自身觸發的事件先在此處理，而後才交由內部元素進行處理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只當在 event.target 是當前元素自身時觸發處理函數 -->
<!-- 即事件不是從內部元素觸發的 -->
<div v-on:click.self="doThat">...</div>

變異數組：

push()
pop()
shift()
unshift()前
splice()
sort()
reverse()
concat 數組合並

數組調用變異方法：example1.items.push({ message: 'Baz' }) 。

替換數組：

例如：filter(), concat() 和 slice() 。這些不會改變原始數組，但老是返回一個新數組。

components：組件

computed() 計算屬性

methods: 方法

Class與Style綁定 class="[{}]" 對象中能夠接受字符串，數組中接受對象

data: data函數,初始化數據 data中的a,b,c 獲取經常使用方法: const{ a,b,c} = this

props:[] 經過 Prop 向子組件傳遞數據
調用內建的 [$emit 方法]並傳入事件的名字，來向父級組件觸發一個事件：
使用 $emit 的第二個參數來提供這個值：

<template>
  <div>
    父組件: {{mon}}  <!--子傳父-->
    <child @money="getMoney" title="一個小目標"/>
  </div>
</template>

<script>
  import child from './child'

  export default {
    name: "parent",
    data() {
      return {
        mon: "",
      }
    },
    components: {
      child,
    },
    methods: {
      getMoney(data) {   // 子傳父
        this.mon = data;
      }
    }
  }
</script>

<style scoped>

</style>

<template>
  <div>
    子組件:
    {{title}}   <!--父傳子-->
    <button @click="sendMoney">點擊</button>  <!--子傳父-->
  </div>
</template>

<script>
  export default {
    name: "child",
    data() {
      return {}
    },
    props: ["title"],//父傳子
    methods: {
      sendMoney() {   //子傳父
        this.$emit("money", "先整一個億？")
      }
    }
  }
</script>

<style scoped>

</style>

類型：

props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object
}

// 帶有默認值的對象
    propE: {
      type: Object,
      // 對象或數組默認值必須從一個工廠函數獲取
      default: function () {
        return { message: 'hello' }
      }
    },

加載組件

<component v-bind:is="currentTabComponent"></component>

keep-alive

<!-- 失活的組件將會被緩存！-->
<keep-alive>
  <component v-bind:is="currentTabComponent"></component>
</keep-alive>

訪問根實例：

在每一個 new Vue 實例的子組件中，其根實例能夠經過 $root 屬性進行訪問。例如，在這個根實例中：

// Vue 根實例
new Vue({
  data: {
    foo: 1
  },
  computed: {
    bar: function () { /* ... */ }
  },
  methods: {
    baz: function () { /* ... */ }
  }
})

全部的子組件均可以將這個實例做爲一個全局 store 來訪問或使用。

// 獲取根組件的數據
this.$root.foo

// 寫入根組件的數據
this.$root.foo = 2

// 訪問根組件的計算屬性
this.$root.bar

// 調用根組件的方法
this.$root.baz()

訪問子組件實例或子元素：

<base-input ref="usernameInput"></base-input>

this.$refs.usernameInput

插槽：

<模板1>

you profile

在模板1的會被 you profile替換

1.基礎插槽
2.具名插槽
3.編譯做用域
父組件模板的全部東西都會在父級做用域內編譯；子組件模板的全部東西都會在子級做用域內編譯。
4.做用域插槽（數據傳遞）
在 2.5.0+，slot-scope 再也不限制在

自定義指令：

// 註冊一個全局自定義指令 `v-focus`
Vue.directive('focus', {
  // 當被綁定的元素插入到 DOM 中時……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

若是想註冊局部指令，組件中也接受一個 directives 的選項：

directives: {
  focus: {
    // 指令的定義
    inserted: function (el) {
      el.focus()
    }
  }
}

而後你能夠在模板中任何元素上使用新的 v-focus 屬性，以下:

<input v-focus>

過濾器：

<!-- 在雙花括號中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

你能夠在一個組件的選項中定義本地的過濾器：

filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

axios:

一箇中文網站： https://www.kancloud.cn/yunye/axios/

cnpm install --save axios

import Axios from 'axios'
Vue.prototype.$axios = Axios

執行 GET 請求

// 爲給定 ID 的 user 建立請求
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// 可選地，上面的請求能夠這樣作
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

執行 POST 請求

這裏的參數若是是?name=""&age=11 轉爲{name:"",age:11} 可以使用ps轉換

import ps from 'ps'

ps.stringify({.....})

axios.post('/user', {       
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

全局的 axios 默認值

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

攔截器

在請求或響應被 then 或 catch 處理前攔截它們。

// 添加請求攔截器
axios.interceptors.request.use(function (config) {
    // 在發送請求以前作些什麼
    if(config.method==='post'){
        config.data = qs.stringify(config.data)
    }
    return config;
  }, function (error) {
    // 對請求錯誤作些什麼
    return Promise.reject(error);
  });

// 添加響應攔截器
axios.interceptors.response.use(function (response) {
    // 對響應數據作點什麼
    return response;
  }, function (error) {
    // 對響應錯誤作點什麼
    return Promise.reject(error);
  });

axios封裝：

//ajax 請求函數
import axios from 'axios'

export default function ajax(url, data = {}, type = 'GET') {

  return new Promise(function (resolve, reject) {
    // 執行異步ajax請求
    let promise
    if (type === 'GET') {
      // 準備url query參數數據
      let dataStr = '' //數據拼接字符串
      Object.keys(data).forEach(key => {
        dataStr += key + '=' + data[key] + '&'
      })
      if (dataStr !== '') {
        dataStr = dataStr.substring(0, dataStr.lastIndexOf('&'))
        url = url + '?' + dataStr
      }
      // 發送get請求
      promise = axios.get(url)
    } else {
      // 發送post請求
      promise = axios.post(url, data)
    }
    promise.then(function (response) {
      // 成功了調用resolve()
      resolve(response.data)
    }).catch(function (error) {
      //失敗了調用reject()
      reject(error)
    })
  })
}

使用：

import ajax from './ajax'
// 參數param
export const reqAddress = geohash => ajax('/api/position/'+geohash)
// 無參數
export const reqFoodTypes = () => ajax('/index_category')
// 參數query 即？ latitude:latitude :後的要與（）參數一致
export const reqShops = (longitude,latitude) => ajax('/shops',{longitude:longitude,latitude:latitude})
//post 請求體
export const reqSmsLogin = (phone,code) => ajax('/login_sms',{phone,code},'POST')

經過代理解決跨域：**

配置config/index.js

proxyTable: {
      '/doubai_api':{  //匹配全部/doubai_api開頭的請求路徑
          target: 'http://api.douban.com',
          pathRewrite: {  //重寫路徑，去掉開頭的/doubai_api
                 '^/doubai_api': ''
          },
          changeOrigin: true //支持跨域
       }
    },

main.js：

Vue.prototype.HOST = "/doubai_api"

注意重啓服務器

訪問：
    var url = this.HOST + "/v2/movie/top250";
    this.$axios({
      method: 'get',
      url: url
    })
    .then(res => {
      console.log(res.data);
    })
    .catch(error => {
      console.log(error);
    })

Vue Router

安裝

cnpm install vue-router --save

import VueRouter from 'vue-router'
import HelloWorld from "@/components/HelloWorld"

Vue.use(VueRouter)

const router = new VueRouter({
  routes:[
    {
      path:'/hello',
      name:'HelloWorld',
      component:HelloWorld
    }
  ]
})

new Vue({
  el: '#app',
  router,
  data:{haha:'123'},
  components: { App },
  template: '<App/>'
})

<router-view/>

提取到router

import Vue from 'vue'
import VueRouter from 'vue-router'
import HelloWorld from "@/components/HelloWorld.vue"

Vue.use(VueRouter)

export default new VueRouter({
  routes:[
    {
      path:'/',
      name:'HelloWorld',//做爲跳轉使用
      component:HelloWorld
    }
  ]
})

main.js

import router from '@/router'

new Vue({
  el: '#app',
  router,
  data:{haha:'123'},
  components: { App },
  template: '<App/>'
})

路由跳轉：

<!--tag 渲染爲li-->
<router-link tag="li" to="/hello">HelloWorld</router-link>
<router-link tag="li" to="/">首頁</router-link>

路由帶參數：

path:'/hello/:id', //傳參

<!--tag 渲染爲li-->
<router-link tag="li" to="/hello/hahaha">HelloWorld</router-link>

HelloWorld.vue中：

<h2 v-text="this.$route.params.id"></h2>

嵌套路由：

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [
        {
          // 當 /user/:id/profile 匹配成功，
          // UserProfile 會被渲染在 User 的 <router-view> 中
          path: 'profile',
          component: UserProfile
        },
        {
          // 當 /user/:id/posts 匹配成功
          // UserPosts 會被渲染在 User 的 <router-view> 中
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]
})

編程式導航：

push：

// 字符串
router.push('home')

// 對象
router.push({ path: 'home' })

router.replace 不會向 history 添加新記錄

// 在瀏覽器記錄中前進一步，等同於 history.forward()
router.go(1)

// 後退一步記錄，等同於 history.back()
router.go(-1)

// 前進 3 步記錄
router.go(3)

命名路由：

// path:'/hello/:id', //傳參
path:'/hello/', //傳參

<router-link tag="li" :to="{name:'HelloWorld',params:{id:params_id}}">HelloWorld</router-link>

data(){
  return{
    params_id:'abc'
  }
},

重定向：

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
  ]
})

路由對象屬性：

vue-router的理解和使用
router-view/router-link/keep-alive
$router: 路由器對象, 包含一些操做路由的功能函數, 來實現編程式導航(跳轉路由)
$route: 當前路由對象, 一些當前路由信息數據的容器, path/meta/query/params

$route.path

類型: string

字符串，對應當前路由的路徑，老是解析爲絕對路徑
```
export default new VueRouter({
  /*class換個名字*/
  linkActiveClass:"active",/*全局配置 <router-link> 的默認「激活 class 類名」*/
  linkExactActiveClass:"currentActive",/*全局配置 <router-link> 精確激活的默認的 class*/
  routes:[
```
linkActiveClass
- 類型: string
- 默認值: "router-link-active"
  
  全局配置 <router-link> 的默認「激活 class 類名」
linkExactActiveClass
- 類型: string
- 默認值: "router-link-exact-active"
  
  全局配置 <router-link> 精確激活的默認的 class
  
  路由高亮：
  
  linkActiveClass的樣式設置
```
.active{
  color: red;
}
```

回退：

@click="$route.back()"

其餘方式：如過路由匹配，就指定樣式

:class="{on: '/msite'===$route.path}"

meta:

路由隱藏實例：

{
  path: '/msite',
  component:Msite,
  meta:{
    showFooter: true
  }
},

v-show="$route.meta.showFooter"

Swiper 4.0:

目前應用較普遍的移動端網頁觸摸內容滑動js插件

https://www.swiper.com.cn/

npm install --save swiper

https://www.swiper.com.cn/usage/index.html

import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'

// 或
cnpm install --save vue-awesome-swiper

Swiper4.x使用方法

1.首先加載插件，須要用到的文件有swiper.min.js和swiper.min.css文件。可下載Swiper文件或使用CDN。

<!DOCTYPE html>
<html>
<head>
    ...
    <link rel="stylesheet" href="dist/css/swiper.min.css">
</head>
<body>
    ...
    <script src="dist/js/swiper.min.js"></script>
    ...
</body>
</html>

2.HTML內容。

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- 若是須要分頁器 -->
    <div class="swiper-pagination"></div>
    
    <!-- 若是須要導航按鈕 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    
    <!-- 若是須要滾動條 -->
    <div class="swiper-scrollbar"></div>
</div>
導航等組件能夠放在container以外

3.你可能想要給Swiper定義一個大小，固然不要也行。

.swiper-container {
    width: 600px;
    height: 300px;
}

4.初始化Swiper：最好是挨着標籤

...
<script>        
  var mySwiper = new Swiper ('.swiper-container', {
    direction: 'vertical', // 垂直切換選項
    loop: true, // 循環模式選項
    
    // 若是須要分頁器
    pagination: {
      el: '.swiper-pagination',
    },
    
    // 若是須要前進後退按鈕
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    
    // 若是須要滾動條
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  })        
  </script>
</body>

若是不能寫在HTML內容的後面，則須要在頁面加載完成後再初始化。

<script>
window.onload = function() {
  ...
}
</script>

或者這樣（Jquery和Zepto）(推薦)

<script>
$(document).ready(function () {
 ...
})
</script>

5.完成。恭喜你，如今你的Swiper應該已經能正常切換了。

其餘：

<script>
    //局部使用
  import 'swiper/dist/css/swiper.css'
  import {swiper, swiperSlide} from 'vue-awesome-swiper'

  export default {
    name: "Swiper_Banner",
    components: {
      swiper,
      swiperSlide
    }
  }
</script>

其餘：

watch: {
  // 監控 categorys變化
  categorys(value) {
    // setTimeout(() => {
    //   new Swiper('.swiper-container', {
    //     loop: true, // 循環模式選項
    //     // 若是須要分頁器
    //     pagination: {
    //       el: '.swiper-pagination',
    //     }
    //   })
    // }, 100)

    //將回調延遲下次DOM更新循環以後執行
    //界面更新當即建立swiper對象
    this.$nextTick(()=>{
      new Swiper('.swiper-container', {
        loop: true, // 循環模式選項
        // 若是須要分頁器
        pagination: {
          el: '.swiper-pagination',
        }
      })
    })
  }
},

Element:**

組件庫,餓了麼出品

https://element.faas.ele.me/#/zh-CN

iview:

UI 組件庫

http://v1.iviewui.com/

npm install --save pull-to-refresh

下拉刷新：

npm install --save pull-to-refresh

stylus:

.styl格式

css預編譯器

其餘（less , sass）

npm install stylus stylus-loader --save-dev

編寫：

結構經過縮進，不須要大括號分號，冒號隨便

<style lang="stylus" rel="stylesheet/stylus">
  .app
    color red
</style>

父級引用：

使用&指向父選擇器：

text:hover{
}

// 等同於
text
  &hover

經過@import引入其餘樣式文件

min

實例：

$green = #02a774;
$yellow = #F5A100;
$bc = #e4e4e4;

// 一像素下邊框
bottom-border-1px($color)
 position relative
 border none
 &:after
  content ''
  position absolute
  left 0
  bottom 0
  width 100%
  height 1px
  background-color $color
  transform scaleY(0.5)
// 一像素上邊框
top-border-1px($color)
  position relative
  &::before
    content ''
    position absolute
    z-index 200
    left 0
    top 0
    width 100%
    height 1px
    background-color $color
//根據像素比縮放 1px 像素邊框
@media only screen and (-webkit-device-pixel-ratio: 2 )
  .border-1px
    &::before
      transform scaleY(.5)
@media only screen and (-webkit-device-pixel-ratio: 3 )
  .border-1px
    &::before
      transform scaleY(.333333)
//根據像素比來使用 2x 圖 3x 圖
bg-image($url)
  background-image: url($url + "@2x.png")
  @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
    background-image: url($url + "@3x.png")
//清除浮動
clearFix()
  *zoom 1
  &::after
    content ''
    display block
    clear both

使用：

@import "../../common/stylus/mixins.styl"
.footer_guide  //footer
  top-border-1px(#e4e4e4)

VUEX

vuex

npm install --save vuex

/*核心管理對象*/
import Vue from 'vue'
import Vuex from 'vuex'
/*狀態對象*/
import state from './state'
/*直接更新state的多個方法對象*/
import mutations from './mutations'
/*經過mutation間接更新sate的多個方法對象*/
import actions from './actions'
/*包含基於state的getter計算屬性的對象*/
import getters from './getters'

Vue.use(Vuex)

export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters
})

/*狀態對象*/
export default {
  latitude: 40.10038,//緯度
  longitude: 116.36867,//經度
  address: {},//地址信息對象
  categorys: [],//分類數組
  shops: [],//商家數組
}

/*包含n個mutation的type名稱常量*/
export const RECEIVE_ADDRESS = 'receive_address'  //接收地址信息
export const RECEIVE_CATEGORYS = 'receive_categorys' //接收分類數組
export const RECEIVE_SHOPS = 'receive_shops' //接收商家數組

/*直接更新state的多個方法對象*/
import {
  RECEIVE_ADDRESS,
  RECEIVE_CATEGORYS,
  RECEIVE_SHOPS
} from './mutation-types'

export default {
  [RECEIVE_ADDRESS](state, {address}) {
    state.address = address
  },
  [RECEIVE_CATEGORYS](state, {categorys}) {
    state.categorys = categorys
  },
  [RECEIVE_SHOPS](state, {shops}) {
    state.shops = shops
  },
}

/*經過mutation間接更新sate的多個方法對象*/
import {
  RECEIVE_ADDRESS,
  RECEIVE_CATEGORYS,
  RECEIVE_SHOPS
} from './mutation-types'

import {
  reqAddress,
  reqFoodCategorys,
  reqShops,
} from '../api'

export default {
  //異步獲取地址
  async getAddress({commit, state}) {
    const geohash = state.latitude + ',' + state.longitude
    const result = await reqAddress(geohash)
    if (result.code === 0) {
      const address = result.data
      commit(RECEIVE_ADDRESS, {address})
    }
  },
  async getCategorys({commit}) {
    const result = await reqFoodCategorys()
    if (result.code === 0) {
      const categorys = result.data
      commit(RECEIVE_CATEGORYS, {categorys})
    }
  },
  async getShops({commit, state}) {
    const {longitude,latitude} = state
    const result = await reqShops(longitude, latitude)
    if (result.code === 0) {
      const shops = result.data
      commit(RECEIVE_SHOPS, {shops})
    }
  },
}

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'


/* eslint-disable no-new */
new Vue({
  el: '#app',
  render:h=>h(App),
  router,
  store, //
})

使用 actions：

異步獲取數據到

created(){
  this.$store.dispatch('getAddress')
}

使用 actions 2：mapActions

import {mapActions} from 'vuex'

export default {
  name: 'App',
  methods:{
    ...mapActions(['getAddress'])
  },
  mounted(){
    this.getAddress()
  },

取state中的數據：

import {mapState} from 'vuex'

簡單的正則：

computed:{
  rightPhone(){
    return /^1\d{10}$/.test(this.phone)
  }
}

倒計時：

注意 ` 符號

{{computeTime>0 ? `已發送(${computeTime}s)`:'獲取驗證碼'}}

methods:{
  getCode(){
    if (!this.computeTime){
      this.computeTime = 30
      const intervalId = setInterval(()=>{
        this.computeTime--
        if (this.computeTime<=0){
          //中止計時
          clearInterval(intervalId)
        }
      },1000)
    }

  }
}

event.target：

//event.target返回的是點擊的元素節點

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。