vue学习笔记

npm - 换淘宝源

Node 的模块管理器 npm 会一起安装好。由于 Node 的官方模块仓库网速太慢，模块仓库需要切换到阿里的源。
npm config set registry https://registry.npm.taobao.org/

执行下面的命令，确认是否切换成功。
npm config get registry

 

VUE组件说明：
1.全局组件：写在new Vue外面的组件
例：Vue.Component('标签名'),{
template:'要做成组件的HTML结构'
}
2.局部组件：写在new Vue内的组件
例：new Vue({
components:{
'组件名':{
template:'要做成组件的HTML结构'
}
}
})

组件说明：vue中的组件就是自定义标签
命名规范：驼峰命名法（coutSon）
烤串命名法(cou-son)

组件的通信：
1.父组件-->子组件
组件实例的作用域是孤立的，不能在子组件直接用父组件的数据；
处理办法：
可以在组件上使用自定义属性绑定数据，在组件中需要显式用props声明自定义属性名；
2.子组件-->父组件
处理办法：
需要用到自定义事件，父组件用$on监听自定义事件，$emit触发父组件所关心的自定义事件。

父组件-->子组件
例：

Vue.component('conSon'){
props:['btnValue'],//这里的名字不可以是烤串形式，必须是驼峰
template:'html结构'
}

props是专门绑定组件中自定义属性的；

子组件-->父组件
方法步骤：
1>创建一个变量val在父组件中，用于接收子组件的值；val='';
2>将val绑定到父组件要显示的input中

3>子组件的自定义标签中，添加自定义事件；

4>子组件中的元素(li)加点击事件，并通过vue自带监听事件，监听并回调要传的值；

methods:{
changeValue(item){
this.$emit('receive',item);
}
}
5>在父组件中的methods事件中写selectValue方法，方法中会传入value的值
methods:{
selectValue(value){
this.val=value;
//将最终得到的选项值赋给val显示到页面中
}
}
备注：$emit(str1,[str2])
str1:自定义事件名
str2:要传入的参数，可以是多个
触发当前实例上的事件，附加参数都会传给监听器回调；
这里的监听器可以理解为，子组件标签身上的自定义事件；

单向数据流
父组件向子组件传递数据，子组件不可以直接更改父组件的数据；
解决办法：
1>子组件可以通过自身组件中的data属性，来介接的改变父组件的数据；
2>也可以通过computed属性(计算属性)来改变父的数据；

props验证：
例：props:{
自定义属性名：{
type:Number,//设置类型 ---->>type:[String,Number]//类型也可以是多种
default:10,//设置默认值[可填]
required:true,//设置是否必填[可填]
}
}
自定义验证：
props:{
test(自定义属性名)：{
validator:function(value){
retrun value>10;
//value,是test绑定对应的数据的值；
//return 验证规则，直接写retrun true验证直接通过；如果写规则逻辑就按逻辑走；
}
}
}

使用slot分发内容
使用一种方式混合组件内容与子组件自己的模版，这个过程称为"内容分发"。

什么时候使用slot：
当写在自定义标签之间的内容，要混合子组件中的模版，这时就需要slot；
例：
一.单项替换

我是插入内容

template:`

这里可以是默认显示的内容，插入内容会替换到这里

`
二.名字替换
slot也可以通过名字指定插入位置
如：

要替换的标签

对应在父组件中写法：

替换p标签的内容

当组件中需要替换同一个slot多的内容，可以使用标签。
例：

编译作用域：
父组件模版在父组件中编译；
子组件模版在子组件中编译；

封装组件：
组件的特点： 重用性、可定制性、高内聚性、互操作性！

使用组件，is的特殊属性：
当使用DOM作为模版时，会遇到由于W3C结构标准的限制，使用is属性可以将组件套用到任意标签中；
例：组件加到

标签中



这样的写法，页面加载 后，会将组件自动拿出table；
-------------------------------------------------------------
使用is的方法：



这样加载后，custom标签会替换到tr标签的位置。

组件运行顺序：
页面加载会先加载组件的自定义标签，然后再运行VUE中的template里的html结构，最后再自定义标签(组件)中。

