Web前端最全Day196(1)，前端开发入门

最后

前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

1.使用组件时可以在组件上定义多个属性以及对应数据

2.在组件内部可以使用props数组生命多个定义在组件上的属性名 日后可以在组件中通过{{ 属性名 }} 方式获取组件中属性值

12.3.2 通过在组件上声明【动态数据传递】给组件内部

//1.声明组件模板对象

const login = {

template:‘

欢迎: {{ name }} 年龄:{{ age }}

’,

props:[‘name’,‘age’]

}

//2.注册局部组件

const app = new Vue({

el: “#app”,

data: {

username:“阿昌”,

age:23

},

methods: {},

components:{

login //注册组件

}

});

//3.使用组件

//使用v-bind形式将数据绑定Vue实例中data属性,日后data属性发生变化,组件内部数据跟着变化

12.3.3 prop的单向数据流

单向数据流:所有的 prop 都使得其父子 prop 之间形成了一个**单向下行绑定**：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。

额外的，每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。—【摘自官网】

12.4 组件中定义数据和事件使用

1. 组件中定义属于组件的数据

//声明组件的配置对象

const login ={

template:“

欢迎：{{msg}}

• {{index}}  {{item}}

”,

data(){ //使用data函数的方式定义组件的数据； 在template属性中通过【{{}}插值表达式】直接获取即可

return {

msg:“hello”,

lists:[‘java’,‘c#’,“c”]

}

}

}

2.组件中事件定义

const login ={

template:“

<input type=‘button’ value=‘点我触发组件中的事件’ @click=‘change’>

”,

data(){

return {

name:“阿昌”,

};

},

methods: {

change(){

alert(this.name); //拿到组件内部的数据

alert(“触发事件”);

}

}

}

总结

1.【组件中定义事件和直接在Vue中定义事件基本一致】 直接在组件内部对应的html代码上加入@事件名=函数名方式即可

2.在组件内部使用methods属性用来定义对应的事件函数即可,事件函数中this 指向的是当前组件的实例

12.5 向子组件中传递事件并在子组件中调用该事件

在子组件中调用传递过来的相关事件必须使用 this.$emit('函数名') 方式调用

<login :name=“username” @aaa=“findAll”>

---

13.Vue中路由(VueRouter)

---

13.1 路由

路由:根据请求的路径按照一定的路由规则进行请求的转发从而帮助我们实现统一请求的管理

13.2 作用

用来在vue中实现组件之间的动态切换

13.3 使用路由

1. 引入路由

//vue 路由js

2. 创建组件对象

//声明组件模板

const login ={

template:“

用户登录

”

}

const register={

template:“

用户注册

”

}

3. 定义路由对象的规则

//创建路由对象

const router = new VueRouter({

routes:[ //设置路由对象的规则

//path： 请求路由的路径

//component: 绑定组件（此处绑定后，就不需要在vue实例的components属性下绑定）

{path:‘/login’,component:login},

{path:‘/register’,component:register}

],

});

4. 将路由对象注册到vue实例

const app = new Vue({

el: “#app”,

data: {},

methods: {},

components: {},

router:router //设置路由对象

});

5. 在页面中显示路由的组件

6. 根据连接切换路由

点我注册

点我登录

13.4 router-link使用

作用:用来替换我们在切换路由时使用a标签切换路由

好处:就是可以自动给路由路径加入#不需要手动加入

a标签写法：

点我注册

点我登录

router-link写法：省略了【#】

我要注册

我要登录

总结:

1.router-link 用来替换使用a标签实现路由切换 好处是不需要书写#号直接书写路由路径

2.router-link

to属性： 用来书写路由路径

tag属性:： 用来将router-link渲染成指定的标签

13.5 默认路由

作用:用来在第一次进入界面是显示一个默认的组件

const router = new VueRouter({

routes:[ //配置路由规则

// 因为默认访问的是“/”，使用设置“/”，的component属性，就可以指定默认路由地址

// { path:‘/’,component:login},

//redirect: 用来当访问的是默认路由 “/” 时 跳转到指定的路由展示 【推荐使用】

{path:“/”,redirect:‘/register’},

{path:“/login”,component:login},

{path:“/register”,component:register},

]

});

13.6 路由中参数传递

• 第一种方式传递参数 【传统方式，通过 [?] 的形式】

1. 通过?号形式拼接参数

我要登录

2. 组件中获取参数

const login = {

template:“

用户登录，{{this.KaTeX parse error: Expected 'EOF', got '}' at position 15: route.query.id}̲}，{{this.route.query.name}}

”,

data(){return{}},

methods:{},

created(){

console.log(“【id】==>”+this.$route.query.id+"，【name】==>"+this.$route.query.name);

}

}

---

• 第二种方式传递参数 restful

1. 通过使用路径方式传递参数

：id == {id}

---

我要注册

var router = new VueRouter({

routes:[

{path:‘/register/:id/:name’,component:register} //定义路径中获取对应参数

]

});

2. 组件中获取参数

const register = {

template:“

用户注册，{{this.KaTeX parse error: Expected 'EOF', got '}' at position 16: route.params.id}̲},{{this.route.params.name}}

”,

created(){

console.log(“【id】==>”+this.$route.params.id+"，【name】==>"+this.$route.params.name);

}

};

---

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

将图片保存下来直接上传(img-u8msM3BA-1613657191433)(C:\Users\PePe\AppData\Roaming\Typora\typora-user-images\image-20210218210034936.png)]](https://img-blog.csdnimg.cn/20210218220823323.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjg0NDY5,size_16,color_FFFFFF,t_70)

---

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】