vue | 易学教程

VUE(6)--引入elementUI到项目中

阅读更多关于 VUE(6)--引入elementUI到项目中

1. npm下载方式引入下载命令：npm install element-ui --save main.js中引入： import ElementUI from 'element-ui' //引入脚本文件 import 'element-ui/lib/theme-chalk/index.css' //引入样式 Vue.use(ElementUI); //使用组件 2. cdn形式引入（脚手架搭建项目） index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>vue-cdn</title> <link rel="stylesheet" href="static/elementUI/elementUI.css"> </head> <body> <script src="static/vue/vue.js"></script> <script src="static/elementUI/elementUI.js"></script> <div id="app"></div> <!-- 这里一定要引入vue.js否则会报错，记住本地静态资源要放于static文件夹下

Vue中的slot、slot-scope和v-slot

阅读更多关于 Vue中的slot、slot-scope和v-slot

一.slot 插槽，也就是slot，是组件的一块HTML模板，这块模板显示不显示、以及怎样显示由父组件来决定。值得注意的是：内容要写在父组件中，然后分给需要的子组件，当slot多个时，可以通过name来加以区分，这就是所谓的具名插槽。举个例子父组件： <template> <div> <h3>这是父组件</h3> <son><span>实践slot</span></son> <son> <template slot="myslot"> <div> 实践具名slot </div> </template> </son> </div> </template> 子组件： <template> <div> <h4>这是子组件</h4> <input type="text" placeholder="请输入"> <slot></slot> <slot name="myslot"></slot> </div> </template> 效果：二.slot-scope slot-scope就是作用域插槽。官方叫它作用域插槽，实际上，对比具名插槽，我们可以叫它带数据的插槽。具名插槽在组件的template里面写，作用域插槽要求，在slot上面绑定数据。举个例子父组件： <template> <div class="father"> <h3>这里是父组件</h3> <!--第一次使用

21天完美搞定Vue框架技术（第1天）

阅读更多关于 21天完美搞定Vue框架技术（第1天）

