文档章节

【可视化】Vue基础

达达前端
 达达前端
发布于 2019/12/15 19:40
字数 1126
阅读 12
收藏 0

file

作者 | Jeskson

来源 | 达达前端小酒馆

Vue简介

Vue框架,框架的作者,尤雨溪,组件化,快速开发的特点。 生命周期 beforeCreate:组件刚刚被创建 created:组件创建完成 生成

beforeMount:挂载之前 mounted:挂载之后 成熟

beforeDestory:组件销毁前调用 destoryed:组件销毁后调用 老年

安装:

全局安装:vue-cli

npm install --global vue-cli

创建一个基于webpack模板的新项目

vue init webpack my-project

安装依赖包:

cd my-project
npm install
npm run dev

@代表src目录:

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'

Vue.use(Router)

export default new Router({
 routes: [
 {
  path: '/',
  name: 'hello',
  component: Hello
 }
 ]
})

生命周期调用:

beforeCreate

created

beforeMount

mounted

实例生命周期钩子

比如 created 钩子

new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
  }
})
// => "a is: 1"

生命周期钩子的 this 上下文指向调用它的 Vue 实例。

生命周期图示

file

file

file

file

file

选项数据:data,computed,methods

全局组件的变量的定义:

<template>
<div>
<div>{{msg}}</div>
</div>
</template>

<script>
export default{
data(){
return{
msg:'hello',
a: 1,
}
}
}
</script>
computed: {
 // 里面函数
 msg() {
  return this.a * 2;
 }
}

@click="say('hi')"

methods: {
 say(){
 }
}

模板语法

data,模板中直接嵌入js代码,指令,v-html,v-on,v-bind等,计算属性,过滤器。

<div>{{number+1}}</div>
v-on:click=""

简写

@click
{{msg.split('').reverse().join('')}}

this.msg.split('').reverse().join('');

class与style绑定

<div class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }">
class1
</div>

data(){
return{
isActive: true,
hasError: false
}
}
<div class="active text-danger">
</div>
<div v-bind:style="{color: activeColor, fontSize: fontSize+'px'}">

原始的写法:

<div style="color: red; fontSize: 12px">
dada
</div>
<div v-bind:style="{ 'color': activeColor, 'fontSize': fontSize + 'px' }">
style
</div>
<div v-bind:style="styleObject">style2</div>
<div v-bind:style=[baseStyles, overridingStyles]">
style3
</div>

条件渲染

v-if指令

v-if v-else

v-if v-else-if v-else

<h1 v-if="ok">dada</h1>

<script>
 export default{
 data(){
  ok: true
 }
 }
</script>
<div v-if="type==='A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type==='C'">
C
</div>
<div v-else>
D
</div>

v-show和v-if意思一致

列表渲染

v-for指令

v-for="item in items" 数组

v-for="(item, index) in items" 数组

v-for="(value,key) in object" 对象

<ul id="">
 <li v-for="(item, index) in items">
  {{index}}-{{item.message}}
 </li>
</ul>
<li v-for="item in items">
{{item.message}}
</li>
<div id="">
 <li v-for="(value, key) in obj">
  {{key}}-{{value}}
 </li>
</div>

事件处理器

v-on指令,缩写@

v-on:click 或 @click

<button v-on:click="counter+=1"></button>
<p>{{counter}}</p>

自定义组件

组件写在components文件夹下,组件基本要素,props,$emit等,通过import导入自定义的组件。

<script>
import countdown from '@/components/countdown.vue'
export default{
data(){
 return{
 }
},
components:{
}
}
</script>
<template>
<p>{{time}}</p>
</template>

<script>
export default{
data(){
return {
 time: 10
}
},
mounted(){
var vm = this;
var t = setInterval(function(){
vm.time--;
if(vm.time==0){
clearInterval(t);
vm.$emit("end");
}
},1000)
}}
</script>

Vue中的Dom操作

<div ref="head"></div>
this.$refs.head.innerHTML = ‘dada’;

过渡效果

过渡transition

样式方式写过渡

<button v-on:click="show = !show">
dada
</button>
<transition name="dada">
<p v-if="show">dada</p>
</transition>

路由vue-router router-link

npm install 引入vue-router包

<router-link to="/demo">dada</router-link>
<router-link :to="{name: 'demo', params: {userId: 123}}>
da
</router-link>
<router-link :to="{name:'demo',params:{userId:123},
query: { plan: 'pri'}}">da< /router-link>
toUrl(){
 this.$router.push({path: 'dada' })
}

状态管理

npm install 引入 vuex包 全局的状态管理,所有页面共享数据

设置数据: this.$store.dispatch("dada", 1222);

获取数据: this.$store.state.num

export default new Vuex.Store({
 state: {
 count: 0,
 num: 1
 },
 mutations: {
  increment(state,num){
   state.count++
   state.num = num
  }
 },
 actions: {
  inc ({commit}, obj){
   commit('increment',obj)
  }
 }
})
this.$store.dispatch('inc', 111);

slot插槽

常用语组件调用

