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

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里面的数据作为普通标签的内容，需要使用{{  }}
   用法：
      vue对象的data属性：
          data:{
            name:"小明",
          }
      标签元素：
      		<h1>{{ name }}</h1>
双花括号仅用输出文本内容,如果要输出html代码,则不能使用这个.要使用v-html来输出.

v-html必须在html标签里面作为属性写出来.
________________________
<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div class="app">
        <h1>{{title}}</h1>
        <h3>{{url1}}</h3>
        {{img}}<br>
        <span v-html="img"></span>
    </div>
    <script>
        let vm = new Vue({
            el:".app",
            data:{
                title:"我的vue",
                url1:"我的收获地址",
                img:'<img src="images/shendan.png">',
            }
        })
    </script>
</body>
</html>
__________________
2. 如果要输出data里面的数据作为表单元素的值，需要使用vue.js提供的元素属性v-model
   用法：
      vue对象的data属性：
          data:{
            name:"小明",
          }
      表单元素：
      		<input v-model="name">
      
   使用v-model把data里面的数据显示到表单元素以后，一旦用户修改表单元素的值，则data里面对应数据的值也会随之发生改变，甚至，页面中凡是使用了这个数据都会发生变化。

v-model或者v-html等vue提供的属性，或者 {{}} 都支持js代码。

支持js的运算符-->
    <h1>{{num1+3}}</h1>
三元运算符的语法:
         判断条件 ? 条件为true : 条件为false的结果

        python 三元表达式[三目运算符]的语法:
        a if 条件 else b
     -->
    <h1>num1和num2之间进行比较,最大值:{{ num2>num1?num2:num1 }}</h1>

常用指令

指令 (Directives) 是带有“v-”前缀的特殊属性。每一个指令在vue中都有固定的作用。

在vue中，提供了很多指令，常用的有：v-if、v-model、v-for等等。

指令会在vm对象的data属性的数据发生变化时，会同时改变元素中的其控制的内容或属性。

因为vue的历史版本原因，所以有一部分指令都有两种写法：


vue1.x写法             vue2.x的写法
v-html         ---->   v-html
{{ 普通文本 }}          {{普通文本}}
v-bind:属性名   ---->   :属性
v-on:事件名     ---->   @事件名

2.1 操作属性

<标签名 :标签属性="data属性"></标签名>

密码显隐

<div id="box">
    <a :href="url" target="_blank" rel="external nofollow" >百度</a>
   密码:<input :type="type" v-model="password"><button @click="change">显示密码</button>
</div>

<script>
    var vm =new Vue({
        el: "#box",
        data:{
            url:"http://www.baidu.com",
            type:"password",
            password:""
        },
        methods:{
            change(){
                if(this.type=="password"){
                    this.type='text';
                }else{
                    this.type='password'
                }
            }
        }
    })

操作样式

操作样式，本质就是属性操作，使用冒号：

<h1 :class="值">元素</h1>  值可以是字符串、对象、对象名、数组

标签style样式

格式1：值是json对象，对象写在元素的:style属性中
	 标签元素：
		     <div :style="{color: activeColor, fontSize: fontSize + 'px' }"></div>
	 data数据如下：
         data: {
             activeColor: 'red',
             fontSize: 30
         }
格式2：值是对象变量名，对象在data中进行声明
   标签元素：
   			<div v-bind:style="styleObject"></div>
   data数据如下：
         data: {
            	styleObject: {
             		color: 'red',
             		fontSize: '13px'
			  			}
				 }

格式3：值是数组
  标签元素：
				<div v-bind:style="[style1, style2]"></div>
	data数据如下：
				data: {
                     style1:{
                       color:"red"
                     },
                     style2:{
                       background:"yellow",
                       fontSize: "21px"
                     }
				}

2.2 事件绑定

1. 使用@事件名来进行事件的绑定
   语法：
      <h1 @click="num++">{{num}}</h1>