1、Vue本质上是一个构造函数，只能通过new调用 function Vue ( options ) { // 保证了无法直接通过Vue()去调用，只能通过new的方式去创建实例 if ( ! ( this instanceof Vue ) ) { warn ( 'Vue is a constructor and should be called with the `new` keyword' ) ; } this . _init ( options ) ; } return Vue ; 2、Vue有5个原型属性和方法 init方法(内部方法)：initMixin(Vue) 数据相关：stateMixin(Vue) 事件相关：eventsMixin(Vue) 生命周期相关：lifecycleMixin(Vue) 渲染相关：renderMixin(Vue) 3、Vue的静态属性和方法配置方法：Vue.config() 内部工具方法：Vue.util() Vue.set() Vue.delet() Vue.nextTick() Vue.use() Vue.mixin() 扩展子类构造器：Vue.extend() 默认选项：Vue.components,Vue.directive,Vue.filter 4、Vue构造器的默认选项 Vue默认选项会保留在静态的options属性上

vue中的css 动画过渡效果

阅读更多关于 vue中的css 动画过渡效果

https://segmentfault.com/a/1190000018125564 很完善了，重点是两个过程图。 <style> .fade-enter{ opacity: 0; } .fade-enter-active{ transition: opacity 3s; } /* .fade-enter-to{ color: red; } .fade-leave{ color: green; } */ .fade-leave-to{ opacity: 0; } .fade-leave-active{ transition: opacity 3s; } </style> </head> <body>  <div id="root"> <transition name='fade'> <h1 v-show='show'> 最是年少时模样 </h1> </transition> <button @click='change'>切换</button> </div> <script> var vm

Vue实例的生命周期函数

阅读更多关于 Vue实例的生命周期函数

vue实例在某一个时间点会自动执行的函数；共11个，无需放在methods，直接放在实例中即可。（官方文档图）首先实例的事件和生命周期初始化 beforeCreate：实例的事件和生命周期（部分）初始化后； created：实例注入以及相关双向绑定初始化后；以上初始化后，紧接着判断el，template阶段，如果没有template，则将el外层的html当作模板去渲染页面； beforeMount：模板与数据相结合，即将被挂载到页面之前； mounted：页面挂载，即显示内容之后； beforeDestory：当vm.$destory()被调用时，未被销毁前； destoryed：销毁后； beforeUpdate：当数据发生改变还未重新渲染之前； updated：渲染后；来源： https://www.cnblogs.com/lora404/p/12332274.html

Vue中的$Bus使用

阅读更多关于 Vue中的$Bus使用

Vue中的$Bus使用将Bus单独抽离成一个文件 Bus.js import Vue from 'vue'; let Bus = new Vue(); export default Bus; 创建两个兄弟组建 C2.vue <template> <view> <h1>c2</h1> </view> </template> <script> // 引入Bus import Bus from '@/util/Bus'; export default { // 在载入后的生命周期中 mounted () { // 给bug绑定一个log事件,等待兄弟组件出发 Bus.$on('log', content => { // 输出兄弟组件传递的内容 console.log(content) }); } } </script> C1.vue <template> <view> <button @tap="tapBus">c1</button> </view> </template> <script> import Bus from '@/util/Bus'; export default { methods:{ tapBus(){ // 点击按钮触发log事件，传递120过去，会输出到控制台 Bus.$emit('log', 120) } } } </script> index.vue

vue中v-for

阅读更多关于 vue中v-for

在vue中我们只要操作数据，就可以渲染和更新数据，这背后的boss就是diff算法 vue和react的虚拟DOM的Diff算法大致相同，其核心是基于两个简单的假设： 1、俩个相同组件产生类似DOM结构，俩个不同组件产生不同DOM结构 2、同一层级下的一组节点，他们同唯一的id进行区分基于以上这两点假设，使得虚拟DOM的Diff算法的复杂度从O(n^3)降到了O(n)。我们希望可以在B和C之间加一个F，Diff算法默认执行起来是这样的： diff的默认渲染如图有key值得情况下来源： https://www.cnblogs.com/chenyudi/p/12330221.html

docker--部署vue项目

阅读更多关于 docker--部署vue项目

前戏当我们在本地开发了一个vue项目之后，肯定是想部署到服务器上供其他人访问，之前介绍过使用cntos7+nginx部署项目，今天让我们来使用docker来部署我们的前端项目，首先你已经安装好了docker，并熟悉基本的docker命令。部署获取nginx镜像 docker pull nginx 创建 nginx config配置文件在项目根目录下创建文件 default.conf，写入如下内容 server { listen 80; server_name localhost; # 修改为docker服务宿主机的ip location / { root /usr/share/nginx/html; index index.html index.htm; try_files $uri $uri/ /index.html =404; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } } 该配置文件定义了首页的指向为 /usr/share/nginx/html/index.html , 所以我们可以一会把构建出来的index.html文件和相关的静态资源放到 /usr/share/nginx/html 目录下。创建Dockerfile文件

vue自定义组件及传值

阅读更多关于 vue自定义组件及传值

1、使用 Vue.component() 方法注册组件 2、使用 props 属性传递参数 v-for="item in items"：　　遍历 Vue 实例中定义的名为 items 的数组，并创建同等数量的组件 :user="item"：　　将遍历的 item 项绑定到组件中 props 定义的名为 user 属性上；= 号左边的 user 为 props 定义的属性名，右边的为 item in items 中遍历的 item 项的值　　父组件给子组件传参，如果参数不是变量，则定义的属性无需绑定，user="姓名" 　　v-bind: 绑定属性，绑定属性的目的是把属性后面的值变为变量来源： https://www.cnblogs.com/qq254980080/p/10462550.html

[vue]404和路由钩子

阅读更多关于 [vue]404和路由钩子

404和路由钩子 index.js中的export default new Router 下写入 mode: 'history',可以去除链接中的# 新建一个NotFound.vue <template> <div> <h1>404!页面找不到</h1> </div> </template> <script> export default { name: "NotFound" } </script> <style scoped> </style> index.js中导入,写入router import NotFound from '../views/NotFound' { path: '/*', component: NotFound }, 安装axios npm install axios -s 在main.js中导入 import axios from 'axios' import VueAxios from 'vue-axios' Vue.use(VueAxios, axios) Profile.vue <script> export default { props: ['id'], name: "Profile", //进入路由前 beforeRouteEnter: (to, from, next) => { console.log("进入路由前"); next(vm =>

订阅 vue