博客
关于我
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/

你可能感兴趣的文章
MySQL5.6的zip包安装教程
查看>>
mysql5.7 for windows_MySQL 5.7 for Windows 解压缩版配置安装
查看>>
Webpack 基本环境搭建
查看>>
mysql5.7 安装版 表不能输入汉字解决方案
查看>>
MySQL5.7.18主从复制搭建(一主一从)
查看>>
MySQL5.7.19-win64安装启动
查看>>
mysql5.7.19安装图解_mysql5.7.19 winx64解压缩版安装配置教程
查看>>
MySQL5.7.37windows解压版的安装使用
查看>>
mysql5.7免费下载地址
查看>>
mysql5.7命令总结
查看>>
mysql5.7安装
查看>>
mysql5.7性能调优my.ini
查看>>
MySQL5.7新增Performance Schema表
查看>>
Mysql5.7深入学习 1.MySQL 5.7 中的新增功能
查看>>
Webpack 之 basic chunk graph
查看>>
Mysql5.7版本单机版my.cnf配置文件
查看>>
mysql5.7的安装和Navicat的安装
查看>>
mysql5.7示例数据库_Linux MySQL5.7多实例数据库配置
查看>>
Mysql8 数据库安装及主从配置 | Spring Cloud 2
查看>>
mysql8 配置文件配置group 问题 sql语句group不能使用报错解决 mysql8.X版本的my.cnf配置文件 my.cnf文件 能够使用的my.cnf配置文件
查看>>