组件的注册和使用 使用组件开发 好处 ：效率号 可维护性高
组件讲究拆分 将区域与区域之间划分出来 复用性高
1 .全局组件创建
Vue.component('runoob', {
template: '<h1>自定义组件!</h1>'//定义主键
}）
// 可以直接返回html界面
2.局部组件定义
<script>
var Child = {
template: '<h1>自定义组件!</h1>'//给组件定义名称
}
// 创建根实例
new Vue({
el: '#app',
components: {
// <runoob> 将只在父模板可用
'runoob': Child//创建满足条件 runoob 只在child的定义下运行
}
})
</script>
- props是组件间的传值
3 组件传值问题的解决 采用动态的方式解决
<div id="app">
<div>
<input v-model="parentMsg">
<br>
<child v-bind:message="parentMsg"></child>//绑定参数 parentMsg 绑定到message
</div>
</div>
<script>
// 注册
Vue.component('child', {
// 声明 props
props: ['message'],
// 同样也可以在 vm 实例中像 “this.message” 这样使用
template: '<span>{{ message }}</span>'
})
// 创建根实例
new Vue({
el: '#app',
data: {
parentMsg: '父组件内容'
}
})
</script>
分享一种漂亮的写法
<div id="app">/
<ol>
<todo-item v-for="item in site" v-bind:todo="item"></todo-item>
</ol>//这边使用for循环 site 然后todo绑定item 也就是site每一列的值
</div>
<script>
Vue.component('todo-item', {
props: ['todo'],//组件中的值
template: '<li>{{ todo.text }}</li>'//组件会返回的数据
})
new Vue({
el: '#app',
data: {
site: [
{ text: 'Runoob' },
{ text: 'Google' },
{ text: 'Taobao' }
]
}
})
</script>
使用 $on(eventName) 监听事件
使用 $emit(eventName) 触发事件
发现区别
props和data
前者是用来绑定模板中的数据 向父标签中处理响应(接收存在的值) 后者是用来定义和处理值(定义未存在的值)
createds和mountend
created ：是在页面渲染之前发生的 ，如果想要获取数据渲染到html之后元素的宽高 这些事拿不到的。
mounted：是在渲染data里面的数据到页面上之后 发生的 所以这时候去元素的具体信息是可以拿到的
computed:{
//方法区中方法是直接用的缓存数据 （变动的需求不大 最好是数据不常用） 用定死的数据 在渲染时节约内存开销
** 注意 不能和created中的方法同名
}
slot 插槽 变动和组件中的个别数据的（应用范围 在一个组件选中 某个方法要变动其中两个数据 但是 这两个数据和别的数据结合在一块 如果整体去渲染的话 效率会降低 ）
例子
<div id="a">
<todo>//组件标签1
<todo_title slot="todo_title" :title="title"> //标签2 </todo_title>
<todo_items slot="todo_items" v-for="(item,index) in list":items="item"></todo_items> //标签3
</todo>
</div>
<script>
Vue.component("todo",{
template:'<div>\
<slot name="todo_title"></slot>\ 填充插槽
<ul>\
<slot name="todo_items"></slot>\ 填充插槽
</ul>\
</div>\
'
})//模板1设置插槽和大致的组件
Vue.component("todo_title",{
props:['title'],
template:"<div>{{title}}</div>"
})
Vue.component("todo_items",{
props:['items'],
template:"<li>{{items}}</li>"
})//填充主键2
var Vue=new Vue({
el:'#a',
data:{
list:["张三","李四","王麻子"],//数据1
title:"狂神说"//数据2
}
})//填充组件3
</script>
组件就是将模块变更，将以前的之间连接 ，变成组件接收数据 ，props相当于方法中的接收参数（），定义标签连接数据 返回个组件 在组件中渲染完毕后返回
<!--只能绑定当前组件的方法-->
template:"<li>{{items}} <button @click='maven'>删除</button></li>",
//我们在template中的元素是不能触发别的组件中的方法的
解决方法 ：this.$emit
安装node.js 和cnpm 后 创建一个新的项目 用 vue init webpack 名称
启动项目 在项目目录下 npm run dev
export default:{//导出模块
name:"名称"//相当于方法名
data:{}
.....
}
现在开始把vue当做是方法去理解 比较容易
例子
//暴露一个方法的接口 相当于java中的 公有方法
exports.gai=function () {
document.write("<p>你好vue</p>")
}
//调用方法
var hellow= require("./hellow")
hellow.gai()
打包
module.exports={
entry:"./modules/main.js",
output:{
filename:"./js/bundle.js"
}
}
安装vue的跳转jar包 相当于下载文件到lib目录
npm install vue-router --save-dev
解决npm run dev 一直报错的问题
解决 删除node_modules 目录
然后运行 npm install
作用域
<style scoped> //表示只在当前模板下生效
</style>
- npm 安装文件解析
- npm install 名称 //安装项目到模块下
- npm insatll ** -g 全局安装
- npm install ** --save 安装到项目模块下 并且打包到lib目录中 缩写-S 单独安装到lib下用 -D
- 在新建时把没用的东西删除
路由嵌套
children:[
{
path:'/user/profile',
component:profile
},
{
path:'/user/List',
component:List
}
]
- 在index中某个界面直接配置
- 实现动态路由
- 就是在一个界面中访问不同的界面
- 非常适合做界面交互
狂神说的视频vue降的不是很好 准备去重新学一下
vue的写法是首先 我们写一个vue界面
例子
<template>
<div>
我是头部
</div>
</template>
<script>
export default{
data(){
return{
}
},
methods:{
}
}
</script>
<style scoped>
</style>
然后 我们在mian.js中去引入和注册
import Header from '../view/user/List';
import Footer from '../view/user/profile';
import lihao from "../view/user/zhangs"
//注册全局头部、底部组件
Vue.component('headerVue',Header);
Vue.component('footerVue',Footer);
Vue.component('lihaoVue',lihao);
规则最好写在一个统一的地方 index.js
解惑：shiro是来操作路由的 vue也可以用来操作路由 前后端完全分离后 shiro就不能用来操作前端的路由了 那么 vue该用什么办法去配置路由 和shiro怎么继续行使他的权限管理
解决办法是—》在后端返回前端的完整路由 前后分离的弊端 解决】
最终版 ：不搞花哨的东西了 直接在配置信息做写一个类 专门用来存放链接 修改时候就修改链接 这个类的数据需要读取数据库的数据 可以在管理员界面添加一个方法就是 设置权限界面到底该区哪里 连权限也是可以变更的
问题解决了 是我太傻逼了
然后shiro不要配置路由项目 直接在前端工程配置 后端只负责权限管理 不要路由跳转
行 问题解决了 我们现在接着看vue
vue动态组件
方法：keep-alive
第一个小测试
<template>
<div id="app">
<button @click="currentTabComponent ='ac'">点击显示ac</button>
<button @click="currentTabComponent ='bc'">点击显示bc</button>
<keep-alive>
<component v-bind:is="currentTabComponent"></component>
</keep-alive>
</div>
</template>
<script>
import ac from "../src/components/ac"
import bc from "../src/components/bc"
export default {
name: 'App',
data(){
return{
currentTabComponent:ac
}
},
components: {
ac,
bc
},
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
动态组件在切换时，组件中原来的数据会消失 如果我们想保留原来的数据，我们应该在组件中添加缓存的功能，就是我们刚刚上面所说的那个 keep-alive
**注意在一个组件中是能套用另一个组件的 这样的话 我们组件套组件 鬼都不知道我们写的什么 现在来看的话 我们只需要将一个个的界面分解成小组件 然后合并就能得到我们想要的界面了 这是个里程碑
下一个知识点 异步组件
一般来说我们加载组件的过程都是同步的 这样的话 在开发中对一些重要的板块影响很大 我们不想要重要的东西和非必要显示的信息平级 所以我们要设置异步组件
在页面中组件过多的情况下 定义为异步组件
const ac=()=> import('../src/components/ac')
const bc=()=> import('../src/components/bc')
使用异步组件请求时 ，会加载一个.js文件用来存放我们要加载的组件 ，.js文件不会重复加载
在vue中解决跨域问题
- 了解什么是跨域
- 在一个项目中不同的端口号访问另一个端口号会出现一个问题就是端口号不匹配 ，数据不能正常访问到
- 在vue中配置跨域要在config中的index.js下增加
proxyTable: {
'/api': { //使用"/api"代替原有的路径
target: 'https://interface.music.163.com/', //源地址
changeOrigin: true, //改变源
pathRewrite: {
'^/api': '/api' //路径重写
}
}
},
- 修改完以后 我们就能正常访问了
- 安装axios cnpm install axios --save
- 在main.js下引入axios
import axios from 'axios'
Vue.prototype.$http = axios;
- 然后在别的组件就能使用了
- 特别注意 修改完之后要重启项目
- 然后是使用$axios 时 要在前面加上this.
组件传参
//设计思路 在我们使用一个组件的时候 ，
我们想让组件中的数据变得不一样 或者多个组件中的要运行的是同一种东西
那么 我们需要在路由上面动点手脚 在路由控制的index.js 文件下将那个组件的路由加上参数 如：/index/a/{name} //在这个路由下设置一个预留位置 方便参数进入
routes: [
{
name:'ce',
path:'/ce/:id',
component:ce
}
]
//在路径中加上 一个参数名称
<router-link :to="{name:'ce',params:{id:1}}">点击</router-link>
//参数传递的时候记得v-on绑定参数 和 怕传入的参数正确
拿取参数
{{$route.params.id}}
另一种显示方式
routes: [
{
name:'ce',
path:'/ce/:id',
component:ce,
props:true//让他变成true
}
]
})
<template>
<div>
显示信息:{{id}}
</div>
</template>
<script>
export default {
props:['id'],
name: "ce"
}
</script>
<style scoped>
</style>
//可以通过这种方式去读取
调用传值的话 就在调用 和创建components:{xiala,ce}对象后使用如下方法
<ce :id="1"></ce>
非常好用 good
/这样的话 我们就嫩实现完全摆脱原始的文件html
vue中的钩子太多了
beforeRouteEnters钩子只会在直接被引用时触发
如果他在某个组件下 触发这个组件不会触发到他的钩子函数
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