组件中的data说明：
组件中的data这个属性，用来放数据用的，data必须是一个函数，因为只有函数形式，每个组件的数据相互不会影响，如果是对象形式，组件之间都使用同一个对象数据，会相互影响；

如上所说写法：
data:function(){
return {这里写正式的数据}
}//在函数中，return一个对象，这样就不会相互影响了

 

实战项目说明
VUE-Cli 脚手架
是VUE的一个工具;
作用：
1.生成目录结构；
2.完成本地开发调试；
3.在代码编写完后，对代码进行压缩和部署；
4.利用脚手架的热加载特性，搞代码效率；
5.使用单元测试，测试代码功能；
安装方法：
1.node 4版本以上，npm在3版本以上
2.先创建一个放vue-cli的文件夹(就是放VUE的项目文件)
3.安装指令：npm install -g vue-cli
4.检查是否安装成功：vue -V（V必须是大写）
5.下载模版：vue init webpack vue-example
说明：vue-example，是模版文件名，随便起的；前面的指令为指定命令；
6.下载过程中的设置说明：
a.? Project name vue-example ：确认项目名是否为vue-example，直接回车；
b.？project descript(A Vue.js project)：对vue项目的描述，可以自己随便改写描述，写完后，直接回车；
c.？Author(WYseven)：作者名，可以自己改，改后，直接回车；
d.？Vue build(Use arrow keys)：显示一些信息，直接回车；
e.？Install vue-router?(Y/n)：是否加载vue-roter，输入Y是加载，然后回车；
f.？Use ESLint to lint your code?(Y/n)：是否检查代码风格，输入Y，回车；
g.？Pick an ESLint preset：显示检查代码的一些信息，直接回车；
h.？Setup unit tests with Karma+Mocha？(Y/n)：是否要对代码进行测试，输入n，回车；
i.？Setup e2e tests with Nightwatch？(Y/n) ：是否要e2e，输入n，回车；

以上都输入后，会显示需要输入的一些命令：
cd Vue-example
npm install
npm run dev

按照上面提示的命令，在Vue-example目录下输入相应命令即可；

其中npm run dev 为启动项目，会在浏览器中自动打开项目页面，http://localhost:8080/#/ 显示一个这样链接的页面，即为项目创建成功；

