本文共 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]

３.v-if条件

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

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

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

三、计算属性

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

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

1、data 中的属性的值是一个数字、字符串、对象、数组等静态值

2、compited 中的属性叫做计算属性，其值是一个匿名函数

3、匿名函数一定要返回一个值，作为这个属性的值

四、侦听器

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

  
   
    
        
    
    
    {   {   message}}  
   
    

用户在文本框中输入年龄

1、如果年龄>=12，span中就显示“12虽已经到了入刑年龄”

2、如果年龄<12岁，span中就显示“还不到入刑年龄”

五、表格的CRUD

六.组件

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

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

• 使用组件

• 案例
  

总结

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

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