建立vue項目, 插件,組件,模塊,vue的全家桶

vue的核心思想: 1.數據驅動視圖.

　　　　　　　　2.數據的雙向綁定

利用npm 搭載一個vue項目

1.下載node

node.js是一門后端語言,用於我們寫服務端

(1) 點擊進入中文官網https://nodejs.org/zh-cn/

(2)點擊下載

(3),點擊以往版本

(4)選擇6.10.3版本,當然你也可以選擇,別的

(5)選擇下面的一個版本

2.安裝時直接選擇默認的路徑安裝就可以,防止出現意外

3.利用npm來創建vue項目

npm是node.js的包管理器.

(1)先建立一個文件夾lession

(2)在cmd中用cd 切換到lession 中, 運行 npm init 這步初始化操作

(3)這樣就可以用npm安裝一個插件了比如bootstrp,jquery,注意后邊的--save ,意思是保存到我的package.json, npm install 這個命令下載項目的所有依賴.比如jQuery和bootsrp等

(4) 安裝vue的官方命令行工具 vue-cli (又叫腳手架)

(5)查看vue提供的模板用 vue list 命令

(6)初始化模板 ,我們先用這個 webpack-simple 以后用webpack 這個模板,

用命令行為: vue init webpack-simple 02lesson 最后這個是文件夾名字 ,注意在window上運行時關於sass要選擇no

(6) 切換到文件夾 cd 02lesson

(7) 下載項目所有的依賴文件 npm install

(8) 運行vue項目 npm run dev

插件

插件就是js 的一個功能

組件

組件:由功能,架構,樣式組合的一個文件, 具體是什么后綴名由webpack來處理, 所有的組件的第一個首字母要大寫

在.vue文件中,一個組件由三部分組成

<!--寫頁面標簽的,-->
<template></template>


<!--寫業務邏輯代碼的-->
<script></script>


<!--寫樣式的-->
<style scoped></style> //如果你不設置scoped屬性,那么這個樣式會作用於所有的組件,如果設置了,僅僅作用於當前這個組件

如何關聯子組件

首先在src文件夾下創建,一個Vheader.vue的子組件.

app.vue是主組件, Vheader.vue是子組件,現在要在app中關聯vheader,有人問為什么要關聯子組件? 因為HTML給我們提供的標簽不足以滿足我們的要求,這時候就需要我們自己設計標簽,這就是子組件.

Vheader.vue

<template>
  <!--所有的標簽要放到div里稱為閉合標簽,因為template表不是真正意義上的標簽-->
  <div class="vheader">
    <img src="./assets/logo.png" alt=""> //不可以直接把img的路徑放到data()中,然后再這里引用因為這樣是加載不出來的,如果想要加載的話,需要在script中導入這個圖片
  </div>
</template>
<script>
  export default {
    name:'vheader',
    data(){
      return{
//這里你也可以寫屬性讓它渲染在標簽上
}
    }
  }
</script>
<style></style>

app.vue

<template>
  <div id="app">
<h3>{{msg}}</h3>
    <ul>
      <li v-for="(item,index) in lists">
       {{index}} {{item}}
      </li>
    </ul>

<!--導入vheader標簽-->
    <Vheader></Vheader>
  </div>
</template>

<script>
  //導入子組件
  import Vheader from "./Vhead.vue"
  //拋出一個對象
  export default {
    //name表示當前組件的名字
     name:"App",
    //數據屬性,是一個函數
    //當前組件的數據屬性
    data(){
       return{
         msg:"今天學習組件了",
         lists:["抽閑","喝酒","燙頭"]
         
       }
    },
    methods:{

    },
   //關於計算屬性,只要頁面一加載,就會,執行這個computed屬性.
    computed:{

    },
    //關聯子組件必須寫,在這里關聯子組件
    components:{
//把子組件關聯到對象中
  Vheader:Vheader
    }
  }
</script>


<style></style>

