作者 | 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 实例。

生命周期图示

选项数据: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!

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

【可视化】Vue基础的更多相关文章

  1. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch

    回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...

  2. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十九║Vue基础: 样式动态绑定+生命周期

    回顾 哈喽大家好,前后端分离系列文章又开始了,今天周一,还是感谢大家花时间来观看我写的博客,周末呢,没有写文章,但是也没有闲着,主要是研究了下遗留问题,看过之前文章的应该知道,之前的在AOP使用Red ...

  3. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十║Vue基础终篇:传值+组件+项目说明

    缘起 新的一天又开始啦,大家也应该看到我的标题了,是滴,Vue基础基本就到这里了,咱们回头看看这一路,如果你都看了,并且都会写了,那么现在你就可以自己写一个Demo了,如果再了解一点路由,ajax请求 ...

  4. python 全栈开发,Day89(sorted面试题,Pycharm配置支持vue语法,Vue基础语法,小清单练习)

    一.sorted面试题 面试题: [11, 33, 4, 2, 11, 4, 9, 2] 去重并保持原来的顺序 答案1: list1 = [11, 33, 4, 2, 11, 4, 9, 2] ret ...

  5. Vue 基础精讲

    Vue 基础精讲 Vue 官方文档:https://cn.vuejs.org/v2/guide/ VUE 实例 每个组件都是一个 vue 的实例. 一个 vue 项目是由实例组成的. vue 实例上有 ...

  6. Vue基础以及指令

    Vue 基础篇一   一.Vue框架介绍 之前大家学过HTML,CSS,JS,JQuery,Bootstrap,现在我们要学一个新的框架Vue~ Vue是一个构建数据驱动的web界面的渐进式框架. 目 ...

  7. 2-5 vue基础语法

    一.vue基础语法 语法: {{msg}} html赋值: v-html="" 绑定属性: v-bind:id="" 使用表达式: {{ok? "ye ...

  8. 科学计算三维可视化---Mlab基础(数据可视化)

    推文:科学计算三维可视化---TVTK库可视化实例 使用相关函数:科学计算三维可视化---Mlab基础(管线控制函数) 一:mlab.pipeline中标量数据可视化 通过持续实例,来感受mlab对数 ...

  9. 科学计算三维可视化---Mlab基础(鼠标选取交互操作)

    一:鼠标选取介绍 二:选取红色小球分析 相关方法:科学计算三维可视化---Mlab基础(基于Numpy数组的绘图函数) 1.小球场景初始化建立 import numpy as np from maya ...

  10. Vue 1-- ES6 快速入门、vue的基本语法、vue应用示例,vue基础语法

    一.ES6快速入门 let和const let ES6新增了let命令,用于声明变量.其用法类似var,但是声明的变量只在let命令所在的代码块内有效. { let x = 10; var y = 2 ...

随机推荐

  1. 图片与文本基础(html和css)

    图片与文本基础 -----注释添加可以用/**/ 5.1图片 1.gif图片:最大颜色数256,保存时采用无损压缩 2.JPEG图片:可以包含1670万种颜色,保存时采用有损压缩,压缩率小的质量更高. ...

  2. 北京麒麟会GITC

    分享ppt:https://pan.baidu.com/s/1Aerqtbi8VpMiFGhfEMUtPQ http://bj.thegitc.com/#meeting-agenda

  3. OpenGL入门1.1:窗口

    每一个小步骤的源码都放在了Github 的内容为插入注释,可以先跳过 测试GLFW 在我们的test.cpp中加入下面两个头文件 #include <glad/glad.h> #inclu ...

  4. C#学习之委托与事件

    委托 语法:  public  delegate void MyDelegate(); 使用:  1.定义委托----public  delegate void MyDelegate(); 2.注册委 ...

  5. OWIN,Katana,identity整体概述

    在用asp.net identity的时候,发现很多概念不是很懂,特地去查资料了解了一些相关信息,现在做下笔记. 1.OWIN,OWIN是Open Web Server Interface for . ...

  6. 千万级MySQL数据库建立索引,提高性能的秘诀

    实践中如何优化MySQL 实践中,MySQL的优化主要涉及SQL语句及索引的优化.数据表结构的优化.系统配置的优化和硬件的优化四个方面,如下图所示: SQL语句及索引的优化 SQL语句的优化 SQL语 ...

  7. Pytest 测试框架

    一 . Pytest 简介 Pytest是python的一种单元测试框架. 1. pytest 特点 入门简单,文档丰富 支持单元测试,功能测试 支持参数化,重复执行,部分执行,测试跳过 兼容其他测试 ...

  8. Linux链接文件——管理链接文件的命令

    Linux链接文件——管理链接文件的命令 摘要:本文主要学习了在Linux系统中创建链接文件的命令. ln命令 ln命令用于给文件创建链接,是Link的缩写. 基本语法 ln [选项] 源文件 目标文 ...

  9. 教你使用 Swoole-Tracker 秒级定位 PHP 卡死问题

    PHPer 肯定收到过这样的投诉:小菊花一直在转!你们网站怎么这么卡!当我们线上业务遇到这种卡住(阻塞)的情况,大部分 PHPer 会两眼一抹黑,随后想起那句名言:性能瓶颈都在数据库然后把锅甩给DBA ...

  10. 关于BFS+异或(C++)

    今天早上,我们做了场比赛,里面有一个题目是这样的.. 题目大意:        随着马场的繁荣,出现了越来越多的新马种.种族之间的沟通不畅严重影响了马场的和谐.这时,科学家发明了马语翻译机器人,正好可 ...