vue

注意：不能选择body/html

行业规范：使用id ，因为id的唯一性

data为一个对象，其中的数据为变量，变量可以保存各种数据

let app=new Vue({ //这里面的this就指向app})

this.msg 就可以获取data中的msg变量中的数据

this.getMsg 就可以调用methods中的getMsg方法

{{ msg }} 使用插值语法直接将msg查到指定区域

1·变量，data中保存的数据

2·js基本运算

3·三元表达式

在指定区域插入指定数据，使用插值语法不会替换文本内容

也适用于一句话表达式

若取对象中的数据，使用.语法

带有标签的字符串叫做富文本

.lazy

.number

.trim

<input type="button" value="" @click='add'>

方法名使用' '包裹，不传参可以省略小括号

方法访问data数据，必须添加this

@事件名.enter

@事件名.stop

@事件名.prevent

@事件名.键值

click 鼠标单击事件

dblclick 鼠标双击事件

mouseenter 鼠标移入

mouseleave 鼠标移出

focus 获得焦点

blur 失去焦点

load 加载完成

keyup 鼠标弹起

change 监视变化事件

通过绑定指定属性后可以控制属性值的修改

:class='{类名:boolean}'

boolean为true：添加这个类名

boolean为false：不使用这个类名

.box.active{ }

中间没有空格

item：数组中的每一项

index：数组中每一项的下标

items：遍历的数组

:key

value:对象中每一项的键值

key：对象每一项的键名

index：对象中的序号

Object：遍历的对象

v-for 遍历对象比较少

值为true则渲染

值为false则不渲染

v-show是显示，v-show性能高，v-if是渲染，v-if性能低

根据某个条件，是否渲染某个标签

例如英雄案例的 v-if 显示 暂无数据

与if-else用法相同

v-else后不带值

[v-cloak]{ display:none}

.xxx-enter-active, .xxx-leave-active { transition: all 2s; }

.xxx-enter{ opacity: 0; transform: translateX(-200px); } .xxx-leave-to{ opacity: 0; transform: translateX(200px); }

<transition-group name="xxx"> <div class="box" v-if="isShow" key='div1'></div> </transition-group>

.xxx-enter-active, .xxx-leave-active { transition: all 2s; }

.xxx-enter { opacity: 0; transform: translateX(-600px); } .xxx-leave-to { opacity: 0; transform: translateX(600px); }

多个动画进行过渡，使用:nth-child() 选择器处理

Vue生命周期是指vue实例对象从创建之初到销毁的过程，vue所有功能的实现都是围绕其生命周期进行的，在生命周期的不同阶段调用对应的钩子函数可以实现组件数据管理和DOM渲染两大重要功能。

此阶段为实例初始化之后，此时的数据观察和事件机制都未形成，不能获得DOM节点。

准备开始渲染dom数据，但是还没有渲染

可以访问vue渲染的dom

进入页面需要访问dom的操作就在这里调用

例如iScroll滚动条插件就在mounted中实例化

可复用，易维护，利于多人协同开发

写HTML结构，通常用一个div包裹全部元素

写JS逻辑，包含data，methodes，生命周期钩子函数等都写在这里

写css样式

<vue

import 组件名 from "组件路径";

export default { components: { 组件名,//注册的组件都写在components对象 } }

在template中 以组件名的标签直接插入

<组件名></组件名>

import { 名字 } form 路径

名字需要对应，且使用{ } 花括号包裹， 原理是解构赋值

npm i axios

import axios from "axios"

axios({ url:"xxx" }).then(res=>{ })

1·在子组件标签上引用 ref='值'

2· 通过引用 this.$refs.值 访问子组件this

this.$parent

使用场景： 例如多个组件都需要使用到的轮播图，就可以用props传递

1·父组件传值子组件

value为需要过滤的数据

value.map(item=>{ //过滤条件 })

Vue.filter('过滤器名字',(需要过滤的数据)=>{ })

注意过滤器名字使用引号包裹

实例

axios.get('请求地址url',{ params:{请求参数} }).then(res=>{ }).catch(err=>{ })

axios.post('请求地址url',{请求参数}).then(res=>{ }).catch(err=>{ })

axios({ url:'接口请求地址', method:'请求方式'}, params:{'get请求参数'}, data:{'post请求参数'}).then(res=>{ '成功返回'}).catch(err=>{'失败返回'})

整合了get与post请求方式

axios.defaults.baseURL='基地址'

挂载到Vue原型，使用this访问

Vue.prototype.$axios = axios

一次性解决每次请求都要添加token请求头

interceptors：拦截器

request：请求

use：使用

config：配置

getToken： 自己封装的获取token方法

headers：请求头

token：请求字段

创建脚手架，route是项目名

安装router路由插件

在mian.js文件中导入router插件

注册router插件

实例化路由

在实例化路由中配置路由信息

注意这里的component别写错

在父组件App.vue 使用路由占位符

这步容易忘

路由视图，如果标签中没有任何内容 可以写成但标签的形式 <router-view/>

在指定目录 运行项目

使用场景：用户未登录直接通过路径地址访问，将访问地址重定向到登陆页

使用方法：

1·在src目录下新建router文件夹

2·在router文件夹中新建index.js

3·导入vue 导入路由 注册路由

4·实例化路由

5·暴露路由

局部刷新

this.$router.push(`/songsList?keywords=${this.inputVal}`);

this.$router.push('/');

url: `http://183.237.67.218:3000/mv/detail?mvid=${this.$route.query.mvid}`

beforeEach ： 在路由发生跳转之前

使用实例

to , form 都是同一个对象，又一个path属性为路径

一般处理一些进入页面之后的事件。例如登陆的转圈圈特效，登陆成功跳转之后关闭该特效

子路由路径不添加 /

不添加 / 在访问是可以清晰知道是哪个路由的子路由

在beforeEach前置守卫中判断

如果要跳转的路径包含在白名单数组中，不需要做判断，直接放行

state，驱动应用的数据源； view，以声明方式将 state 映射到视图； actions，响应在 view 上的用户输入导致的状态变化。

import Vuex from 'vuex'

Vue.use(Vuex);

const store = new Vuex.Store({ state: { //在state存放数据 } })

new Vue({ store, render: h => h(App), }).$mount('#app')

this.$store.state.属性名

在计算属性中添加

新的值随着依赖的值变化而变化

注意这里的写法，getters是一个对象，里面的是一个saleProducts对象，保存着一个形参为state的方法

state就是store保存数据的地方，state为计算属性的第一个参数，访问到了state就可以对其中的数据进行操作了

第一个参数state 是保存数据的容器

第二个参数payload是自定义的参数

this.$store.commit('minusPrice', 2)

必须使用.commit('要触发的方法名'，自定义的payload参数) ，要触发的方法名必须一致

//commit : 提交 ，同步执行

// context -> mutations -> minusPrice

context就是mutatins ，再通过mutatins中的minusPrice函数处理数据

actions中不是处理数据的方法，而是将处理数据的方法变成异步执行

this.$store.dispatch('minusPriceAsync',5)

必须使用dispatch('方法名'，自定义的payload参数)

//dispatch : 派遣，异步执行

相当于：子组件调用actions中的方法，actions中的方法再调用mutatins中的方法处理数据

<div class="wrapper" id="wrapper"> <ul> <li>10</li> </ul> </div>

.wrapper { width: 300px; height: 200px; border: 1px solid red; overflow: hidden; position: relative; }

mouseWheel: true,

scrollbars: true

refresh:刷新，更新

NProgress.start() //开始

NProgress.done() //结束

.enter ：事件修饰符

定义变量保存input搜索框的内容，默认为塞拉斯

定义变量保存数据下标，搜索方法根据该下标渲染对应数据

搜索英雄方法

1·使用for循环遍历heroList数据

2·使用if条件判断heroList.name 是否包含input搜索框的值【 使用es6语法 ：includes 】

3· 将heroIndex的值改为i

⚠️ 注意：在methods方法中访问data ，必须添加this

保存图片下标

点击下一张触发，图片下标自增1，使用if判断当前图片下标是否大于数组长度-1 ，是的话把图片下标改为0，从头开始

点击上一张触发，图片下标自减1，使用if判断当前下标是否小于0，是的话把图片下标改为数组长度-1，从最后开始

这里渲染的是一个数组，使用join(' ') 转化为字符串

数据中包含富文本，使用v-html渲染

如果heroIndex等于当前的li下标，添加active类名，反之不添加

inputVal:''

<input class="search" type="text" placeholder="请输入英雄名称进行搜索" @keyup.enter='search' v-model='searchVal'>

@click='search'

search(){ this.searchVal=this.inputVal; for(let i=0;i<this.hero.length;i++){ if(this.hero[i].name.includes(this.searchVal)){ this.heroIndex=i; } } }

v-if='item.name.indexOf(inputVal)!=-1

this.heroIndex=-1;

<div class="content" v-if='heroIndex!=-1'>

如果heroIndex=-1 则是没有搜索到数据，没搜索到数据则不渲染，显示下方的 暂无数据div

id在请求英雄详情时使用

1·清空heroList

2·重新发送英雄列表请求axios ，参数为inputVal 搜索框搜索内容

this.heroInfoArr.push(res.data.data)

for (let i = 0; i < this.heroInfoArr.length; i++) { if (this.heroInfoArr[i].id == id) { this.heroInfo = this.heroInfoArr[i]; return } }

mounted() { this.myIscroll=new IScroll('this.$refs.list',{ mouseWheel:true, scrollbars:true }) },

reduce(index) { if (this.list[index].num > 0) { this.list[index].num-- } }

let _price = 0; //保存总价

this.list.forEach(item => { _price += item.num * item.price; })

return _price

<p>总价：{{ getResult }}</p>

1·创建脚手架

2·拷贝静态资源到assets文件夹

3·启动项目

4·复制基本HTML到App.vue

1·在components文件加中新建musicList.vue子组件

2·抽离基本HTML ，导入App.vue 并注册

3· 下载axios 并在main.js导入全局使用

4·进入页面就发送axios ，所以在created中发送请求

5· 在data中声明变量，并保存服务器返回的音乐数据，并渲染到页面

6· 添加iscroll插件

7·在li音乐列表添加点击事件，并传递点击的音乐id ，稍后播放需要使用

1·搜索框定义搜索事件，发送axios

2·并且在音乐列表组件musicList标签使用ref引用，获取子组件this，将获取到的音乐列表数据传递给子组件

3· 创建方法，获取音乐播放url

4· 将url绑定到audio标签中，并定义播放与暂停方法

1·抽离html区域 导入子组件并注册，使用组件名做为标签插入指定位置

2·绑定class

3·父组件通过refs访问到cover组件的this，根据音乐播放或暂停更改playing的值

1·抽离html 导入 组册 标签

2·主组件添加获取评论方法

3·通过ref引用，将评论数据传递给comment子组件

4·渲染

父传子

子传父

1·在components文件夹中新建子组件

2·将指定的HTML结构抽离，拷贝到子组件template

3·import 组件名 from 组件路径 引入子组件

4·在components对象中注册子组件

5·在指定区域使用组件名做为标签插入

1·npm安装 导入

2·在mounted钩子函数实例化

3·刷新

创建项目

启动项目

<style> @import url(./assets/css/index.css); @import url(./assets/css/iconfont.css); </style>

安装饿了么ui

在main.js导入饿了么ui

注册饿了么ui

使用v-for渲染

下载安装vue-router路由插件

导入路由插件

注册路由插件

实例化路由

配置路由

在App.vue 使用路由占位符

路由传参

路由接收参数

下载安装axios

导入axiso

创建歌曲列表组件

导入组件

App.vue input搜索框添加search事件

接收参数，注意这里的$route最后不带r

1· filters:{}

2· filters:{ filterAr(参数){return 123}}

3· {{ 参数 | 方法名}}

4· 注意 ：不能用this

5· return arr.map(item=>{ //返回数组中的name 拼接成一个新数组 return item.name }).join('&amp;')

1·@click='goHome'

2· this.$router.push('/');

1· this.$router.push("/").catch(e => e)

2· const originalPush = VueRouter.prototype.push VueRouter.prototype.push = function push(location) {return originalPush.call(this, location).catch(err => err)}

1· filters:{ singer(singer){ return singer.map(item=>{ return item.name }).join('&amp;') } },

2· <div class="singer">{{ item.artists | singer }}</div>

overflow: hidden; text-overflow: ellipsis; white-space: nowrap;

超出隐藏 字符显示...

<span class="iconfont icon-play" @click="playMusic(item.id)"></span>

//播放音乐 playMusic(id){ this.$router.push(`/player?id=${id}`); }

created(){ axios({ url:`http://183.237.67.218:3000/song/url?id=${this.$route.query.id}` }).then(res=>{ window.console.log(res); }) // window.console.log(this.$route.query.id); }

<audio class='audio' controls :src="musicUrl" autoplay></audio>

autoplay 自动播放

//歌词 axios({ url:`http://183.237.67.218:3000/lyric?id=${this.$route.query.id}` }).then(res=>{ this.lyric=res.data.lrc.lyric.split('\n'); // window.console.log(this.lyric); })

<li class='lyric' v-for="(item, index) in lyric" :key="index">{{ item.split(']')[1] }}</li>

//歌曲详情 axios({ url:`http://183.237.67.218:3000/song/detail?ids=${this.$route.query.id}` }).then(res=>{ this.songs=res.data.songs[0]; window.console.log(res.data.songs); })

filters:{ singer(singer){ return singer.map(item=>{ return item.name }).join('&amp;') } }

<div class="player" v-if="songs!=''">

安装moment

定义过滤器过滤时间戳

moment插件自带方法 (time)为传入的时间戳

{ path:'/comment', //评论 component: comment }

import comment from './components/comment.vue'; //导入评论子组件

<div class="song" v-for="(item, index) in songs" :key="index" @dblclick="goComment(item.id)">

goComment(id){ this.$router.push(`/comment?id=${id}`); }

axios({ url:`http://183.237.67.218:3000/comment/music?id=${this.$route.query.id}` }).then(res=>{ this.commentList=res.data.comments; window.console.log(res); })

filters:{ commentTime(time){ return moment(time).format('YYYY-MM-DD HH:mm') }

{ path:'/mv', //mv component: mv }

import mv from './components/mv.vue'; //导入mv子组件

<span class="iconfont icon-editmedia" v-if='item.mvid!=""' @click='goMv(item.mvid)'></span>

//mv goMv(mvId){ this.$router.push(`/mv?mvid=${mvId}`); }

axios({ url:`http://183.237.67.218:3000/mv/detail?mvid=${this.$route.query.mvid}` }).then(res=>{ // 遍历url对象 找出最大的key值 let _val=0; for(let key in res.data.data.brs){ if(key>_val){ _val=key; } } this.mvUrl=res.data.data.brs[_val]; this.mvInfo=res.data.data; })

1·在songsList组件添加watch监视器，监视路由地址后的请求参数变化

2·在监听的对象方法中重新发送axios请求音乐列表

export default router

import VueRouter from 'vue-router'

1·导入Vue

2·注册到Vue.use

const router=new VueRoter({ })

注意此处子组件的路径

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

1·在指定的文件夹运行终端命令 vue create 项目名

2·启动项目 npm run serve

3·拷贝静态资源

4·子组件创建

5·路由配置

传递：this.$router.push('/路由路径?参数名=参数值')

接收：this.$route.query.参数名

路由基本使用

1·过滤器都定义在 filters:{ } 对象中

2·过滤器本质上是一个方法，把需要筛选的数据传入这个方法，得到想要的数据

3·配合map()方法使用

1·模版字符串

2· map()

3·split()

4·join()

5·$router.push()

6·$route.query.参数名

7·for in 对象

注意这里的components是带s的，说明要导入多个组件

使用name做为标识，渲染对应的导入的组件

如果没有name属性，则渲染默认的组件

当组件中没有任何内容时，可以写成但标签<router-view />的形式

// 允许使用路由router对象中的params做为组件的属性参数传递 传递到组件上props对象中对应的属性上

<!-- 为了解藕将 name 做为一个参数传递 -->

// 定义传递给组件上的参数对象 组件上也要有对应的food属性接收这个参数

组件中定义

渲染到页面

路由中配置

组件中配置

渲染到页面

// path写法直接在路径后拼接 this.$router.push(path: `/argu/${name}`)

this.$router.push( name: "argu", params: { name: "zhangsan" })// name写法传递参数使用 params 对象

//query :参数 query: { name: "chen" } 使用query也可以

$router为vue的路由实例

this.$route.query.id

this.$route.params.id

$route 为当前跳转的对象

默认模式

保存数据源

const state = { 在这个对象中保存数据 }

export default state

保存处理数据的方法

const mutations = { 在这个对象中保存处理数据的方法}

export default mutations

导入Vue与所有抽离的文件

import Vue from 'vue' import Vuex from 'vuex' import state from './state' import getters from './getters' import mutations from './mutations' import actions from './actions' import user from './module/user'

Vue.use(Vuex)

export default new Vuex.Store({ 在这个对象中注册导入的文件 })

在main.js中引入index.js

import store from './store'

最后在new Vue 中挂载store

appName为属性名

...展开操作符会展开一个state对象，mapState会将这些展开的内容返回，最后使用appName属性名来匹配，与方法 1 一致

传入的是一个对象，与方法2类似

user为模块名，用户相关的信息都保存在这个模块中

state为数据源

将state以参数传入，就可以访问其中的数据，在将处理后的结果return出去

return this.$store.gettes.appNameV

...mapGtters([ 'appnameV' ])

平铺方法之后还要再次调用

this.setAppName('需要传递的参数') ，注意参数的传递方式

参数添加在后面

父属性绑定

子props接收

引用通信

子派发事件通信

谁派发谁监听事件

父搭桥通信

根组件搭桥通信

new Vue 实例通信

提供

注入

Object.keys.length!=0

解构数组arr ，求出最大值

选择属于其父元素的第二个子元素的每个 <p> 元素。

实例

选中从第6个开始的子元素

选择1,4,7,10