系列文章目录

提示：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]

３.v-if条件

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

  
       
    ｈａｈａ
    
    hello　world
    
    
     v-if
    
    
    
     v-show

在这里插入图片描述

４.小案例＿”切换壁纸“

三、计算属性

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

编号	标题	发表时间
{ { 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样式和其对应的功能作为独立的整体去看待，无论这个整体放在哪里去使用，它都具有一样的功能和样式，从而实现复用，这种整体化的细想就是组件化。不难看出，组件化设计就是为了增加复用性，灵活性，提高系统设计，从而提高开发效率