组价件化开发
组件
- 组件就是一个自定义的html标签，通过组件名作为自定义标签名
组件注册
- 全局组件
- 全局祖册设置在根实例注册之前
Vue.component('组件名',{
/*
选项内容
*/
template: '<div>这是全局祖册的组件</div>'
});
-
选项内容
- template选项
- 设置组件的结构，最终被引入根实例或其他组件中
- 只能有一个根元素
- data选项 必须是一个函数，return返回数据
- template选项
-
局部组件
new Vue ({ ... components: { 'my-con':{ template : '#tmp', data(){ return { title : '标题' } } } } })
组件通信
组件间数据传递叫组件通信
-
父组件传递给子组件
- 通过子组件的props选项接收父组件的传值
- 父子组件间的所以props都是单向下行绑定的
- props属性的命名规则：
- 建议使用camelCase 采用kebab-case进行绑定
<html> <div id="app"> <h1>我是标题</h1> <my-con :title="title" :content="content"></my-con> </div> </html> <script> new Vue({ ... data : { title: '我是标题', content:'我是内容哈哈哈' }, components: { 'my-con':{ template : ` <div> <h2>{{title}}</h2> <p>{{content}}</p> </div>`, props: ['title','content'] } } }); </script> -
子组件传递给父组件
- 通过事件向父组件传值
<html> <div id="app"> <product-item v-for="product in products" :title="product.title" :key="product.id" @count-change="totalCount+=$event"></product-item> </div> </html> <script> Vue.component('product-item',{ props : ['title'], template : ` <div> <span>商品名称：{{title}}</span> <span>商品个数: {{count}}</span> <button @click="countIns">+1</button> </div> `, data(){ return { count:0 } }, methods: { countIns(){ this.$emit('count-change',); this.count++; } } }) new Vue({ el : '#app', data : { products : [ {id:1,title:'苹果1斤'} ], totalCount: 0 } }) </script> -
组件与v-model
- v-model用于组件时，需要通过props与自定义事件实现
-
非父子组件的传值
- 兄弟组件的传值
-
其他的通信方式
- eventBus
- 发送数据的组件触发bus事件，接收的组件给bus注册对应的事件
- 给bus注册对应的事件通过$on()操作
- $root 访问当前组件树的根实例，不建议使用
-
chidren 用于便捷访问父子组件 不建议使用
- $refs 获取设置ref属性的html标签或子组件
- 给子组件设置ref属性，渲染后通过$refs获取子组件实例
组件插槽
- 插槽 slot
- 单个插槽
<body>
<div id="app">
<com-a>
<p>这是第一个组件的内容</p>
</com-a>
</div>
</body>
<script>
Vue.componet('com-a',{
template:`
<div>
<h3>组件的标题</h3>
<slot></slot>
</div>
`
})
</script>
- 可以在插槽中设置默认内容，如果没有传入内容默认就是显示默认内容
- 具名插槽
<body>
<div id="app">
<com-a>
<p slot="header">这是第一个组件的内容</p>
<p slot="footer">我是脚步</p>
</com-a>
</div>
</body>
<script>
Vue.componet('com-a',{
template:`
<div>
<h3>组件的标题</h3>
<slot name="header"></slot>
<slot name="footer"></slot>
</div>
`
})
</script>
内置组件
- 动态组件
- 适用于多个组件频繁切换的处理
- component用于将一个元组件渲染为动态组件，以is属性决定渲染哪个组件
- is属性会每次切换组件时，vue都会创建一个新的组件实例
- keep-live组件
- 用于保留组件状态或避免组件重新渲染
- include可以是数组可以是正则可以是字符串
- exclude属性用于指定哪些组件不会被缓存
- max属性用于设置最大缓存个数
<body> <keep-live :include="/Com[ABC] /"> <component :is="currentCom"></compontent> </keep-live> </body> - 过渡组件
- 用于在vue插入，更新，或者移除DOM时，提供多种不同方式的应用过渡，动画效果
- transition组件
- 条件渲染 v-if
- 条件展示 v-show
- 动态组件
- 组件根节点
- 进入的类名
- v-enter
- v-enter-to
- v-enter-active
- 离开的类名
- v-leave
- v-leave-to
- v-leave-active
- 设置了name的transition组件需要将v-改成name-
- 自定义过渡类名
- transition-group
- 用于给列表统一设置过渡动画
vue Router
- vue router 是vue.js的官方插件，用来快速实现单页应用
单页应用
- 指的是网站的所以功能都在的单个页面中进行呈现
- 具有代表性的有后台管理系统，移动端，小程序等
- 优点：
- 前后端分离，提高了开发效率
- 业务场景切换时，局部更新结构
- 用户体验好，更加接近本地应用
- 缺点：
- 不利于seo
- 初次首屏加载速度比较慢
- 页面复杂度比较高
前端路由
- 前端路由指的是url与内容间的映射关系
- hash方式
- 通过haskchange事件监听hash变化，并进行网页内容更新
- location.hash.replace('#','');
const router = { routes: {}, route(path,callback){ this.routes[path] = callback; }, //初始化路由 init(){ const that = this; window.onhashchange = function(){ const hash = location.hash.replace('#',''); that.routes[hash] && this.routes[hash](); } } }; - history方式
- 采用的是html5提供的新功能实现前端路由
const router = { routes: {}, route(path,callback){ this.routes[path] = callback; }, go(path){ history.pushState(null,null,path){ this.routes[path] && this.routes[path](); } } };
vue router
- 基本使用
- 安装
- 提供了 router-link router-view
- router-link 默认是a标签 可以通过tag设置
- router-view显示路由匹配到的组件
- 命名视图
- 如果导航后，希望同时在同级展示多个视图(组件),这时就需要进行命名视图
- 路由中通过components属性进行设置不同视图的对应组件
- 编程式导航
- router.push()用来导航到一个新的url
- router-link的to属性使用绑定方式也可属性对象结构
- 导航守卫
router.beforeEach((to,from,next)=>{ console.log(to,from); next(); })
vue-cli
- 创建项目 vue create project-demo
- 启动项目 npm run serve
- 目录与文件
- public 预览文件目录
- src
- assets 静态资源目录
- components 项目组件目录
- App.vue 根目录
- main.js 入口文件
- 打包与部署
- 打包
- npm run build 打包
- 部署
- npm i -g serve 静态文件服务器
- 在dist下通过serve直接开启一个服务器
- 打包
