Vue基礎知識學習筆記

1、環境搭建
1.安裝nodejs （（https://nodejs.org/en/）
2.安裝腳手架 npm install --global vue-cli /cnmp install --global vue-cli 能夠安裝cnpm 用淘寶鏡像 npm install -g cnpm --registry=https://registry.npm.taobao.org
3.
（1）複雜的建立項目，必須cd 到對應的一個目錄中
vue init webpack vue-demo01
cd vue-demo01
npm run dev
（2）簡單的（推薦）
vue init webpack-simple vue-demo02
cd vue-demo02
cnpm install
cnpm run dev

咱們用vs code 打開項目，vs code 安裝vue擴展插件（Vue 2 Snippets）

2、vue 綁定數據、綁定屬性、綁定事件

App.vue文件內容

<template>
<!-- 只能有一個id，全部頁面都寫在div裏面 -->
<div id="app">
<!--綁定數據-->
aa {{msg}}<br/>
{{obj.name}}
<br/>
<ul>
<li v-for="(item,index) in list" :class="{'red':index==0,'blue':index==1}">{{item}}--{{index}}</li>
</ul>
<ul>
<li v-for="item in list1">{{item.name}}--{{item.age}}</li>
</ul>

<!--綁定屬性，v-bind能夠省略-->
<div v-bind:title="title">鼠標放上去</div>
<div :title="title">鼠標放上去</div>

<!--綁定html-->
<div v-html="html"></div>

<input type="text" v-model="msg" />

<input type="button" value="單擊" v-on:click="myclick"/>
<input type="button" value="單擊" @click="myclick"/>

</div>
</template>

<script>
// 業務邏輯，返回數據
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js App',
title:"title",
html:"<span style='color:red;'>aa</span>",
obj:{
name:"張三"
},
list:['11',"22"],
list1:[
{"name":"aa","age":11},{"name":"bb","age":22}

]
}
},
methods:{
myclick:function(){
alert("click");
}

}
}
</script>

<style>

</style>

3、生命週期函數和模塊化導入
新建一個model文件夾，而後建立一個product.js文件
product.js
var product = {

getProducts(){
return [{id:1,name:"aa"},{id:2,name:"bb"},]
},
saveProduct(){

}

}

export default product;

接下來就能夠在App.vue裏面使用product.js中的對象了

App.vue
<template>
<!-- 只能有一個id，全部頁面都寫在div裏面 -->
<div id="app">
{{msg}}

</div>
</template>

<script>

//導入模塊化文件
import product from './model/product.js'

// 業務邏輯，返回數據
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
methods:{
myclick:function(){
alert("click");
}

},
//生命週期函數 vue頁面刷新就會觸發的方法
mounted() {
this.msg ="11";

console.log(product.getProducts())
},
}
</script>

<style>

</style>

4、vue組件
就是各類組件重用，相似部分視圖
新建文件夾components,新建Home.vue
Home.vue

<template>
<!-- 只能有一個id，全部頁面都寫在div裏面 -->
<div id="app">
<h1>{{msg}}}</h1>
</div>
</template>

<script>

// 業務邏輯，返回數據
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
methods:{
myclick:function(){
alert("click");
}

}
}

</script>

<!--局部做用域，只對當前頁面有效-->
<style scoped>
h1{
color:red;

}
</style>

而後在App.vue中使用<v-home></v-home>
import Home from './components/Home.vue';
components:{

'v-home':Home
}

App.vue
<template>
<!-- 只能有一個id，全部頁面都寫在div裏面 -->
<div id="app">
{{msg}}

<v-home></v-home>

</div>
</template>

<script>

//導入模塊化文件
import product from './model/product.js';

import Home from './components/Home.vue';

// 業務邏輯，返回數據
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
methods:{
myclick:function(){
alert("click");
}

},
//生命週期函數 vue頁面刷新就會觸發的方法
mounted() {
this.msg ="11";

console.log(product.getProducts())
},
components:{

'v-home':Home
}
}
</script>

<style>

</style>

5、生命週期函數
主要有兩個 mounted（）{}請求數據，操做dom時候使用
beforeDestroy(){}頁面銷燬以前觸發，能夠在銷燬以前保存一些數據

