zoukankan      html  css  js  c++  java
  • 第四阶段: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请求失败的响应
    	})
    
    """
    
  • 相关阅读:
    基于Networks of Brokers的HA方案
    淘宝开源任务调度框架tbschedule
    java.lang.ClassCastException: org.springframework.web.filter.CharacterEncodingFilter cannot be cast to javax.servlet.Filter
    spring boot1.3.0版本及以上版本profile指定参数无法被打入
    diffuse linux 文件比对工具
    PipedInputStream/PipedOutputStream原理
    应聘华为 16道经典面试题及回答思路
    MySql Host is blocked because of many connection errors; unblock with 'mysqladmin flush-hosts' 解决方法
    查看linux下某端口被哪个进程占用(linux命令)
    Python3判断自身脚本是不是在运行
  • 原文地址:https://www.cnblogs.com/foreversun92/p/11860965.html
Copyright © 2011-2022 走看看