vue学习

什么是Vue.js
Vue.js是目前前端的主流框架之一和Angular.js、React.js一起并称为前端的三大主流框架，前端的主要工作主要负责MVC中V这一层，主要工作就是和界面打交道。

Node(后端)中的MVC与前端MVVM之间的区别
MVC是后端的分层开发概念
MVVM是前端视图层的概念，主要关注于视图分离，也就是说：MVVM把前端的视图层分为了三部分,Model、view、vm、ViewModel
MVVM思想的整理

vue.js编译出的.vue文件中，是由template和style还有script，分别对应html代码和css代码以及js代码。

声明式和命令式
命令式就像是jQuery一样，你需要写监听，然后绑定数据，需要把值设置到标签里面去，整个流程的事情都需要你来做。
声明式就是说你需要什么样的功能就写什么样的语法。

Vue安装Vue Devtools调试工具
Vue Devtools调试工具
以及解决Vue.js not detected的问题

修改启动端口
修改端口

项目实现
①vue ui搭建（需要3.0以上版本）或者
具体的搭建方法

②安装路由模块
1.安装vue-router
npm install vue-router --save dev(这个如果在搭建项目的时候已经选用了就不需要再安装）
2.安装element-ui
npm i element-ui -S
3.安装SASS加速器（可选）
npm install sass-loader node-sass --save-dev
4.安装axios
npm install --save axios vue-axios

③配置路由
1.创建路由表 ，如果搭建时候选过vue-router则已经创建好了，此时index.js就是路由表

import Vue from 'vue'
import Router from 'vue-router'
import Login from '../views/Login.vue'
//安装路由
Vue.use(Router)
export default new Router({  
	routes: 
	[    
		{      
			path: '/Login',      
			name: 'Login',      
			component: Login    
		}  
	]
})

2.在main.js中配置路由表

import VueRouter from 'vue-router'

Vue.use(VueRouter);

3.在App.vue下创建路由视图

<template>  
	<div id="app">    <router-view></router-view>  </div>
</template>

④引入Element-ui

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

//使用ElementUI
Vue.use(ElementUI);

⑤引入axios

import axios from 'axios'
import VueAxios from 'vue-axios'

//使用
axiosVue.use(VueAxios,axios)

vue.js组件的重要选项
-data(数据)

new Vue({
	data:{
		a:1,
		b:[]
	}
})

页面绑定

<p>{{a}}</p>

-methods(方法)和-watch(监听)

new Vue({
 	data:{
 		 a:1,
  		 b:[]
 	}
},
	methods:{
		doSomthing: function(){
			console.log(this.a)
		}
	},
	watch:{
		'a':function(val,oldVal){
			console.log(val,oldVal)
		}
	}
})

模板指令：
数据渲染：v-text、v-htmml、{{}}都是对应到数据源当中的数据

<p>{{a}}</P>
<p v-text="a"></P>
<p v-html="a"></P>

new Vue({
 	data:{
  		a:1,
  		b:[]
 	}
})

控制模块隐藏：v-if 、v-show其中v-if没有对dom元素进行渲染，而v-show是对css的display进行隐藏

<p v-if="isShow"></P>
<p v-show="isShow"></P>

new Vue({
  	data:{
  		isShow:true
  	}
})

渲染循环列表：v-for

<ul>
	<li v-for='item in items'>
		<p v-text='item.label'></P>
	</li>
</ul>

data:{
	items:[
		{
			label:'apple'
		},
		{
			label:'banana'
		}
	]
}

事件绑定:v-on

<button v-on:click="doThis"></button>
<button @click="doThis"></button>

methods:{
	doThis:function(someThing){}
}

属性绑定: v-bind
在src中这个变量为字符串，下面为布尔值

<img v-bind:src="imageSrc">

<div :class="{red: isRed}"></div>
<div :class="[classA,classB]"></div>
<div :class="[classA,{classB: isB,classC: isC}]"></div>

vue.js组件之间的调用
-components
引入了以后需要用components来注册组件,然后才有真实的标签

import Header from './header'
import Footer from './footer'
new Vue({
	data:{
		isShow:true
	},
	components:[
		Header,Footer
	]
})

vue.js组件之间的通信

new Vue({
	data:{
		username:'xxx'
	},
	props:['msg'],
	methods:{
		doThis:function(){
			console.log(this.msg)
		}
	}
})

<header msg='something interesting'></header>
<footer></footer>

PS：用componet声明的标签是要用中线加隔开的，比如说

components:{ComponentA}

vue.js会把这个驼峰命名自动转成小写加中线的格式的标签放到模板里面。

vue的启动流程

实现传参的两种方式
index.js中

{
	path:'/productinfo/:id',
	name:'ProductInfo',
	componet:ProductInfo
}

页面嵌套路由

//第一种
<router-link to="/productinfo/1">商品信息</router-link>
//第二种
<router-link to="{name:'ProductInfo',params:{id:1001}}">商品信息</router-link>

接收数据页面

{{this.$route.params.id}}

参考资料：
一般般好看的登录页面 (vue)
基于 Vue.js 2.0 酷炫自适应背景视频登录页面的设计
B站视频