项目文件目录说明：
一级文件目录说明：
1.buil：webpack相关文件；
2.config：生产环境和开发环境的配置参数；
3.node_modules：第三方依赖；
4.src：项目源码文件，vue后缀的文件为，单文件组件
，这个文件里的代码，会被webpack进行处理；
5.static：放置第三方资源，其中有.gitkeep，需要上传空白文件夹时，需要在文件后缀写.gitkeep
6..babelrc：配置浏览器不支持的ES6新语法的转换；
1）presets:预设，语法放转换的插件；
如：env是ES6转换成ES5的插件；
stage-2 草案阶段；
2）plugins：配置方法转换插件；
如：transform-runtime：ES6方法转换成ES5方法；
3）comment：转换后代码上是否增加注释，flase为不增加；
4）env：test使用测试的时候使用的；
7..editorconfig：配置编辑器的格式风格等；
如：文件编码；
8..eslintignore：代码检查时，设置需要忽略的文件；
默认忽略：build/*.js config/*.js
9.eslintrc.js：代码风格检查；
10..gitgnore：使用git提交项目时，忽略指定文件和文件夹；
11..postcssrc.js：设置css的一些规则；
12.index.html：项目运行的模版
13.package.json：项目的一些配置；
14.README.md：对项目的使用说明；

vue-router
什么是前端路由：
在web开发中，路由是指根据url分配到对应的处理程序。
作用：
通过管理url，实现url和组件的对应和通过url进行组件之间的切换。

单页应用
加载单个HTML页面，并在用户与应用程序交互时动态更新该页面；

使用vue-router方法：
安装模块：
npm install vue-router --save
引入模块：
import VueRouter form 'vue-router'
作为Vue的插件
Vue.use(VueRouter)
创建路由实例对象
new VueRouter({--配置参数})
注入Vue选项参数
new Vue({router})
告诉路由渲染的位置

路由配置与创建的代码，都放到src下的router文件中，便于查找；

 

vue-router:中的hash模式与history模式
语法：mode:'history',
注：一般都是使用history模式，history模式适用于高版本；

history模式不支持IE8

history模式的好处：
使用history模式，跳转后的页面链接，会自动保存到浏览器中，可以使用浏览器自带的前进后退功能，回到之前打开过的页面；

注：如果在单组件元素中，设置的class名，是不会被router-view中的替换，会追加；

router-link:各种配置项
页面渲染结果：
默认router-link会渲染成a标签；

使用tag属性：tag="要生成的标签名"，页面会生成指定的标签；并且不需要自己监听事件，vue-router都自动监听;

如：

home

需要给li添加点击跳转链接，可以写成如下形式：

home

router-link中的to属性：相当于a标签中的href，此属性也可以动态绑定；
如：

new Vue({
　　data(){
　　　　index:'/home'
　　}
});

to属性中可以传一个对象的形式：可以同时写很多个配置项
如：

router-link点击时，router会自动添加一个叫router-link-active的样式名，当我们需要点击后，添加一定样式的时候，可以去给这个样式名上，添加样式；

这个自带的样式名router-link-active的class名太长，可以自定义设置；
设置方法：
方法一：在路由中设置
new VueRouter({
　　linkActiveClass:'要设置的class名' //重置router-link点击后的class名称
})
方法二：直接在router-link标签上设置

重定向和别名：
router-link默认是点击事件，如何修改默认事件行为：
在标签中使用event属性，写入事件名，即可修改；如下：

这样就改成了，鼠标移入事件;

---哪里需要放哪里---

当遇到没有匹配到的路径时，如何处理：
new VueRouter({
　　routes:[
　　path:'*',//匹配除去指定路径的，其它的路径
　　component: 要跳转的页面，如何给一个404提示页等。
　　name:'404'//这里的name属性是打这个路由的名字，可以给对应的路由起一个名字，方法以后的查找；
　　]
});

路由路径重定向：
new VueRouter({
　　routes:[
　　　{
　　　　path:'*',
　　　　redirect:'/home'//这里重定向的路径
　　　　redirect:{path:'/home'}//也可以写成对象的形式
　　　　redirect:{name:'home'}//这里的name代表的是路由的名字，直接指定这个名字的路由即可

　　　　redirect:(to) =>{//动态设置重定向目标
　　　　//to 目标路由对象，就是访问的路径的路由信息
　　　　return '/home' //这里返回要打开的目标

　　　}
　　}]
});

路由的别名使用方法：
new VueRouter({
routes:[
　　{
　　　　path:'/home',
　　　　component:home,
　　　　alias:'index' //使用这个属性设置别名

　　}]
})

注：使用别名打开页面时，不会有选中效果，因为在router-link中匹配的是/home，而不是/index,这个问题在使用中需要注意。

根路径设置问题：
默认打开http://locallhost:8080 时，打开是空白页，没有渲染相关页面时，这就需要设置一个根路径；方法如下：
new VueRouter({
　　routes:[
　　{
　　　　path:'/'//直接写/就代表根路径
　　　　component:home
　　}]
});
router-link 标签中的to路径也要改成'/'；

按照以上方法写，页面打开，切换导航时，激活状态会出现混乱，home激活状态和其它按钮状态会重叠。
原因：默认根路径是一个全包含模式；
处理方法：

哪里是根路径，就加在哪里

study

嵌套路由的使用：

在路由对象中，配置子路由，写法如下：
new VueRouter({
　　routes:[
　　{
　　　　path:'/about',
　　　　component:about,
　　　　children:[//这个属性用于配置子路由
　　{
　　　　path:'study',
　　　　component:study
　　}]
　　}
]
});

关注点分离概念：
对应的路径，渲染对应的组件；

如何设置默认显示的子路由：
在子路由对应的，路由中，将path:中的值，设置为空'',即可

注意，如果路由中，有了子路由，就不要把name给父路由设置，直接设置子路由即可，否则浏览器会警告提示。

命名视图：
概念：就是对router-view标签起一个名字；
使用场景：当遇到同一个单页面组件里，需要出现两个或多个router-view时，就需要对标签命名了；
命名方法：
1> 通过name属性起名

2>

new VueRouter({
　　routes:[
　　{
　　　　path:'/document',
　　　　components:{//组件属性写成对象形式
　　　　default:document， //default为默认组件
　　　　slider:slides
　　　　//slider:写的是标签中的name值；
　　　　//slides：写的是slides这个名字的.vue文件，需要引入到页面中
　　}
　　}]

});
注意：是在对应的路由中添加；

滚动行为：
浏览器滚动默认行为说明：当页面滚动到一定位置后，手动刷新浏览器，会发现页面依然在之前滚动位置，这是浏览器记录滚动位置的默认行为；

需求：点击浏览器的前进和后退的按照时，让打开的页面，保持在之前页面滚动的位置；

做法：

new VueRouter({
　　scrollBehavior(to,from,savedPosition){//滚动行为，在点击浏览器的前进后退或切换导航时，触发
　　　　//to:要进入的目标路由对象 (要去哪里)
　　　　//from:离开的路由对象 (从哪里来)
　　　　//savadPosition：记录当前滚动位置滚动条的坐标，点击前进后退时，坐标值 {x:0,y:0}
　　}
});

动态路径
匹配到的所有路由，全都映射到同一个组件
// 动态路径参数 以冒号开头
{ path: '/user/:id', component: User }
路径：/user/:userId userId为动态路径参数
userId可以使用正则符表示
如：
匹配 /user/:userId 有userId和没有userId的都需要匹配上，可以写成：
path:/user/:userId? //这里的userId？表示有userId和无userId都能匹配

注：在路由path中，添加动态参数方法是 (:参数名)，这里可以加多个；
如：user/:userId/:tip

获取参数：路由信息对象的params

如何拿到动态路由的信息？
created(){
//渲染这个组件会调用一次这个生命周期函数
//复用这个组件，这个函数不会再次被调用了
//地址一但发生变化 ，$route会重新生成一个路由信息对象
console.lo

g(this.$route)
}
对组件的注入

通过在VUE根实例的router配置传入router实例
$router router实例对象
$router 当前激活的路由信息对象，每个组件实例都会有；
beforeRouterEnter() 进入组件前钩子函数
beforeRouterLeave() 离开组件前钩子函数

如何监控路由发生的变化？
watch:{//在watch中监控路由
$route(){
//路由有变化，都会在这里监控到
//路径发生变化，$route会重新赋值，监控了这个属性，会执行这个函数
}
}

query查询字符串说明：
带查询参数的链接地址，称为：查询字符串
如：
//下面的结果为 /user?info=share
分享

链接地址为：/user?info=share
在切换router-link时，如何获取查询字符串中，info=share的share字符串？
通过路由信息对象中的query对象，用于URL查询参数的对象；

过渡动效：
router 提供了transition的封装组件，添加过渡动画
控制方法：会用CSS类名控制
使用方法：
将需要添加过渡效果的router-view包在transition标签中；如下 ：

过渡模式：
in-out:新进行过渡，完成之后当前元素过渡离开
out-in:当前元素先进行过渡，完成之后新元素过渡进入
使用方法如下：

自定义运动效果：
自带的css类名，是以v-开头的，后面的不能改变，v-可以随意修改；
如下：
v-enter:进入过渡时要做的动画；
可以改成
left-enter:自定义的动画

自定义的css类名动画如何使用到transition组件中?

路由元信息：
在路由配置中meta可以配置一些数据，用在路由信息对象中，访问meta中的数据：$route.meta

路由meta的设置方法：(在路由对象中配置)
routes:[
　　{
　　　　path:'/',
　　　　meta:{
　　　　index:0;//路由的下标
　　　　}
　　}
]
如果路由中有子路由，就配置到默认的子路由中，不用配置到父路由中；

页面中获取方法：
$route.meta.index

通过监听$route，得到目标和离开导航的下标
watch:{
$route(to,from){
to.meta.index //目标导航下标
from.meta.index //离开导航下标
}
}

导航钩子函数：
beforeEach(to,form,next):导航切换之前执行的函数

全局钩子函数例子如下：
router.beforeEach((to,from,next)=>{ //只有切换导航就会执行 切换导航前执行的函数
console.log('beforeEach')
next();//是否继续下一个目标路由，flase是不执行，true是执行
next(false);
next('要执行的路径') //可以传一个路由的路径，要执行到哪个路径；
//使用场景，比如当进行指定路由时，需要先登陆才可以查看；
if(to.meta.login){//在指定路由中，先在meta:{login:true} 在meta中做一个标识。判断当login为true的时候，就进入到登陆路由页面
　　//使用next('/login');
}else{
　　next();//否则直接进入下一个路由
}

})

afterEach:导航切换后执行的函数

router.afterEach((to,from)=>{//切换导航后执行的函数
//通过判断显示对应路由的title信息
if(to.meta.title){
　　window.document.title = to.meta.title;
}else{
　　window.document.title ='我要学'
}
})

路由中写钩子函数：(routes中配置)
beforeEnter:切换前执行
使用方法与全局一样

组件中写钩子函数：
beforeRouteEnter(to,from,next)：切换前执行
afterRouteLeave：切换后执行
beforeRouteUpdate：当导航中有二级导航时，切换二级导航会触发这个钩子
前两个使用方法与全局一样
beforeRouteEnter(to,from,next){
//注意这里面的this问题

}

在beforeRouteEnter中，当访问data数据中的数据时如何找到及处理办
法：
export default {
　　data(){
　　　　return {
　　　　　　test:'测试数据'
　　　　}
},
beforeCreat(){//组件创建的钩子
　　//页面加载这个钩子后执行
},
beforeRouteEnter(to,from,next){//组件路由钩子

console.log(this);//这里打印的是undefined
//因为，加载页面时，先执行了beforeEnter的函数，后创建vue实例，所以this得到的是undefined
//解决办法
next((vm)=>{//next回调中，会传vue的实例过来
　　console.log(vm.test);//通过这样就可以访问到vue实例中的数据
});
}
}

beforeRouteUpdate 使用方法
beforeRouteUpdate(to,from,next):使用方法与全局导航一样

afterRouteLeave 使用方法
afterRouteLeave(to,from,next)：使用方法与全局导航一样

Vue插件的编写：
第一个种：
通过在vue的原型链上添加自定义属性($custom)
Vue.prototype.$custom = "这是自定义的属性"

-----------------------------------------------------------------------------------------
VueX
使用VueX
1.安装vuex模块
npm install vuex --save
2.作为插件使用
Vue.use(Vuex)
3.定义容器
new Vuex.Store({
这里面放定义状态代码
})
4.注入根实例
{store}

vuex代码，一般放在src/store/index.js文件中

如何在vuex中定义状态数据？
例：
//创建Vuex实例
let store = new Vuex.Store({
//这里定义状态数据
state: {
count: 100
}
});

vuex核心概念
store:类似容器，包含应用的大部分状态
* 一个页面只能有一个store
* 状态存储是响应式的
* 不能直接改变store中的状态，唯一途径显示地提交mutations

State:包含所有应用级别状态的对象

Getters:在组件内部获取store中状态的函数

Mutations:唯一修改状态的事件回调函数

Actions:包含异步操作、提交mutation改变状态

Modules:将store分割成不同的模块

 

如何获取定义的状态数据？
例：
在需要获取数据的单页面文件组件中，使用以下方法
html结构：

如何改变vuex容器中（store）如的值？

一.改变非异步(不通过ajax)的值
使用mutations属性,处理同步数据修改
例:
vuex对象中写：
mutations:{//专门用于处理state中状态数据的回调
//这里的回调函数自己根修改状态数据的逻辑，随意写
addIncrement(state){//自己写的函数都会传一个state，用于找到状态中对应的数据
state.count +=1;
},
delIncrement(state){
//关于状态数据修改逻辑类的代码，都在这里处理
if(state.count<=0){
state.count = 0;
}else{
state.count -=1;
}
}
}
在单页面文件组件中调用
methods:{
delHadler(){
//delHadler函数触发时，调用mutations中的回调函数。
//调用方法，需要使用$store下的commit方法，参数中传入mutations中的回调函数名
this.$store.commit("delIncrement");
},
addHadler(){
this.$store.commit("addIncrement");
}
}

注意：
mutations不能直接调用；
调用方法：
$store.commit("写mutations中的回调函数名");

这个方法，一个参数的时候，是直接调用mutations函数。
第二个参数，代表传入mutations函数的参数。
第二个参数，可以是1个，多个的时候，传一个对象；
如:
$store.commit("写mutations中的回调函数名",{n:2});
这样在mutations:中就可以接收了

commit的对象形式写法
$store.commit({
type:'写mutations中的回调函数名',
de:10 //这个就是第二个参数，key名随便起
})

二.改变异步(ajax获取)的值
使用actions：处理异步数据修改
//要先写好mutations的方法
mutations:{
　　addIncrement(state){
　　　　state.count +=1;
　　}
},
/*
当遇到数据是通过ajax异步请求过来的，这时数据会有延迟
这种时候，就需要使用actions来提交mutations中的回调函数
*/
actions:{
//函数名随便写，参数是一个对象，和store对象的方法属性都一样的对象；
addAction(context){
　　　　setTimeout(()=>{
　　　　　　//通过context对象，可以使用commit方法，参数输入mutations中的函数名
　　　　　　context.commit('addIncrement');
　　　　},1000);
　　}
}