效果圖:

入口文件

main.js 就是項目的入口文件,以后在前端項目中凡是看到index,main.開頭的文件,一般情況下都是項目的入口文件.

//導入模塊 只能用這種字符串的方式引入,import 后邊是自己寫的別名,大寫是為了好區分,import 是es6的語法
import Vue from 'vue'
//引入組件時.要導入它的路徑,有import就會有export,自己寫的組件要寫路徑
import App from './App.vue'

new Vue({
  el: '#app',//這個在現在的這個項目沒有什么用
  render: h => h(App) //箭頭函數的另一種寫法,render方法的作用,把組件中所有的方法和屬性,都渲染到Vue這個項目中去.
})

簡單做了一個makedown

vmaked.vue

<template>
  <!--所有的標簽要放到div里稱為閉合標簽,因為template表不是真正意義上的標簽-->
  <div class="mark">

    <div class="showmark" v-html="currentmarked">

    </div>
    <div class="markdown">
      <textarea v-model="msg">

      </textarea>
    </div>

  </div>
</template>
<script>
  import Marked from "marked"//導入marked
  export default {
    name: 'mark',
    data() {
      return {
        msg: "dsdss"
      }
    },
    methods: {},
    computed: {
      currentmarked() {
        return Marked(this.msg)


      }
    },
    components: {}
  }
</script>

<style scoped>
  .markdown, .showmark {
    width: 50%;
    height: 300px;
    border: 1px solid red;
    float: right;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    /*並排顯示兩個盒子*/
    box-sizing: border-box;
  }

  textarea {
    width: 100%;
    height: 100%;
    border: none;

  }
</style>

View Code

app.vue

<template>
  <div id="app">

    <Vheader></Vheader>
    <br>
    <Vmarked></Vmarked>
  </div>
</template>

<script>
  //導入子組件
  import Vmarked from "./Vmarked.vue"
  //拋出一個對象
  export default {
    //name表示當前組件的名字
     name:"App",
    //數據屬性,是一個函數
    //當前組件的數據屬性
    data(){
       return{
         
       }
    },
    methods:{

    },
    computed:{

    },
    //關聯子組件必須寫,在這里關聯子組件
    components:{
      Vmarked:Vmarked
    }
  }
</script>


<style></style>

View Code

父組件把數據傳到子組件

使用vue的一個屬性就可以了,props.

要求把app.vue的data中的數據傳到子組件vheader中

步驟:

1.在要傳入子組件的標簽中自定義綁定一個屬性,跟自己要傳入的數據.

2.在子組件中驗證傳入數據的屬性

3.在子組件中就可以使用父組件中傳過來的數據了

app.vue

<template>
  <div id="app">
    <!--自定義hfavs屬性-->
    <Vheader :hfavs='lists' ></Vheader>
    <br>
    <Vmarked></Vmarked>
  </div>
</template>


<!--寫邏輯代碼的-->
<script>
  //導入子組件
  import Vheader from "./Vhead.vue"
  export default {
     name:"App",
 
    data(){
       return{
         msg:"今天學習組件了",
         lists:["抽閑","喝酒","燙頭"]

       }
    },

    methods:{

    },
    computed:{

    },
    //關聯子組件必須寫,在這里關聯子組件
    components:{
  Vheader:Vheader,
    }
  }
</script>



<!--寫樣式的-->
<style></style>

View Code

vheader.vue

<template>
  <!--所有的標簽要放到div里稱為閉合標簽,因為template表不是真正意義上的標簽-->
  <div class="vheader">
    <img src="./assets/logo.png" alt="">
    {{message}}
    <ul>
      <li v-for="item in hfavs">
        {{item}}
      </li>
    </ul>
  </div>
</template>
<script>

  export default {
    name:'vheader',
    data(){
      return{
        message:"今天你吃飯了沒?"}
    },
      //父組件向子組件傳值,一定要在子組件中,設置props屬性,驗證數據屬性的類型,因為我們傳過來的是列表,所以驗證為Array
    props:{
      hfavs:Array

    },
  }
