基于vue的后台管理系统组件开发培训讲解

基于vue的后台管理系统组件开发培训讲解

为什么选用Vue?

Vue组件把模版代码、js代码、css代码放在了一个.vue文件中,通过打包工具最终生成一个js文件,便于代码管理。(这是单一组件的做法,如果想组件复用最好的做法是css样式单独立出来,这样维护组件样式,只需要修改css文件,下图是一个单一页面中组件的组合使用)

组件系统是 Vue.js 另一个重要概念,因为它提供了一种抽象,让我们可以用独立可复用的小组件来构建大型应用。如果我们考虑到这点,几乎任意类型的应用的界面都可以抽象为一个组件树:

与angular.js和react.js的对比:Vue.js 更加灵活,(比起 Angular)更少专制,它能然你按照自己想要的方式构建应用,而非凡事非得 Angular 如此如此。它只不过是一层界面而已,因此你可以拿它作为页面中一个轻量的功能来使用,而不是一个完整的 SPA。(与react类似) 使用了一个虚拟 DOM,提供了响应式的,并且可组合式的视图组件。保持对核心库的专注, 而像路由和全局状态管理这样的关注点则交给附带的库来处理。

v-text:更新元素的 textContent。如果要更新部分的 textContent ,需要使用 {{ Mustache }} 插值。

v-html:更新元素的 innerHTML 。注意:内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译 。如果试图使用 v-html 组合模板,可以重新考虑是否通过使用组件来替代。

v-show:根据表达式之真假值,切换元素的 display CSS 属性。

v-if:根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 ,将提出它的内容作为条件块。v-else和v-else-if与v-if一致。

v-for:基于源数据多次渲染元素或模板块,item是别名。

v-on:绑定事件监听器。

v-bind:被用于绑定 DOM 属性。

v-model:双向绑定。

v-pre:跳过这个元素和它的子元素的编译过程。

v-cloak:这个指令保持在元素上直到关联实例结束编译。

 

el: 数据的根节点,模板的挂载点。

data:数据支持,一般 当前组件渲染所需数据都在data中实现,data必须是一个对象,另一个是computed。

methods:处理数据交互的方法

computed:计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。计算属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算。

props: 可以是数组或对象,用于接收来自父组件的数据。props 可以是简单的数组,或者使用对象作为替代,对象允许配置高级选项,如类型检测、自定义校验和设置默认值。注意:props中的参数如果想用驼峰式写法,在父组件中以分割线分割。

 

watch: 一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象。Vue 实例将会在实例化时调用 $watch(),遍历 watch 对象的每一个属性。

 beforeCreate: 在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。

created: 实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算, watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。

beforeMount: 在挂载开始之前被调用:相关的 render 函数首次被调用。

mounted: el 被新创建的vm.$el 替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm.$el 也在文档内。

activated:keep-alive 组件激活时调用。

……

# 全局安装 vue-cli
$ npm install -g vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖
$ cd my-project
$ npm install
$ npm run dev

①新建入口文件:main.js

import Vue from 'vue'

import List from './components/ch-list'

import Hello from './components/Hello'

new Vue({

  el: '#app',

  components: { List , Hello}

})

本站作品、素材均是用户自行上传分享并拥有版权或使用权,仅供网友学习交流,未经上传用户书面授权,请勿作他用。若您的权利被侵害,请联系我们进行删除。

枣春三月
枣春三月
  • 编号:25259 收藏
  • 格式:PPTX
  • 版权: 共享素材
  • 上传时间:2021-10-20 10:11

作品标签:

相关作品:

TA的其他上传:

基于vue的后台管理系统组件开发培训讲解 工作汇报模板 13套多种关系悬浮微立体ppt图表 《当众讲话的艺术》读书笔记ppt模板

冀ICP备2020030955号-1 冀公网安备 13010802001242号