vue json对象转数组_年薪百万之路--第六十七天 Vue入门-CSDN博客

本文是Vue入门教程的第六十七天，主要介绍Vue.js的下载、基本使用，重点讲解MVVM模式、数据绑定（v-model、v-html、{{}}）、条件渲染（v-if、v-show、v-else、v-else-if）以及列表渲染（v-for）。通过实例展示如何在Vue中操作属性、事件和样式，并理解不同渲染指令的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.1 vue.js库的下载

vue.js是目前前端web开发最流行的工具库，由尤雨溪在2014年2月发布的。

另外几个常见的工具库：react.js /angular.js/jQuery

官方网站：

中文：Vue.js

英文：Vue.js

官方文档：https://cn.vuejs.org/v2/guide/

vue.js目前有1.x、2.x和3.x 版本，我们学习2.x版本的。

1.2 vue.js库的基本使用

1. vue的使用要从创建Vue对象开始
   var vm = new Vue();
   
2. 创建vue对象的时候，需要传递参数，是json对象，json对象对象必须至少有两个属性成员
   var vm = new Vue({
         el:"#app",
	 	 data: {
             数据变量:"变量值",
             数据变量:"变量值",
             数据变量:"变量值",
     	 },
   });
   
   el:设置vue可以操作的html内容范围，值一般就是css的id选择器。
   data: 保存vue.js中要显示到html页面的数据。
   
3. vue.js要控制器的内容范围，必须先通过id来设置。
  <div id="app">
      <h1>{
    
    {message}}</h1>
      <p>{
    
    {message}}</p>
  </div>

1.3 vue.js的M-V-VM思想

MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式。

`Model` 指代的就是vue对象的data属性里面的数据。这里的数据要显示到页面中。

`View` 指代的就是vue中数据要显示的HTML页面，在vue中，也称之为“视图模板” 。

`ViewModel ` 指代的是vue.js中我们编写代码时的vm对象了，它是vue.js的核心，负责连接 View 和 Model，保证视图和数据的一致性，所以前面代码中，data里面的数据被显示中p标签中就是vm对象自动完成的。

在浏览器中可以在 console.log通过 vm对象可以直接访问el和data属性,甚至可以访问data里面的数据

console.log(vm.$el)     # #box  vm对象可以控制的范围
console.log(vm.$data);  # vm对象要显示到页面中的数据
console.log(vm.$data.message);  # 访问data里面的数据
console.log(vm.message);# 这个 message就是data里面声明的数据,也可以使用 vm.变量名显示其他数据,message只是举例.

1.4 显示数据

1. 如果要输出data里面的数据作为普通标签的内容，需要使用{