Vue基础4 (简单易上手，适合前后端)

最新推荐文章于 2024-04-02 04:22:18 发布

慢慢敲吧

最新推荐文章于 2024-04-02 04:22:18 发布

阅读量865

点赞数

文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/qq_57469718/article/details/122271272

版权

基础-组件-组件通信的几种情况
组件嵌套 => 父子组件 => 父组件传递数据给子组件使用 => 组件之间的传值 => 也叫组件之间的通信组件之间的通信根据关系的可以分为：
1. 父子组件通信
父组件到子组件
子组件到父组件
2.兄弟组件通信

//调用组件
<div id="app">    
    <child-a :msg="msgParent"></child-a> 
</div>

//子组件
Vue.component("child-a", { 
    template: ` <div>         
				我是子组件         
				{{count}}是自己的data中的数据count         					{{msg}}是来源于外部组件的数据</div>         					</div>`, 
    data() {     
        return {         
            count: 100     
        } 
    }, 
    props: ["msg"]
})
//父组件（根组件）
new Vue({
    el: '#app'
    data: {
    		msgParent: "我是父组件"
	}
})

基础-组件-父子组件传值-PROPS属性
父子组件的传值有多种方法，兄弟组件的通信也有自己的写法
1.子组件的props属性值是一个数组
2.数组中的值绑定为子组件上的属性用来接受父组件的传值
3.在子组件的`template`中就可以使用绑定的属性（`msg`）拿到父组件传递的值

基础-路由-`JS` 实现路由
通过上一个小节内容可以得出采用 hash值改变的特性来进行前端路由切换
路径：
1. 实现导航结构`（'#/aaa'）`
2.`onhashchange`事件监听hash值的改变
3.获取hash值根据值的不同改变视图内容

基础-路由-`VUE-ROUTER`-文档
`Vue-Router` 是 `Vue.js` 官方的路由管理器
它和 `Vue.js`的核心深度集成，让构建单页面应用变得简单
实现根据不同的请求地址而 `显示不同的内容`
如果要使用 `vue`开发项目,前端路由功能必须使用`vue-router`来实现
用法：1.`CDN` 2.本地文件 3.`npm`
`注意`：本地文件引入`vue-router` ，一定要先引入`vue.js`，再引入`vue-router`

基础-路由-`VUE-ROUTER`的基本用法
1. 导入`vue`和`vue-router`
2. 设置HTML中的内容
3. 实例化路由对象,配置路由规则
4. 创建路由对应的组件
5. 把router实例挂载到`vue`实例上

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 配置路径 -->
        <router-link to="/home">主页</router-link>
        <router-link to="/top">热点</router-link>
        <router-link to="/abouts">关于我们</router-link>
        <!-- 显示的内容 -->
        <router-view></router-view>
    </div>
    <script src="./vue.js"></script>
    <script src="./vue-router.js"></script>
    <script>
        // 模板内容
        let Home = {
            template: `<div><span>主页</span></div>`
        }
        let Top = {
            template: `<div><span>热点</span></div>`
        }
        let Abouts = {
            template: `<div><span>关于我们</span></div>`
        }
        // 匹配规则
        let router = new VueRouter({
            routes: [{
                path: '/home',
                component: Home
            }, {
                path: '/top',
                component: Top
            }, {
                path: '/abouts',
                component: Abouts
            }]
        })
        let vm = new Vue({
            el: '#app',
            data: {},
            router
        })
    </script>
</body>

</html>

基础-路由-`VUE-ROUTER`-动态路由
点击 `列表页` 跳转到 `详情页` 时,跳转的链接需要携带参数,会导致 path 不
当path不同却需要对应同一个组件时,需要用到动态路由这一概念

步骤：

1.标签上传入不同的值

<router-link to="/item/8">小米电视</router-link> 
<router-link to="/item/9">华为电视</router-link> 
<router-view> </router-view>

2.路由规则中尾部添加动态参数 id

{ path: '/item/:id', component: Items }

3.在组件内部可以使用$route.params 获取当前路由对象的动态参数

let Items = {  
template: '<div>我是商品详情页 {{ $route.params.id }}</div>',  mounted： {      
	console.log(this.$route.params.id);  
	} 
}

基础-路由-`VUE`-ROUTER-TO 属性赋值
to有多种赋值方法

<!-- 常规跳转 --> <!-- <router-link to="/aaa">aaa</router-link> --> 
<!-- 变量 --> <!-- <router-link :to="bbb">bbb</router-link> --> 
<!-- 根据对象name跳转 --> （注意:name值是字符串） 
<!-- <router-link :to="{name:'ccc'}">ccc</router-link> --> 
<!-- 根据对象path跳转 -->（注意：必须得加上/ 不然容易错乱） 
<!-- <router-link :to="{path:'/ddd'}">ddd</router-link> --> 
<!-- 带参数的跳转 --> （注意获取参数route 不要写成router） 
<!--<router-link :to="{name:'eee',params:{id:1}}">体育</router-link> --> <router-view></router-view>

基础-路由-`VUE`-ROUTER-重定向
场景: 当希望某个页面被强制中转时可采用redirect 进行路由重定向设置

path: "/bj", 
redirect: "/sh", // 强制跳转上海 component: {    
	template: `<div>体育</div>`
}

基础-路由-`VUE`-ROUTER-编程式导航
场景: 点击的时候路由实现跳转

methods: { 
    goPage() {  // 跳转到新闻页面     	
        this.$router.push({         
            path: "/news"     
        });   
    }}

基础-路由的激活样式
当前路由在导航中是拥有激活class样式的
审查导航元素,可以发现激活样式

<a href="#/bj" class="router-link-exact-active router-link-active">北京</a>

设置激活class样式即可

慢慢敲吧

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue基础4 (简单易上手，适合前后端)

基础-组件-组件通信的几种情况组件嵌套 => 父子组件 => 父组件传递数据给子组件使用 => 组件之间的传值 => 也叫组件之间的通信组件之间的通信根据关系的可以分为： 1. 父子组件通信父组件到子组件子组件到父组件 2.兄弟组件通信 //调用组件<div id="app"> <child-a :msg="msgParent"></child-a> </div>//子组件Vu
复制链接

扫一扫