6、請求數據（從github 看幫助文檔）
使用vue-resource 官方提供的vue的一個插件(如今已經不更新了，不推薦用了)
1.在項目目錄下 cnpm install vue-resource --save
2.main.js 寫入 import VueResource from "vue-resource"; Vue.use(VueResource);
3.調用方法 this.$http.get('http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1').then(response => {
// get body data
console.log(response.body);
}, response => {
// error callback
});

使用axios
cnpm install axios --save
在要使用的頁面調用import axios from 'axios';
axios.get('http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1', {})
.then(function (response) {
console.log(response.data.result);
})
.catch(function (error) {
console.log(error);
});

若是跨域請求使用fetch-jsonp

7、父頁面傳遞子頁面數據
1.父頁面： <v-header :parenttitle="title" :parentMethod="parent" :home="this" ></v-header>
能夠傳遞字符串也能傳遞方法和本身對象
2.子頁面進行接收 props:["parenttitle","parentMethod","home"]，調用
Home.vue
<template>
<!-- 只能有一個id，全部頁面都寫在div裏面 -->
<div id="app">
<v-header :parenttitle="title" :parentMethod="parent" :home="this" ></v-header>
</div>
</template>

<script>

import Header from './Header.vue';

// 業務邏輯，返回數據
export default {
name: 'app',
data () {
return {
title:"個人父頁面傳過來的值",
}
},
methods:{
parent:function(arg){
console.log("我是父頁面的方法"+arg);
}

},
components:{
'v-header':Header,
}
}

</script>

<!--局部做用域，只對當前頁面有效-->
<style scoped>
h1{
color:red;

}
</style>

Header.vue
<template>
<!-- 只能有一個id，全部頁面都寫在div裏面 -->
<div id="app">
<h1>{{msg}}</h1>
<h1>{{parenttitle}}</h1>
<button @click="parentMethod('header')">調用父頁面的方法</button>
<button @click="getParent()">獲取父頁面對象</button>
</div>
</template>

<script>

// 業務邏輯，返回數據
export default {
name: 'app',
data () {
return {
msg: '個人Header'
}
},
methods:{
getParent:function(){
console.log(this.home.title);
}
},
props:["parenttitle","parentMethod","home"]
}

</script>

<!--局部做用域，只對當前頁面有效-->
<style scoped>
h1{
color:red;

}
</style>

8、父頁面調用子頁面的方法和子頁面調用父頁面的方法
父頁面調用子頁面的方法屬性
父頁面 <v-header ref="header"></v-header>
getChild:function(){
console.log(this.$refs.header.msg);
this.$refs.header.headerMethod();
}
子頁面
data () {
return {
msg: '個人Header'
}
},
headerMethod:function(){
console.log("我是header方法");
}

子頁面調用父頁面的方法屬性
在子頁面中調用this.$parent.parentMethod();

 

9、使用vuex 狀態管理進行非父子組件傳值
vuex是一個專爲vue.js應用程序開發的狀態管理模式（大型項目中使用，小型項目中使用localstorage，sessionstorage）
1.vuex 解決了不一樣組件之間的數據共享問題
2.組件裏面的數據持久化
vuex的使用
1.src目錄下面新建一個vuex的文件夾
2.vuex文件夾裏面新建一個store.js
3.安裝vuex
cnpm install vuex --save
4.在剛纔建立的store.js 引入vue ，引入vuex，而且use vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
5.定義數據
//根據業務定義數據
var state = {
count:1
}
6.定義方法， mutations 裏面放的是方法，方法主要用於改變state裏面的數據
var mutations = {
incCount(){
++state.count;
}
}
暴露
const store = new Vuex.Store({
state,
mutations
})
export default store;

在組件裏面使用vuex:
1.引入 store
import store from '../vuex/store.js';
2.註冊
export default{
data(){
return {
msg:"aa"
}
},
store,
methods:{
incCount(){
this.$store.commit('incCount');//觸發state裏面的數據
}
}
}

3.獲取state裏面的數據
this.$store.state.數據 （this.$store.state.count）
4.觸發 mutations改變state裏面的數據
this.$store.commit('incCount')

 

10、路由vue-router
1.安裝組件
cnpm install vue-router --save
main.js 中寫入
import VueRouter from "vue-router";
Vue.use(VueRouter);