</script>
<style></style>

View Code

子組件向父組件傳值

使用$emit()這個方法觸發自定義事件

1.在父組件中的子組件標簽中自定義一個事件

2,在子組件的button按鈕中定義一個click事件, 然后再methods中使用emit()觸發父組件中自定義的事件

<template>
  <!--所有的標簽要放到div里稱為閉合標簽,因為template表不是真正意義上的標簽-->
  <div class="vheader">
    <img src="./assets/logo.png" alt="">
    {{message}}
    <ul>
      <li v-for="item in hfavs">
        {{item}}
      </li>
    </ul>
    <button @click="addOneMage">增加</button>
  </div>
</template>
<script>

  export default {
    name:'vheader',
    data(){
      return{
        message:"今天你吃飯了沒?"}
    },
      //父組件向子組件傳值,一定要在子組件中,設置props屬性,驗證數據屬性的類型,因為我們傳過來的是列表,所以驗證為Array
    props:{
      hfavs:Array

    },
    methods:{
      addOneMage(){
//        this.hfavs.push("泡妹")
        //使用$emit這個方法觸發自定義事件,第一個參數為函數名的字符串,第二個參數為要傳入父組件的數據
        this.$emit('addHamder',"賭博")
      }

    }
  }
</script>
<style></style>

View Code

app.vue

<!--一個組件有三部分組成-->
<!--寫hml標簽的,-->
<template>
  <div id="app">
    <!--自定義hfavs屬性-->
    <Vheader :hfavs='lists' @addHamder="add"></Vheader>
    <br>
    <Vmarked></Vmarked>
  </div>
</template>


<!--寫邏輯代碼的-->
<script>
  //導入子組件
  import Vheader from "./Vhead.vue"
  import Vmarked from "./Vmarked.vue"
  //拋出一個對象
  export default {
    //name表示當前組件的名字
    name: "App",
    //數據屬性,是一個函數
    //當前組件的數據屬性
    data() {
      return {
        msg: "今天學習組件了",
        lists: ["抽閑", "喝酒", "燙頭"]

      }
    },

    methods: {
      add(a) {
        //在這里傳入參數
        this.lists.push(a)
      }
    },
    computed: {},
    //關聯子組件必須寫,在這里關聯子組件
    components: {
      Vheader: Vheader,
      Vmarked: Vmarked
    }
  }
</script>


<!--寫樣式的-->
<style></style>

View Code

vue 語法基礎

在這里只記錄一些我認為比較重要的內容,詳細情況請見

指令

指令 (Directives) 是帶有 v- 前綴的特殊屬性。指令屬性的值預期是單個 JavaScript 表達式(v-for 是例外情況，稍后我們再討論)。指令的職責是，當表達式的值改變時，將其產生的連帶影響，響應式地作用於 DOM。回顧我們在介紹中看到的例子：

<p v-if="seen">現在你看到我了</p>

這里，v-if 指令將根據表達式 seen 的值的真假來插入/移除 <p> 元素。

參數

一些指令能夠接收一個“參數”，在指令名稱之后以冒號表示。例如，v-bind 指令可以用於響應式地更新 HTML 屬性：

<a v-bind:href="url">...</a>

在這里 href 是參數，告知 v-bind 指令將該元素的 href 屬性與表達式 url 的值綁定。

v-bind v-bind動態綁定指令，默認情況下標簽自帶屬性的值是固定的，在為了能夠動態的給這些屬性添加值，可以使用v-bind:你要動態變化的值="表達式"

<!-- 綁定一個屬性 -->
<img v-bind:src="imageSrc">

<!-- 縮寫 -->
<img :src="imageSrc">

修飾符