import slots from '@/components/slot.vue'
<template>
<div>
 <slots>
 da
 </slots>
</div>
</template>

vue-resource请求

npm install 引入 vue-resource包

this.$http.get('/daurl')

this.$http.post('/daurl', {foo:'bar'})

this.$http.get('/dadaurl').then(response => {
 console.log(response.body);
}, response => {
 // error
});
}
}
this.$http.post('/daurl', {foo: 'bar'}).then(response => {
 console.log(response.body);
},response => {
 // error callback
});

移动组件库mint UI

地址: http://mint-ui.github.io/docs/#/zh-cn

❤️ 不要忘记留下你学习的脚印 [点赞 + 收藏 + 评论]

作者Info:

【作者】:Jeskson 【原创公众号】:达达前端小酒馆。 【福利】:公众号回复 “资料” 送自学资料大礼包(进群分享,想要啥就说哈,看我有没有)! 【转载说明】:转载请说明出处,谢谢合作!~

大前端开发,定位前端开发技术栈博客,PHP后台知识点,web全栈技术领域,数据结构与算法、网络原理等通俗易懂的呈现给小伙伴。谢谢支持,承蒙厚爱!!!


若本号内容有做得不到位的地方(比如:涉及版权或其他问题),请及时联系我们进行整改即可,会在第一时间进行处理。


请点赞!因为你们的赞同/鼓励是我写作的最大动力!

欢迎关注达达的CSDN!

这是一个有质量,有态度的博客

前端技术栈

© 著作权归作者所有

达达前端
粉丝 4
博文 226
码字总数 368531
作品 0
广州
程序员
私信 提问
加载中

评论(0)

高手问答第 177 期 —— iView 作者带来的 Vue.js 实战分享

OSCHINA 本期高手问答(11 月 15 日 - 11 月 21 日)我们请来了@aresn 为大家解答关于 Vue.js 实战方面的问题。 梁灏,网名 Aresn,基于 Vue.js 的高质量开源 UI 组件库 iView 的作者。目前在大...

局长
2017/11/14
6.3K
36
📊 搭建基于 Cube.js 的 Vue Dashboard

Cube.js Cube.js - 一个完整的开源数据分析解决方案:提供高性能的大规模数据集分析技术基础架构,同时提供前端友好的API,用于构建仪表盘报表以及其他数据分析应用,它扮演了前端与后端之间...

小蘿蔔丁
2019/07/28
0
0
使用 Jest 进行 Vue 单元测试

本文介绍: 1、vue-cli3下jest环境的搭建 2、vue组件基本的测试方法 环境配置 vue-cli3 的插件使安装流程变得格外简单,通过 vue ui 启动可视化管理系统,在插件栏,点击 ‘添加插件’,搜索...

2019/08/12
0
0
iClient-JavaScript 10.0 发布,专业 WebGIS 能力的积木式搭建

SuperMap iClient JavaScript 10i 版本发布,具体新特性有: 积木式搭建应用:SuperMap iClient Vue 组件库 SuperMap iClient Vue 组件库在架构设计上采用 MVVM 模式(Model-View-ViewModel)...

ahnan
2019/11/28
1.6K
7
2019 前端面试 | Vue.js 专题

前端一万小时” 所有,欢迎转载! 转载请注明出处,未经同意,不可修改文章内容。复制代码 🚀本文为“语雀”私有库「前端一万小时」现有文章目录及对应面试题索引, 含未公开发布和写作中的...

itsOli
2019/06/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Gartner 容器报告:阿里云和 AWS 并列第一 | 云原生生态周报 Vol. 44

作者 | 王思宇、陈洁 业界要闻 Gartner 容器报告:阿里云与 AWS 并列第一,领先微软、谷歌 近日,国际知名调研机构 Gartner 发布 2020 年容器公有云竞争格局报告,阿里云再度成为国内唯一入选...

阿里巴巴云原生
25分钟前
23
0
Zookeeper如何保证数据一致性

ZooKeeper保证数据一致性用的是ZAB协议。通过这个协议来进行ZooKeeper集群间的数据同步,保证数据的一致性。 两阶段提交+过半写机制: ZooKeeper写数据的机制是客户端把写请求发送到leader节...

长臂猿猴
27分钟前
23
0
MacOS上的这些隐藏小技巧,一旦掌握,爱不释手!

你知道吗?macOS上拥有大量隐藏技巧,只要你精心研究就会发现很多却又却鲜为人知的提示和技巧,一旦掌握,爱不释手。今天macdown小编就给大家介绍几个MacOS技巧,比较适合刚拥有Mac或者对Mac...

mac小叮当
28分钟前
25
0
AMQP(Advanced Message Queuing Protocol,高级消息队列协议)

https://blog.csdn.net/weixin_37641832/article/details/83270778

Java搬砖工程师
30分钟前
23
0
如何有效地计算JavaScript中对象的键/属性数量?

问题: What's the fastest way to count the number of keys/properties of an object? 计算对象的键/属性数的最快方法是什么? It it possible to do this without iterating over the obj......

javail
30分钟前
26
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部