• 第四阶段:Vue框架 day74 Vue--Vue项目


    昨日内容复习

    """
    1、可以用来复用的子组件,数据data需要做局部化处理,当组件被复用时,数据会相互独立
    	let tag = {
    		template: '...',
    		data() {
    			return {
    				...
    			}
    		}
    	}
    
    2、将父组件的数据传递给子组件,在渲染子组件标签时,给自定义属性设置父级数据,在子级内部用自定义属性拿父级数据
    	let tag = {
    		template: '<div>{{ msg }}</div>',
    		props: ['msg']
    	}
    	new Vue({
    		template: '<div><tag :msg="msg"></tag></div>',
    		components: {
    			tag,
    		},
    		data: {
    			msg: '123'
    		}
    	})
    
    3、将子组件的数据传递给父组件,子组件需要主动触发$emit自定义事件携带出数据,父级实现自定义事件方法,就可以接收到子级数据
    	let tag = {
    		template: '<div @click="fn">{{ msg }}</div>',
    		data() {
    			return {
    				msg: '123'
    			}
    		},
    		methods: {
    			fn() {
    				this.$emit('func', this.msg)
    			}
    		}
    	}
    	new Vue({
    		template: '<div><tag @func="f"></tag></div>',
    		components: {
    			tag,
    		},
    		methods: {
    			f(msg) {
    				console.log(msg)
    			}
    		}
    	})
    
    4、搭建vue环境需要依赖node环境,以及用npm包管理器安装vue脚手架cli(npm可以换源为cnpm)
    5、通过 vue create 项目 来创建前台项目,选择配置好项目所需的依赖
    6、用pycharm来配置vue项目启动
    7、属性vue项目目录结构,以及基本的各种原理:项目入口从main.js开始
    """
    

    今日知识点总结

    """
    1、箭头函数 let fn = (a, b) => a + b;
    2、函数原型:给函数设置原型 Fn.prototype.变量 = 值,那么Fn new出来的对象都可以共用 原型变量
    3、vue项目的请求生命周期:main.js完成环境的加载与根组件的渲染;router的index.js完成路由映射
    4、<router-view />标签作为路由映射的页面组件占位符
    5、<router-link></router-link>来完成路由的跳转
    6、this.$router来完成路由的跳转:push() | go()
    7、this.$route来完成路由的传参
    """
    

    今日作业

    A作业(必做)

    """
    1、按照上方 知识点总结 模块,总结今天所学知识点;
    2、
    Home.vue页面组件显示基本信息:欢迎来到汽车系统
    Car.vue页面组件,完成Cars的列表数据渲染
    Nav.vue小组件,完成Home与Car页面的导航跳转
    
    3、
    CarDetail页面组件,完成某一个汽车详细信息的渲染
    (Car页面点击具体的car进入详情页,把点击的car的主键传入到详情页)
    """
    

    B作业(选做)

    """
    1、完成前后台交互
    i)建立Django框架的后台,将汽车数据放在后台;
    ii)在前台项目目录下的终端,安装axios插件:cnpm install axios
    iii)在main.js中配置axios:
    	import axios from 'axios'
    	Vue.prototype.$axios = axios
    iv)在vue组件文件的任何逻辑中(建议在 created 钩子方法中),请求后台数据
    	this.$axios({
    		method: "get",
    		params: {
    			请求提交给后台的参数
    		}
    	}).then(response => {
    		response请求成功的响应
    	}).catch(error => {
    		error请求失败的响应
    	})
    
    """
    
  • 相关阅读:
    linux杂记
    mysql 备份命令
    查看mysql 套接字文件 mysql.sock
    处理下载是文件名乱码正确姿势
    对象创建完成后进行数据同步
    python——数据库编程
    python——网络编程2
    python——网络编程
    python——12、面向对象
    pythoning——11、正则匹配
  • 原文地址:https://www.cnblogs.com/foreversun92/p/11860965.html
Copyright © 2020-2023  润新知