插槽
- slot插槽标签，可以在组件中预留一个位置，使用该组件后，可以动态的插入需要的内容到插槽中
- slot具名插槽，可以在模板标签中留一个slot属性，这个属性可以指定渲染插槽内容不会混淆，重复渲染
<script type="text/javascript">
Vue.component("child",{
template:`<div>
<slot name="a"></slot>
</div>`
})
</script>
<html>
<div slot="a">aaaaaaaaaaaa</div>
</html>
- slot插槽可以解决作子父组件的用域问题，组件标签在模板中，也就是在父组件的作用域中，所以可以访问到父组件的状态
<body>
<div id="app">
<navbar>
<button type="button" @click="isShow=!isShow">navbar组件click</button>
</navbar>
<sidebar v-show="isShow"></sidebar>
</div>
</body>
<script src="../1day/vue.js" ></script>
<script type="text/javascript">
//子组件
Vue.component("navbar",{
template:`
<div>
<slot></slot>
</div>
`,
})
//子组件
Vue.component("sidebar",{
template:`<div>
<ul style="background-color:pink;width:220px;">
<li>1111111</li>
<li>2222222</li>
<li>3333333</li>
</ul>
</div>`
})
const vm = new Vue({
el:'#app',
data:{
isShow:false
}
})
</script>
</html>
动画效果
-
单元素/组件过度
- css过渡
- css动画
- 结合animate.css动画库
-
多个元素过渡（设置key)
- 当有相同标签名的元素切换时，需要通过key特性设置唯一的值来标记以让Vue区分他们，否则Vue为了效率只会替换相同标签内部的内容 mode:in-out;out-in
-
多个组件过渡
-
列表过度（设置key）
过滤器
<img :src="data.img | mypath" />
vue解析的时候会通过管道符把原始的数据，传递到
Vue.filter("mypath",function(data){
return data.replace('w.h','100,200')
})
vue cli
-
使用 npm install -g @vue/cli(一次安装）node-sass需要单独处理
- vue create myapp (创建自己的vue开发文件
- npm run serve 开发环境运行
- npm run build 生成环境构建
- npm run lint 代码检测工具
- vue create myapp (创建自己的vue开发文件
-
关闭eslint的方法：
- 在cli4.5中关闭的方法就是在根目录创建一个vue.config.js文件
module.exports = { lintOnSave: false };
style标签加上 scoped属性后，css就会局部生效 style标签加上 lang="scss" 支持scss
- 反向代理
在发请求的过程中会涉及到跨域问题，由于有的服务器做了域名限制，所以我们需要开启方向代理来帮我们解决这个问题
module.exports = {
devServer:{
proxy: {
'/ajax':{
target:'https://m.maoyan.com',
changeOrigin:true
}
}
}
}
# 只要是/ajax的请求，都会代理到target指定的域名上
vue 路由
- vue中的根路径（src）可以是@代替
import Hwbar from '@/components/Hwbar'
- ruoter-view存放路由访问的视图页面
<router-view/>
- ruoter-link里面的tag可以生成指定的标签,to是路径
- 它还有一个属性 active-class 可以监听路由，然后动态给它加上类名 (声明式导航)
//不管tag生成什么标签，都是可以跳转的
<router-link to="/Center" tag="li">center</router-link>
<router-link to="/Film" active-class="myactive">film</router-link>
- 路由重定向,当路由路径都不符合的时候，会自动跳转到我们设置好的路径去
{
path:'*',
redirect:'/Center'
}
- 二级路由
{
path: '/Film/nowplaying',
component: Film,
children:[
{
path:'/Film/nowplaying',
component:Nowplaying
},
{
path:'/Film/comingsoon',
component:Comingsoon
}
]
},
- 动态路由，可以动态的生成路径，跳转后的页面，也能取到值
# 路由
{
path: '/detail/:myId',
component: Detail
}
# 跳转页面
methods:{
handleChangePage(e){
this.$router.push(`/detail/${e}`)
}
}
# 接收页面
mounted(){
this.dataInfo = this.$route.params.myId
}
- 路由命名
# 定义路由名称
{
path: '/detail/:myId',
name:'myRuote', // 通过自定义的方式定义路由
component: Detail
}
# 跳转页面
methods:{
handleChangePage(e){
this.$router.push({name:'myRuote',params:{myId:e}})
}
}
# 接收页面
mounted(){
this.dataInfo = this.$route.params.myId
}
-
vue数据二次循环渲染
- 方法1 可以使用，类似微信小程序得写法，在循环渲染的数组种，再循环渲染一次数据。
<ul class="i-list" v-for="item in dataList" :key="item.filmsId"> <li class="i-item"> <p class="star">主演:<a v-for="item2 in item.actors" :key="item2" >{{item2.name}} </a></p> </li> </ul>- 方法2 利用管道符，把数据过滤，然后再渲染
<p class="star">主演:<a >{{item.actors | actorfilter}} </a></p> import Vue from 'vue' // 利用管道符做数据过滤 Vue.filter("actorfilter",function(data) { let newlist = data.map(item => item.name) console.log(newlist); return newlist.join("、"); })- 当前页面定义的事件监听，当切换页面后需要关闭可以使用 beforeDestroy()这个生命周期函数
mounted(){ //监听事件 window.onscroll = this.handleScroll; }， beforeDestroy(){ //关闭事件 window.onscroll = null; },