//1.建立組件
import Home from './components/Home.vue';
import News from './components/News.vue';
//2.配置路由
const routes = [
{ path: '/home', component: Home },
{ path: '/news', component: News },
{ path: '*', redirect: '/home' }//默認頁面使用Home
]
//3.實例化路由
const router = new VueRouter({
routes // (縮寫) 至關於 routes: routes
})
//4.掛載路由

new Vue({
el: '#app',
router,//使用router
render: h => h(App)
})

//5.App.vue 放入
<!-- 使用 router-link 組件來導航. -->
<!-- 經過傳入 `to` 屬性指定連接. -->
<!-- <router-link> 默認會被渲染成一個 `<a>` 標籤 -->
<router-link to="/home">首頁</router-link>
<router-link to="/news">新聞頁面</router-link>
<hr/>
<router-view></router-view>

11、vue動態路由和get傳值
動態路由
1.main.js 配置動態路由
import Content from './components/Content.vue';
const routes = [
{ path: '/content/:id', component: Content }
]
2.跳轉 <router-link :to="'/content/'+id">新聞詳情Content</router-link>
3.在Content頁面獲取請求參數
mounted() {
console.log(this.$route.params);
}

get 傳值

1.main.js 配置動態路由
import Content from './components/Content.vue';
const routes = [
{ path: '/content', component: Content }
]
2.跳轉 <router-link to="/content?id=111">新聞詳情Content</router-link>
3.在Content頁面獲取請求參數
mounted() {
console.log(this.$route.query);
}

 

12、vue路由編程式導航和hash模式 history模式
js觸發跳轉頁面
1.this.$router.push({path:"news"});
2.this.$router.push({path:"/content/222"});
3.能夠定義路由名字跳轉 {path:"/news",component:News,name:"news"} router.push({name:"news",params:{userId:123}});

訪問地址是#的是hash模式，去掉#是history模式 ，在 main.js中的路由設置
const router = new VueRouter({
mode:"history",
routes // (縮寫) 至關於 routes: routes
})

十3、Vue中路由的嵌套
1.配置路由
main.js
import User from './components/User.vue';
import UserAdd from './components/User/UserAdd.vue';
import UserList from './components/User/UserList.vue';

{
path:'/user',
component:User,
children:[
{path:"useradd",component:UserAdd},
{path:"userlist",component:UserList}

]
}
2.父路由裏面配置子路由顯示的地方
<div>
<router-link to="/user/useradd">useradd</router-link>
<router-link to="/user/userlist">userlist</router-link>
</div>
<br/>
<div>
<router-view></router-view>
</div>
</div>

十4、vue的ui框架
餓了麼公司基於vue開發的vue ui 組件庫
Element Ui 基於vue pc 端的ui框架
Mint Ui 基於vue 移動端的ui框架

Element Ui 使用
安裝：cnpm i element-ui -S

main.js中

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

webpack.config.js 中
{
test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
loader: 'file-loader'
}

可使用了
<el-row>
<el-button>默認按鈕</el-button>
<el-button type="primary">主要按鈕</el-button>
<el-button type="success">成功按鈕</el-button>
<el-button type="info">信息按鈕</el-button>
<el-button type="warning">警告按鈕</el-button>
<el-button type="danger">危險按鈕</el-button>
</el-row>

十5、路由的模塊化
新建文件夾router，新建router.js
import Vue from 'vue'
import VueRouter from "vue-router";
Vue.use(VueRouter);

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

//1.建立組件
import Home from '../components/Home.vue';
import News from '../components/News.vue';
import Content from '../components/Content.vue';
import User from '../components/User.vue';
import UserAdd from '../components/User/UserAdd.vue';
import UserList from '../components/User/UserList.vue';
//2.配置路由
const routes = [
{ path: '/home', component: Home },
{ path: '/news', component: News },
{ path: '/content/:id', component: Content },
{ path: '/content', component: Content },
{
path:'/user',
component:User,
children:[
{path:"useradd",component:UserAdd},
{path:"userlist",component:UserList}

]
},
{ path: '*', component: Home }//默認頁面使用Home
]
//3.實例化路由
const router = new VueRouter({
mode:"history",
routes // (縮寫) 至關於 routes: routes
})

export default router

main.js
import Vue from 'vue'
import App from './App.vue'
import VueResource from "vue-resource";
Vue.use(VueResource);

import router from './router/router.js'

 

//4.掛載路由

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