Vue

基礎概念

 vue的核心是一個vue對象,在這個對象內咱們一直加入別的對象進行管理。css

vue內部選項講解:html

el:HtmlElement就是指定一個dom元素用來掛載vue實例的。el :'#app'vue

data(防止數據散落在業務邏輯內難以維護):node

支持在外部使用變量方法聲明:Data :myData  ;webpack

var myData ={a:1,b:2}ios

生命週期(vue的生命週期鉤子能夠參考Jquery的ready()函數)git

 

安裝vue(包括vue-cli腳手架)

https://segmentfault.com/a/1190000011275993?utm_source=tag-newest

建立項目

在本身選好的目錄下shift+右鍵打開命令行工具github

建立本身的vue項目:vue init webpack-simple my-project                -------simple用vue提供的簡單模板,命名成本身的項目名字web

安裝項目須要的依賴:npm install                                                     --------會自動導入一些包(相似maven下載依賴包)vue-router

打開項目:npm run dev

項目目錄講解

https://blog.csdn.net/chao2458/article/details/81284522

使用vue-router

單頁面應用構建步驟:添加Vue Router=> 組件映射到路由=>告訴 Vue Router 在哪裏渲染它們。

https://router.vuejs.org/zh/guide/#html

import Vue from 'vue'
import App from './App.vue'
//引入路由
import VueRouter from 'vue-router'

//1導入須要的組件
import Foo from './components/Foo.vue'
import Bar from './components/Bar.vue'

Vue.use(VueRouter)

// 2. 定義路由,每一個路由應該映射一個組件。 其中"component" 能夠是經過 Vue.extend() 建立的組件構造器, 或者,只是一個組件配置對象。

const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
// 3. 建立 router 實例,而後傳 `routes` 配置, 你還能夠傳別的配置參數, 不過先這麼簡單着吧。
const router = new VueRouter({
mode:'history',
routes
})

// 4. 建立和掛載根實例。 記得要經過 router 配置參數注入路由, 從而讓整個應用都有路由功能
new Vue({
router,//注意書寫規範
el: '#app',
render: h => h(App)
})

5<!-- 路由出口,路由匹配到的組件將渲染在這裏 -->

 <router-view></router-view>

使用axios

參考網址

axios: https://github.com/axios/axios
vue-axios: https://www.npmjs.com/package/vue-axios
qs: https://www.npmjs.com/package/qs

配置全局變量

webpack.config.js配置端口

devServer:
port:'8082'

main配置常規變量

Axios.defaults.baseURL = 'http://localhost:8080'
Axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
Axios.defaults.withCredentials = true

參考文檔使用發送請求

使用Vuex

 

使用element-ui

參考安裝地址

https://element.eleme.cn/#/zh-CN/component/installation

1.確認style-loader!css-loader是否下載,若是下載,是否在config文件中進行了配置

配置文件以下:

      {
        test: /\.css$/,
        loader: 'style-loader!css-loader',
        exclude: /node_modules/
      }

可是這樣仍然沒法正常運行的,由於在elment-ui中css中運用了餓了麼的字體庫,即.wtff文件,這致使任然缺乏一個解析器,即url-loader

   npm install url-loader/cnpm install url-loader -D

而後再配置文件中,加上

{
        test: /\.(woff|svg|eot|ttf)\??.*$/,
        loader: 'url-loader'
},

經常使用知識

1主頁面裏引入別的頁面

<template>
<div id="app">

  <First :prop-name="a">
  </First>

</div>
</template>

<script>
//導入具體的組件的地址
import First from './components/First.vue'
export default {
name: 'app',
components:{
//具體的組件
First
},
data () {
return {
msg: 'Welcome to Your Vue.js App',
a:'wang ba dan'
}
}
}
</script>

屬性傳參

<script>
export default {
name: 'first',
props:['propName'],
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>

 路由跳轉方法

連接跳轉

<router-link to="/foo">Go to Foo</router-link>

按鈕跳轉

<button @click="gotoByUrl('/foo')">Go to Foo</button>

gotoByUrl(url){   this.$router.push(url); }

相關文章
相關標籤/搜索