2. 绑定的事件的事件名，全部都是js的事件名：
   @submit   --->  onsubmit
   @focus    --->  onfocus
   @blur     --->  onblur
   @click    --->  onclick

2.3 条件渲染指令

vue中提供了两个指令可以用于判断是否要显示元素，分别是v-if和v-show。

v-if

标签元素：
      <!-- vue对象最终会把条件的结果变成布尔值 -->
			<h1 v-if="ok">Yes</h1>
  data数据：
  		data:{
      		ok:false    // true则是显示，false是隐藏
      }

v-else

v-else指令来表示 v-if 的“else 块”，v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

标签元素：
			<h1 v-if="ok">Yes</h1>
			<h1 v-else>No</h1>
  data数据：
  		data:{
      		ok:false    // true则是显示，false是隐藏
      }

v-else-if

可以出现多个v-else-if语句，但是v-else-if之前必须有一个v-if开头。后面可以跟着v-else，也可以没有。

标签元素：
			<h1 v-if="num==1">num的值为1</h1>
			<h1 v-else-if="num==2">num的值为2</h1>
		  <h1 v-else>num的值是{{num}}</h1>
  data数据：
  		data:{
      		num:2
      }

v-show

用法和v-if大致一样，区别在于2点：

1. v-show后面不能v-else或者v-else-if

2. v-show隐藏元素时，使用的是display:none来隐藏的，而v-if是直接从HTML文档中移除元素[ DOM操作中的remove ]

标签元素：
			<h1 v-show="ok">Hello!</h1>
  data数据：
  		data:{
      		ok:false    // true则是显示，false是隐藏
      }

列表渲染指令

在vue中，可以通过v-for指令可以将一组数据渲染到页面中，数据可以是数组或者对象。

数据是数组：        
        <ul>
            <!--i是列表的每一个元素-->
            <li v-for="book in book_list">{{book.title}}</li>
        </ul>

        <ul>
            <!--i是列表的每一个元素，j是每个元素的下标-->
            <li v-for="(book, index) in book_list">第{{ index+1}}本图书：{{book.title}}</li>
        </ul>


        <script> 
            var vm1 = new Vue({
                el:"#app",
                data:{
                    book_list:[
                        {"id":1,"title":"图书名称1","price":200},
                        {"id":2,"title":"图书名称2","price":200},
                        {"id":3,"title":"图书名称3","price":200},
                        {"id":4,"title":"图书名称4","price":200},
                    ]
                }
            })
        </script>

数据是对象：
        <ul>
            <!--i是每一个value值-->
            <li v-for="value in book">{{value}}</li>
        </ul>
        <ul>
            <!--i是每一个value值,j是每一个键名-->
            <li v-for="attr, value in book">{{attr}}:{{value}}</li>
        </ul>
        <script>
            var vm1 = new Vue({
                el:"#app",
                data:{
                    book: {
                        // "attr":"value"
                        "id":11,
                        "title":"图书名称1",
                        "price":200
                    },
                },
            })
        </script>

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

继续阅读

vue json对象转数组_分享：vue使用技巧和项目中遇到的问题

vue Mutation 必须是同步函数为什么_为什么vue组件中data必须用函数表达？

mobx中跟新了数据视图没变化_vue视图不更新情况

vue delete删除json数组_复习之基于Vue响应式的更新数据的方法

vue 数据更新不及时_那些Vue开发遇到的坑---响应式系统 VUE·响应式原理那些VUE开发遇到的坑响应式系统

cad2020打印样式放在哪个文件夹_vue中引入elementUI,关于修改默认样式的几点总结...

vue 判断同一数组内的值是否一直_分享一波最新的Vue实战技巧

vue 判断同一数组内的值是否一直_很多人不知道的 Vue 组件的隐藏知识点{{ title }}{{ title }}{{ title }}

vue json对象转数组_vue组件间通信六种方式（完整版）"changeTitle">{{title}}

vue 往对象中添加键值对_浅谈vue模板语法与指令

qiankun 微前端_微前端方案 qiankun（实践及总结）