Vue-基础-day04-重点
01-基础-组件-局部组件
组件: 封装html+css+js
两类+三步
- 定义
- 设置组件选项
- 使用
02-基础-组件-组件嵌套
一个组件是父还是子 与 该组件是全局还是局部 没关系
一个组件是父还是子与该组件的使用位置
实际开发时 组件的写法不是目前的写法(特点/使用方式都一样)
03-基础-组件-组件通信的几种情况
父子组件 -> 父组件的数据 传递给 子组件去使用 -> 组件之间传值->组件通信
组件通信/传值不同情况->两个组件->不同关系:具体为:
- 兄弟组件 : 组件A把数据传递给组件B 去使用
- 父子组件:
- 父组件把数据传递给子组件去使用 (完成)
- 子组件把数据传递给父组件去使用
- 隔代组件: 毫无关系的组件之间传值
04-基础-组件-父子组件传值-props
props作用: 接收父组件传递的值
1. props是组件的选项
2. props的值可以是字符串数组 props:["msgchilda"]
3. props数组里面的元素称之为prop(属性) 属性=?值
4. prop的值来源于外部的(组件的外部)
5. prop(我们这里是msgchilda)是组件的属性->自定义标签的属性
6. prop的赋值位置(在使用组件时,通过标签属性去赋值)
7. prop的用法和data中的数据用法一样->{{msgchilda}}
05-基础-组件-父子组件传值-v-bind 的使用
<child-a :属性="父组件的data中的数据"></child-a>
06-基础-组件-父子组件传值-总结
父传子
- 声明属性 props:["属性a"]
- 赋值 使用组件时 <com-a :a="父组件data的数据"></com-a>
- 使用 子组件template {{a}}
07-基础-组件-组件和模块的区别
- 模块:具有独立功能的.js文件 -> 封装
- 组件:封装html+css+js
在组件中可以使用不同的模块
同一个模块(js功能)可以在不同组件中使用
目前代码中,newVue管理的div#app 根组件
08-基础-单页应用 SPA-特点
优点
- 用户体验好
- 完全组件化开发
缺点
- 首屏加载慢->按需加载
- 不利于SEO->服务端渲染(node->自己写路由->express-art-template+res.render())
- 开发难度高(框架)
vue适合开发SPA->什么是SPA+SPA特点
SPA不利于SEO->搜索引擎排名靠前->搜素引擎机制->搜索引擎不能去找到局部刷新的网站内容
09-基础-单页应用 SPA-实现原理
开发SPA项目原理:
- 前后端分离:前端布局+调用API | 后端专注(数据)
vue框架 体现前后端分离: 视图层(标签视图模板)+数据层(选项data)
js代码中: 视图代码+数据代码 - 前端路由:根据url不同的标识去渲染页面的部分内容->根据url的标识渲染不同的容器内容
总结: SPA项目需要(前后端分离+前端路由) -> vue开发SPA -> vue肯定会提供前端路由的功能
研究vue中前端路由的实现-> 先去重学原生js怎么实现路由的->对比分析
10-基础-路由-js 实现路由
- hash属性实现了路由功能
- HTML5 history(历史) -> 获取浏览器的访问历史记录 -> url
利用hash实现路由 -> vue中路由->对比
11-基础-路由-vue-router-文档
vue开发spa->需要提供路由功能->通过vue的插件vue-router实现了路由功能
- CDN
- 本地文件
- npm
本地文件(先引入vue.js 再引入vue-router.js)
12-基础-路由-vue-router-体验
前端路由作用:根据地址栏不同的标识 在页面容器中渲染不同的组件
13-基础-路由-vue-router-使用步骤
- 引入vue-router
- 视图 设置导航 router-link to
- 视图 设置容器 router-view
- js 提供组件选项所在对象
- js 实例化路由对象 new VueRouter({})
- js 配置路由 routes:[{path:?,component:?}]
- js 挂载路由 (通过选项去使用router)
注意: 6步非常重要!记住 -> 开发vue项目->好多不同的文件->6步会出现在不同文件
<body>
<div id="box">
<!-- 1.视图设置导航 router-link -->
<!-- 设置导航 -->
<router-link to='./home'>主页</router-link>
<router-link to='./top'>顶部</router-link>
<router-link to='./aboutus'>关于我们</router-link>
<!-- 2.视图设置容器 router-view -->
<router-view></router-view>
<router-view></router-view>
<router-view></router-view>
</div>
<script src="./vue.js"></script>
<script src="./vue-router.js"></script>
<script>
// 3.js提供组件选项所在对象
const Home = { template: '<div>这是home组件</div>' };
const Top = { template: '<div>这是top组件</div>' };
const Aboutus = { template: '<div>这是aboutus组件</div>' }
const routes = [{ path: '/home', component: Home },
{ path: '/top', component: Top },
{ path: '/aboutus', component: Aboutus }]
// 4.js实例化路由对象
var router = new VueRouter({
// 5.js配置路由
routes: routes
});
var vm = new Vue({
el: '#box',
// 6.挂载路由
router,
data: {},
methods: {}
});
</script>
</body>
14-基础-路由-vue-router-动态路由
动态路由: 根据不同的url标识渲染同一个组件 -> 开发SPA项目时 遇到了详情组件时
路由配置中 {path:"/固定标识/:id形参名"}
注意 :冒号是固定写法 id单词可以随便命名
<body>
<div id="box">
<!-- 1.设置导航router-link -->
<router-link to='/home'>首页</router-link>
<router-link to='/ball/football'>足球</router-link>
<router-link to='/ball/basketball'>篮球</router-link>
<router-link to='/ball/pp'>乒乓球</router-link>
<!-- 2.设置容器router-view -->
<router-view></router-view>
</div>
<script src="./vue.js"></script>
<script src="./vue-router.js"></script>
<script>
// 3.js提供组件所在对象
const Home = { template: '<div>我是home组件内容</div>' };
const Ball = { template: '<div>我是球的组件</div>' };
// 5.js配置路由
var routes = [{ path: '/home', component: Home }, {
// 一点按钮，一匹配成功，id是什么值就传什么值
path: '/ball/:id',
component: Ball
}];
// 4.实例化路由对象
var router = new VueRouter({
routes,
});
var vm = new Vue({
el: '#box',
// 6.挂载路由
router,
data: {},
methods: {}
});
</script>
</body>
15-基础-路由-vue-router-to 属性赋值
<!-- to值 字符串 -->
<router-link to="/home">主页</router-link>
<!-- to值 变量 -->
<router-link :to="top">热点</router-link>
<!-- to值 可以是{path等} -->
<router-link :to="{path:'/aboutus'}">关于我们</router-link>
<!-- to值 可以是{name等} -->
<router-link :to="{name:'aaa'}">AAA</router-link>
<!-- to值 可以是{params:{参数名:值}} -->
<router-link :to="{name:'bbb',params:{id:300}}">BBB</router-link>
在视图中获取动态路由参数的值 {{$route.params.id}}
注意:$route.params是固定写法
16-基础-路由-vue-router-重定向
// 点击top按钮->匹配路由->匹配成功->强制把当前的/top改成/home->修改标识->重新匹配路由->渲染组件
// redirect: "/home"
const routes = [{
name: "home",
path: "/",
// component: Home
// 重定向 把path改为 /home
// redirect: "/home"
redirect: {
// 去找到name 是abc的路由配置
// name: 'abc',
// 去找path 为 /home 的路径
path: '/home'
}
}]
17-基础-路由-vue-router-编程式导航
this.$router.push({
// name: "aaa"
path: "/top"
})
改变标识的方式
- router-link
- js代码 -> 编程式导航
18-基础-路由-vuew-router-routerlink-tag-激活样式
-
设置激活样式
-
router-link默认是a tag属性="li"
<router-link to="/top" tag='li'>热点</router-link>
网友评论