vue的一些概念
双向数据流：js内存属性发生变化，影响页面的变化；页面的改变影响js内存属性的改变
v-bind绑定是单向的，页面值得改变不能影响内存中的值。
给class属性绑定值的几种写法。
//第一种,注意加单引号
<div :class="math>=60?'green':'red'"></div>
//第二种,score存在data中，根据不同的值取相应的类名
<div :class="{'A':'green','B':'red'}[score]"></div>
//第三种,good和momon存在data中，值为false或true
<div :class="'green':good,'red':momon"></div>
v-for遍历对象 <li v-for="(value,key,index) in students" :key="index">
对象属性键值:{{key}}
对象属性值 :{{value}}
对象属性次序值:{{index}}
</li>
声明全局过滤，Vue.filter('过滤器名',function(s){return ...});
路由
1.下载，npm i vue-router -S
2.在mian.js中引入 import VueRouter from 'vue-router'
3.安装插件 Vue.use(VueRouter);
4.创建路由对象并配置路由规则
let router = new VueRouter({ routes:[ {path:'/home',component:Home} ] });
5.将其路由对象传递给Vue的实例，options中，加入 router:router
6.在app.vue中留坑。 <router-view></router-view>
路由的使用
在main.js中引入路由插件
import Vue from 'vue'; import App from './app.vue'; import VueRouter from 'vue-router'; //引入其他模块 import Home from './home.vue'; import Movie from './movie.vue'; import Music from './music.vue'; import Picture from './picture.vue' //安装路由插件 Vue.use(VueRouter); //创建路由对象并配置路由规则 let router = new VueRouter({ routes:[ {path:'/home',component:Home}, {path:'/music',component:Music}, {path:'/movie',component:Movie}, //加name表示起了个别名 {name:'img',path:'/picture',component:Picture} ] }); new Vue({ el:"#app", router:router, render:c=>c(App) });
写模块，比如 home.vue
<template> <div> <h2>我是主页</h2> </div> </template>
在app.vue中使用
<template> <div> <div class="header"> <a href="#/home">主页</a> <a href="#/movie">电影</a> <a href="#/music">音乐</a> <router-link :to="{name:'img'}">图片</router-link> <router-link to="/movie">另一种写法</router-link> </div> <div class="content"> <!-- 这里留坑，灰常重要，上面切换锚点，在这个坑里显示切换后的新内容 --> <router-view></router-view> </div> </div> </template>
<router-link :to="{name:'img'}">图片</router-link> 这里的img就是上面main。js中那个起了别名的模块。
路由传递参数
<template> <div> <ul> <li v-for="(m,i) in musics" :key="i"> {{m.name}} <router-link :to="{name:'musicDetail',query:{id:m.id,name:m.name}}">查看</router-link> </li> </ul> </div> </template> <script> export default{ data(){ return { musics:[ {name:"一生所爱",id:1001}, {name:"天空之城",id:1101}, {name:"一眼万年",id:1002}, {name:"卖报歌",id:1201} ], } } } </script>
路由接收参数
<template> <div> {{getData}} </div> </template> <script> export default{ data(){ return{ getData:{}, } }, created(){ this.getData = this.$route.query; } } </script>
<router-link :to="{name:'musicDetail',query:{id:m.id,name:m.name}}">查看</router-link>
当点击查看时，路由到musicDetail？id=***&name=***
还有另外一种方式，<router-link :to="{name:'musicDetail',params:{id:m.id,name:m.name}}">查看</router-link>，
在created方法中 this.getData = this.$route.params;这种写法不会自动在地址栏中拼接传递的参数，需要在mainz.js中路由对象上在做些配置
{name:'musicDetail',path:'/musicDetail/:id/:name',component:MusicDetail}，告知相应参数该出现的位置，路由为musicDetail/id值/name值
编程导航，点击按钮跳转页面
methods:{
music(){
this.$router.push({name:'musicDetail',params:{name:"we",id:1301}});
}
}
this.$router.push(name:'组件别名',params:{这里是要传递过去的数据});
this.$router.go(-1); -1后退一个页面，1是前进一个页面。
根据锚点跳转页面的原理，是利用给window添加hashchange事件来检测地址栏的描点变化，以做出相应的反应。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"></div> </body> <script> window.addEventListener('hashchange',function(){ var text = ""; switch(location.hash){ case('#/a'): text = 'aa'; break; case('#/b'): text = "bbb"; break; } document.getElementById('app').innerHTML = text; }); </script> </html>
