博客
关于我
Vue-详解+案例
阅读量:385 次
发布时间:2019-03-05

本文共 2313 字,大约阅读时间需要 7 分钟。

系列文章目录

提示:vue是什么,声明和渲染,读取data数据,小案例:“切换壁纸”,表格的增删改查,组件


文章目录


前言

大家好! 一起看下Vue.js 吧!


提示:以下是本篇文章正文内容,下面案例可供参考

一、vue是什么?

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。

二、使用步骤

1.声明和渲染

代码如下(第一个vue应用):

    
{ { message }}

{ { age ++ }}

{ { message}}

Vue 应用会将其挂载到一个 DOM 元素上 (对于这个例子是 #app) 然后对其进行完全控制。那个 HTML 是我们的入口,但其余都会发生在新创建的 Vue 实例内部。

在这里插入图片描述

2.读取data数据对象

       
{ { message}}

{ { schoole.name}} { { schoole.mobile}}

  • { { campus[0] }}
  • { { campus[1] }}
  • { { campus[2] }}

在这里插入图片描述

data:数据对象 vue中用到的数据定义在data中 ,data中可以写复杂类型的数据 渲染复杂类型的数据时,遵守js的语法即可 对象的obj.name 数组的[0]


3.v-if条件

例如,v-if 指令可以绑定data的数据来显示:

  

haha

hello world

v-if
v-show

在这里插入图片描述


4.小案例_”切换壁纸“

  

三、计算属性

    
编号 标题 发表时间
{ { item.id}} { { item.title}} { { item.create_time}}

data 中和 compoted 中都叫做属性,也就是说 numbers 和 reversednumbers 都叫做属性

1、data 中的属性的值是一个数字、字符串、对象、数组等静态值
2、compited 中的属性叫做计算属性,其值是一个匿名函数
3、匿名函数一定要返回一个值,作为这个属性的值

在这里插入图片描述


四、侦听器

   虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过watch 选项提供了一个更通用的方法,来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的

vue 中的计算属性是不支持异步操作的,只能计算一些同步的值,但是可以使用 vue-async-computed 插件实现这一点
那为什么不直接使用侦听器呢?

  
{ { message}}

用户在文本框中输入年龄

1、如果年龄>=12,span中就显示“12虽已经到了入刑年龄”
2、如果年龄<12岁,span中就显示“还不到入刑年龄”


五、表格的CRUD

在这里插入图片描述

在这里插入图片描述

六.组件

在注册一个组件的时候,我们始终需要给它一个名字。

Vue.component(‘my-component-name’, { /* … */ })

   确切的说,只要有UI层的展示,就必定有可以组件化的地方。简单来说,组件就是将一段UI样式和其对应的功能作为独立的整体去看待,无论这个整体放在哪里去使用,它都具有一样的功能和样式,从而实现复用,这种整体化的细想就是组件化。不难看出,组件化设计就是为了增加复用性,灵活性,提高系统设计,从而提高开发效率
  • 使用组件
  • 案例
    在这里插入图片描述

在这里插入图片描述

总结

提示:这里对文章进行总结:

例如:以上就是今天的内容,本文仅仅简单介绍了Vue的基本使用,vue提供了大量能使我们快速便捷地处理数据的方法。 原创不易,欢迎回访

转载地址:http://byxg.baihongyu.com/

你可能感兴趣的文章
Mysql InnoDB存储引擎 —— 数据页
查看>>
Mysql InnoDB存储引擎中的checkpoint技术
查看>>
Mysql InnoDB存储引擎中缓冲池Buffer Pool、Redo Log、Bin Log、Undo Log、Channge Buffer
查看>>
MySQL InnoDB引擎的锁机制详解
查看>>
Mysql INNODB引擎行锁的3种算法 Record Lock Next-Key Lock Grap Lock
查看>>
mysql InnoDB数据存储引擎 的B+树索引原理
查看>>
mysql innodb通过使用mvcc来实现可重复读
查看>>
mysql insert update 同时执行_MySQL进阶三板斧(三)看清“触发器 (Trigger)”的真实面目...
查看>>
mysql interval显示条件值_MySQL INTERVAL关键字可以使用哪些不同的单位值?
查看>>
Mysql join原理
查看>>
MySQL Join算法与调优白皮书(二)
查看>>
Mysql order by与limit混用陷阱
查看>>
Mysql order by与limit混用陷阱
查看>>
mysql order by多个字段排序
查看>>
MySQL Order By实现原理分析和Filesort优化
查看>>
mysql problems
查看>>
mysql replace first,MySQL中处理各种重复的一些方法
查看>>
MySQL replace函数替换字符串语句的用法(mysql字符串替换)
查看>>
mysql replace用法
查看>>
Mysql Row_Format 参数讲解
查看>>