Vue简介
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
Vue特点
(1)遵循 MVVM 模式；
(2)编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发；
(3)它本身只关注 UI, 也可以引入其它第三方库开发项目。
Vue使用
方式一：直接CDN引入
<!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- 生产环境版本，优化了尺寸和速度 --> <script src="https://cdn.jsdelivr.net/npm/vue"></script>
方式二：下载和引入
// 开发环境 https://vuejs.org/js/vue.js // 生产环境 https://vuejs.org/js/vue.min.js
方式三：NPM安装
npm install vue
Vue模板
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <h1>Hello {{name}}</h1> </div> </body> <script> var vm = new Vue({ //这个Vue对象用来控制某一个标签里面的数据 el:"#app", //要控制的标签 data:{ name:"BanQ", //定义一个数据，在id为app的标签内部去使用 } }) </script> </html>
代码分析如下：
(1)先看js代码，首先是创建了一个Vue实例；
(2)创建Vue实例的时候，传入了一个对象：{}
{}中的el属性：该属性决定了这个Vue实例挂载到哪一个元素上，很明显，我们这里挂载到了id为app的元素上。
{}中包含了data属性：该属性中通常会存储一些数据，好像上面例子中的name就是直接定义出来的数据
Vue常见的语法格式
Vue模板语法有2大类:
(1)插值语法: 功能:用于解析标签体内容写法:{{xxx}} xxx是js表达式,且可以直接读取到data中的所有属性。
(2)指令语法: 功能:用于解析标签（包括:标签属性、标签体内容、绑定事件.....) . 举例: v-bind : href="xxx” 或 简写为 :href= "xxx" ， xxx同样要js表达式，且可以直接读取到data中的所有属性。 备注:Vue中有很多的指令，且形式都是: v-????，此处我们只是拿v-bind举个例子。
插值语法
<div id="app"> <p>{{ str1 }}</p> <p>{{ str1.split("").reverse().join("") }}</p> <p>{{num+1}}</p> <p>num1和numn2的最大值是：{{ num1>num2 ? num1 : num2 }}</p> </div> <script> var vm = new Vue({ el:"#app", data:{ str1:"hello", num:20, num1:40, num2:80 } }) </script>
指令语法
v-bind控制标签属性
<div id="app"> <a v-bind:href="bd">百度</a> <a :href="tb">淘宝</a> </div> <script> var vm = new Vue({ el:"#app", data:{ bd:"https://www.baidu.com", tb:"https://www.taobao.com" } }) </script>
v-on事件格式
<div id="app"> <p>{{num}}</p> <button v-on:click="num+=1">点我数字增加</button> <button v-on:click="add">点我数字加5</button> <button @click="add2(10)">点我数字加10</button> </div> <script> var vm = new Vue({ el:"#app", data:{ num: 20 }, methods:{ add:function(){ this.num += 5 }, add2(){ this.num += 10 } } }) </script>
定义Vue对象基本格式总结
var vm = new Vue({ el: "要绑定的标签", data: { 变量名1：值1, 变量名2：值2, 变量名3：值3, ... }, methods: { 方法名1: function(){ }, 方法名2: function(){ }, 方法名3: function(){ } } });
data 和 el 的2种写法
1.el有2种写法
(1).new Vue时候配置el属性。
(2).先创建vue实例，随后再通过vm.$mount ( ' #root')指定el的值。
2.data有2种写法
(1).对象式
(2).函数式
3.一个重要的原则; 由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了.
Vue控制类名和style样式(动态控制类名）
<div id="app"> <!--控制标签的类名 :class= 的值可以是 js对象 {类名：布尔值} --> <div class="box" :class="{box1:bool1, box2:bool2}"></div> <!--控制标签的类名 :class= 的值可以是 数组 [类名1，类名2] --> <div class="box" :class="['box3', 'box4']"></div> <!--通过控制bool3位真还是假，来控制这个盒子有还是没有current这个类--> <div class="box" :class=" bool3 ? 'current':'' "></div> <div :style="{fontSize:'40px' }">文字</div> <div :style="{ fontSize:false?'40px' : '50px'}">文字</div> <div :style="[{fontSize:false?'40px' : '50px'},{background:'pink'}]">文字</div> </div> <script> var vm = new Vue({ el:"#app", data:{ bool1:true, bool2:false, bool3:true } }) </script>
v-if和v-show指令
v-if 和v-show都是来控制标签是否显示，但是也有区别，v-show是对样式层面的控制，v-if是对dom节点的控制。
<div id="app"> <!-- v-if指令的作用： 控制标签是否展示，不展示则删除--> <!--<div v-if="bool1">1111111</div>--> <!--<div style="display:none">2222222</div>--> <!--bool1的值为true 第一个盒子被保留，删除第二个盒子， 为false的话，第2个盒子保留，删除第1个盒子--> <!--<div v-if="bool1">11111</div>--> <!--<div v-else>222222</div>--> <!--<div v-if="type=='a'">11111</div>--> <!--<div v-else-if="type=='b'">2222</div>--> <!--<div v-else-if="type=='c'">3333</div>--> <!--<div v-else>4444</div>--> <!--不会删除标签，根据bool1是true还是false决定盒子是显示还是隐藏(在控制display属性的值)--> <div v-show="bool1">v-show的用法</div> </div> <script> var vm = new Vue({ el:"#app", data:{ bool1: false, type: "z" } }) </script>
点击收藏按钮案例：
<!-- <button v-if="!collectStatus" @click="collectStatus=!collectStatus">点击收藏</button> <button v-else @click="collectStatus=!collectStatus">取消收藏</button> --> <button v-show="!collectStatus" @click="collectStatus=!collectStatus">点击收藏</button> <button v-show="collectStatus" @click="collectStatus=!collectStatus">取消收藏</button> <script> var vm = new Vue({ el:".tab_con", data:{ num:1, collectStatus:false } }) </script>
列表和对象的渲染
<div id="app"> <ul> <!--i是列表中的每一个数据--> <li v-for="i in list1">{{ i }}</li> </ul> <ul> <!--i是列表中的每一个数据 j是每一个数据的下标--> <li v-for="(i, j) in list1">{{ i }} {{ j }}</li> </ul> <ul> <!--i是my_obj对象中的值--> <li v-for="i in my_obj">{{i}}</li> </ul> <ul> <!--i是my_obj对象中的值 j是my_obj对象中的键名--> <li v-for="(i, j) in my_obj">{{i}} {{j}}</li> </ul> </div> <script> var vm = new Vue({ el:"#app", data:{ list1: ["javascript", "html", "css", "vue", "react"], my_obj: { name: "javascript", age: 24 } } }) </script>
Vue数据绑定
Vue中有2种数据绑定的方式: 1.单向绑定(v-bind):数据只能从data流向页面； 2.双向绑定(v-model):数据不仅能从data流向页面，还可以从页面流向data。
注意: 1.双向绑定一般都应用在表单类元素上（如: input、 select等)； 2.v-model:value 可以简写为v-model，因为v-model默认收集的就是value值。
表单数据绑定(双向数据绑定)
v-model的值是，vue接收表单元素的值的变量名， 即v1的值就是用户填写的内容 (甚至可以在data中设置v1的值，从而设置表单元素的默认值)
<input type="text" v-model="v1"> <div>{{v1}}</div>
具体代码：
<div id="app"> <input type="text" v-model="txt1"> <!-- v-model表示了用户输入的这个数据--> <p>{{ txt1 }}</p> <select v-model="sel1"> <option value="0">北京</option> <option value="1">上海</option> <option value="2">广州</option> </select> </div> <script> var vm = new Vue({ el:"#app", data:{ //通过改变txt1或者sel1，来使对应的表单元素的v-model的值发生了变化，所以这个表单元素的value就变化了(v-model看成我们之前将的value) txt1: '默认值', sel1: 0 } }) </script>
Vue中的MVVM
什么是MVVM
(1)View层：
视图层，在前端里就是我们常说的DOM层，主要作用是给用户展示各种信息；
(2)Model层：
数据层，数据可能是我们自定定义的数据，或者是从网络请求下来的数据；
(3)ViewModel层：
视图模型层，是View层和Model层沟通的桥梁；一方面它实现了数据绑定（Data Binding），将Model的改变实时反应到View中；另一方面它实现了DOM监听，当DOM发生改变可以对应改变数据（Data）
编辑
以上就是Vue入门第一天的全部内容了。
资料文档地址：前端开发Vue基础篇：Day01初识Vue.pdf