修飾符 (Modifiers) 是以半角句號 . 指明的特殊后綴，用於指出一個指令應該以特殊方式綁定。例如，.prevent 修飾符告訴 v-on 指令對於觸發的事件調用 event.preventDefault()：

<form v-on:submit.prevent="onSubmit">...</form>

模塊

模塊:一個js文件就是一個模塊

vue的全家桶

vue+vue-router+vuex這三個是vue的全家桶

vue的設計模式:MVVM

vue 充當了一個V的角色,Vue-router,充當了vm的角色,vuex充當了M的角色.

vue-router

首先安裝vue-router

npm install vue-router --save

1.在main.js 中引入vue-router

2. 在main.js中調用vue-router

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'

Vue.use(VueRouter);
new Vue({
  el: '#app',
  render: h => h(App)
});

3.導入組件

4.創建router實例,然后傳router配置

5.把router實例掛載到vue中去

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
//導入路由組件
import Index from "./index.vue"
import Luffy from "./luffy.vue"

Vue.use(VueRouter);
//創建router實例,然后傳router配置
const router =new VueRouter({
  routes:[
    {path:"/",component:Index},
    {path:"/luffy",component:Luffy,}
  ]
})
new Vue({
  el: '#app',
  //把router掛載到Vue對象中去
  router:router,
  render: h => h(App)
});

6.在app.vue 中寫入router-view標簽,路由的出口,所有路由匹配的組件都會被渲染到這里

7.然后在app,vue 中寫入router-link標簽,相當於a標簽,to 屬性,相當於href

template>
  <div id="app">
    <ul>
      <router-link to="/">首頁</router-link>
      <router-link to="/luffy">路飛學城</router-link>
    </ul>
    <!--路由的出口,所有路由匹配的組件都會被渲染到這里-->
    <router-view></router-view>

  </div>
</template>

效果:

繼續加強版

加入url多了該怎么辦,這時候哦需要v-for了

app.vue

<template>
  <div id="app">
    <ul>
      <!--這里注意當給router-link加事件時,會阻止click事件的發生,需要在事件后邊加一個native屬性,就可以啦-->
      <router-link v-for="(item,index) in url" :to="item.href" :class="{active:currentindex==index}"
                   @click.native="getcolor(index)">{{item.name}}
      </router-link>

    </ul>
    <!--路由的出口,所有路由匹配的組件都會被渲染到這里-->
    <router-view></router-view>


  </div>
</template>

<script>
  export default {
    name: 'app',
    data() {
      return {
        url: [
          {href: "/", name: "首頁"},
          {href: "/luffy", name: "路飛學城"},
        ],
        currentindex: 0
      }
    },
    methods: {
      getcolor(index) {
        this.currentindex = index
      }
    }
  }
</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;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }
  
  a.active {
    color: yellow;
  }
</style>

View Code

效果圖,點擊標簽會自動變黃

axios發送ajax請求

安裝axios

#發送ajax請求需要安裝axios組件
npm install axios

main.js

 import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store/store'
import axios from 'axios'
Vue.prototype.$axios = axios //設置全局變量,在其他組件中就可以用this.$axios調用axios
axios.defaults.headers['Content-Type'] = "application/json" #設置請求頭

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

router.beforeEach(function (to,from,next) {

    if(to.meta.requireAuth){
      // 需要登錄的路由
      if (store.state.token) {
        // 已經登錄
        next()
      } else {
        // 未登錄
        next({
          name: 'login',
          query:{ backurl:to.path }
        })
      }
    }else{
      // 不需要登錄的路由
      next()
    }
  }
)

log.vue

  this.$axios.request({
17     url: 'http://127.0.0.1:8000/login/',
18     method: 'POST',
19     data: {
20       username: this.username,
21       password: this.password
22     },
23     responseType: 'json'
24   }).then(function (response) {
25     console.log(response.data)
26     
27     that.$router.push('/index')
28   })
29 
30 PS：重定向 that.$router.push('/index')