Vue基础知识学习笔记

一、环境搭建
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）

二、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>

三、生命周期函数和模块化导入
新建一个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>

四、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>

五、生命周期函数
主要有两个 mounted（）{}请求数据，操作dom时候使用
beforeDestroy(){}页面销毁之前触发，可以在销毁之前保存一些数据

六、请求数据（从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

七、父页面传递子页面数据
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>

八、父页面调用子页面的方法和子页面调用父页面的方法
父页面调用子页面的方法属性
父页面 <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();

九、使用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')

十、路由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>

十一、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);
}

十二、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
})

十三、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>

十四、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>

十五、路由的模块化
新建文件夹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)
})