Vue的基础知识（一）

一、Vue介绍

vue：渐进式JavaScript框架

vue的特点：易用，熟悉HTML、CSS、JavaScript可以快速上手。

                    灵活，在一个库和一套完整的框架之间自如伸缩。

                    高效：20KB运行大小，超快虚拟DOM。

vue的优势：数据驱动 组件化

vue的基本使用步骤：

1、需要提供标签用于填充数据

2、引入vue.js库文件

3、使用vue的语法做功能

(官网去安装那块复制即可)

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

实例参数分析

el：元素的挂载位置（值可以是css选择器或DOM元素）

data：模型数据（值是一个对象，可以存放任意数据类型）

插值表达式-------{ {msg}}

将数据填充到HTML标签中，支持基本的计算。

二、Vue的内置指令

vue的指令

v-text	解决插值表达式的闪动问题 解析内容，但是不能解析标签 （填充纯文本）
v-html	存在安全问题，本网站内部的数据可以使用，来自第三方的数据不可用。解析标签，解析内容 。（填充HTML片段）
v-if	显示元素，如果为false则直接移除元素
v-show	显示元素，如果为false则使用属性display:none 来设置 使用场景：频繁切换
v-for	用来循环遍历数据，包含数组和对象
v-bind	绑定属性，支持自定义属性 简写为冒号 :href='url'   data:{         url:'http://ww.baidu.com' }
v-on	绑定方法 ，方法名需要在methods中定义 简写为@ @click ='num'
v-model	用于双向数据绑定，只能用于表单元素
v-once	显示内容后不再具有响应功能。 特点：只编译一次
v-cloak	解决插值表达式的闪动问题 原理：先隐藏，替换好之后再显示最终的值 用法：1、提供样式           [v-cloak]{                 display:none;           }            2、在插值表达式所在的标签中添加v-cloak指令
v-pre	显示原始信息跳过编译过程，即直接显示（{ {msg}}） 特点：填充原始信息

 

注意：1、如果页面中绑定事件也就是通过@绑定，那么此时需要调用data中的数据时，必须要添加this，此时的this指的的是实例对象 。

           2、radio:需要出现互斥情况，那么需要通过value绑定属性值，此时v-model会通过value值找到对应的属性进行绑定

性别:<input type="radio"  v-model='sex' value="男">男
<input type="radio"  v-model='sex' value="女">女

           3、checkbox中实现下拉菜单的多选，需要在<select>标签中添加multiple。

               对于checkbox来讲，默认的初始值类型为数组，如果是其他数据类型，则会直接转换为布尔类型。

 <!-- multiple   实现下拉菜单的多选 -->
         <select multiple  v-model='hobby1'>
            <option value="" disabled>请选择</option>
             <op