调用actions中的函数，方法如下

dispatch传参的格式方法，与this.$store.commit()一模一样
this.$store.dispatch('addAction');

actions中的函数可以相互调用传值；
例：
actions:{
//函数名随便写，参数是一个对象，和store对象的方法属性都一样的对象；
addAction(context){
　　　　setTimeout(()=>{
　　　　//通过context对象，可以使用commit方法，参数输入mutations中的函数名
　　　　　　context.commit('addIncrement');

　　　　//这里调用了下面的函数
　　　　　　context.dispatch('testAction',{test:'测试'});
　　　　},1000);
},
testAction(context,obj){//传值正常传
　　//可以打印出'测试的数据'
　　console.log(obj.test);
　　}
}

actions传值的另一种方法

actions:{
//函数名随便写，参数是一个对象，和store对象的方法属性都一样的对象；
/*
这个context参数，可以使用es6的结构赋值方法写
直接传一个对象形式{commit,dispatch} 把需要的方法直接写到里面，不用传context去调用对应的方法
这样写更方便。
es6的结构赋值：把一个对象里面的属性，直接放到对象中；
*/
addAction({commit,dispatch}){
　　　　setTimeout(()=>{
　　　　　　//通过context对象，可以使用commit方法，参数输入mutations中的函数名
　　　　　　commit('addIncrement');
　　　　　　dispatch('testAction',{test:'测试'});
　　　　 },1000);
},
testAction(context,obj){
　　console.log(obj.test);
　　}
}

getter计算状态
作用：关于状态数据中，一些对数据的处理(判断/过滤)等，都在getter属性中处理。
写法：在vuex对象中写

getters:{
　　filterCount(state){//state就是状态对象
　　　　//在这里做count的判断
　　　　return state.count >= 120 ? 120 : state.count;
　　}
}

调用方法：
computed:{//在计算属性中取vuex定义的状态数据
　　　　//getter的调用方法，就是在计算属性中，另定义一个函数，在这个函数中调用getter中判断过的值
　　num2(){
　　　　//$store中有getters属性，可以获取getter中的filterCount的值
　　　　return this.$store.getters.filterCount;
　　}
}

HTML显示方法：

说明：结构中num与num2，显示的方式就分开了。

Vuex辅助函数
mapState：
当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性。

mapGetters：
辅助函数仅仅是将 store 中的 getter 映射到局部计算属性

mapMutations：
将 store 中的 mutations 映射到局部计算属性
mapActions：
将 store 中的 actions 映射到局部计算属性

转载于:https://www.cnblogs.com/nemoDuoo/p/7678141.html