Vuejs入門基礎筆記

首先說明下

本文來自於學習慕課網：

vue.js入門基礎的學習心得，體會，筆記。

1.從 .vue到頁面

 通過藍色部分的腳手架工具我們實現vue的界面的展示。其中藍色部分的技術細節我們可以不用關注。我們需要關注的是綠色部分的實現。

其中綠色部分的.js就是我們的數據層，也就是module模塊。而html和css主要負責頁面的元素展示以及css效果。

我們需要關注的，是如下圖的三個部分，下圖是vue的一個組件具體由哪三個部分組成：

2.vue的一些重要的組件總結和示例：

 

 

 

3.vue的基礎框架

 4.自己做一個基於vue的todolist項目

4.1搭建環境

a.安裝淘寶cnpm鏡像

 

b.安裝vue-cil

c.新建項目工程

 

d.為項目工程安裝依賴項

運行如下命令，安裝package.json里面定義的需要的依賴項。

 

 4.2開始開發我的第一個vue項目：toDolist

4.2.1 修改Hello.vue里面的 template模塊的代碼，實現view的部分

代碼如下：

<template>
  <div class="hello">
    <h1>{{ title }}</h1>
    <input v-model="newItem" @keyup.enter="addNew"/>
    <ul>
        <li v-for="item in items" v-bind:class="{finished:item.isFinished}" v-on:click="toggleFinished(item)">
            {{item.lable}}
        </li>
    </ul>
  </div>
</template>

 

其中的

v-bind:class="{finished:item.isFinished}" 是實現點擊列表子元素之后，在相應列表的子元素下實現有無下划線的css渲染。

v-on:click="toggleFinished(item)"是具體實現css的改變的函數。

 <input v-model="newItem" @keyup.enter="addNew"/>實現了利用localstorage給列表實現了添加新的列表子元素。

這三個方法的實現都寫在了<script>模塊的methods部分

4.2.2 script部分實現代碼的邏輯處理

代碼如下：

<script>

import Store from '@/js/store'
var initItems=Store.fetch();
//console.log(initItems);
export default {
  name: 'hello',
  data :function() {
    return {
      title: 'This is a toDoList.',
      items:initItems,
      newItem:''
    }
  },
   watch:{
     items: {
      handler: function (items) { 
            Store.save(items);
       },
      deep: true
    }
  },
  methods:{
    toggleFinished:function(item){
    item.isFinished=!item.isFinished;
    },
    addNew:function(){
        this.items.push({
          lable:this.newItem,
          isFinished:false
        });
        this.newItem="";
    }
  }
 
}
</script>

 

其中的

import Store from '@/js/store'，我們是新建一個叫js的文件夾，文件夾里面新建一個store.js的文件。
然后store.js文件內部代碼如下：（主要實現列表數據的提取和保存），利用了window.localStorage對象的相關方法。其中fetch方法是提取數據，save方法是保存數據。

const STORAGE_KEY = 'todos-vuejs'
export default {
    fetch() {
            if (JSON.parse(window.localStorage.getItem(STORAGE_KEY || '[]'))) {
                return JSON.parse(window.localStorage.getItem(STORAGE_KEY))
            } else {
                var theItems = new Array();
                return theItems
            }

        },
        save(items) {
            window.localStorage.setItem(STORAGE_KEY, JSON.stringify(items));
        }
}

 

 

這里的Hello.vue里面的script模塊中，我們也利用了watch這個屬性，來檢測items的變化，來實現實時的保存items。

v-model="newItem"  就和input輸入的item，二者進行了綁定。

最后實現的效果如下圖：

 5 vue的組件划分

5.1父向子組件傳參

在components文件夾下，新建componentA.vue,

需要注意的代碼：

props:['msgFromFather'],

 methods:{
    clickComponetA:function(){ alert(this.msgFromFather); } }

 <button v-on:click="clickComponetA()">Click me!</button>
<h1>{{ msgFromFather }}</h1>

代碼如下：

<template>
<div >
<h1>{{ title }}</h1>
<h1>{{ msgFromFather }}</h1>
<button v-on:click="clickComponetA()">Click me!</button>
</div>
</template>

<script>

export default {
name: 'hello',
data :function() {
return {
title: 'Hello from component A'
}
},
watch:{

},
props:['msgFromFather'],
methods:{
clickComponetA:function(){
alert(this.msgFromFather);
}
}

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

a {
color: #42b983;
}
</style>

 

修改App.vue，代碼如下：

注意代碼：

 <component-a msgFromFather="Hi Son!"></component-a>

import componentA from '@/components/componentA' export default { name: 'app', components:{componentA} }

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view></router-view>
    <component-a msgFromFather="Hi Son!"></component-a>
  </div>
</template>

<script>
import componentA from '@/components/componentA'
export default {
  name: 'app',
  components:{componentA}
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

 

效果如下圖：

 

 

5.2子向父組件傳參

 

代碼如下

App.vue:

 

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view></router-view>
    <component-a msgFromFather="Hi Son!" v-on:sonTellsMe="listenToMySon"></component-a>
    <p>The son tells me:{{sonWords}}</p>
  </div>
</template>

<script>
import componentA from '@/components/componentA'
export default {
  name: 'app',
  data :function() {
    return {
      sonWords:''
    }
  },
  components:{componentA},
  methods:{
    listenToMySon:function(msg){
    this.sonWords=msg;
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

 

componentA.vue:

<template>
  <div >
    <h1>{{ title }}</h1>
    <h1>{{ msgFromFather }}</h1>
    <button v-on:click="clickComponetA()">Click me!</button>
     <button v-on:click="tellFather()">Tell my father!</button>
  </div>
</template>

<script>

export default {
  name: 'hello',
  data :function() {
    return {
      title: 'Hello from component A',
      msg:''
    }
  },
   watch:{
     
  },
  props:['msgFromFather'],
  methods:{
    clickComponetA:function(){
    alert(this.msgFromFather);
    },
    tellFather:function(){
          this.msg="Hi Father!";
          this.$emit('sonTellsMe', this.msg);
    }
  }
 
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>


a {
  color: #42b983;
}
</style>

 

效果如下圖：

 vueJS官網：

https://cn.vuejs.org/v2/guide/  參考api