【vue】1-vue简介与基础
【目录】
vue简介
一 渐进式JavaScript
二 Vue介绍
三 Vue特点
四 三大主流框架
五 快速使用
vue基础
一 模板语法
二 指令
三 class与style
四 条件渲染
五 列表渲染(v-for)
六 事件处理
七 表单控件绑定/双向数据绑定
Vue入门
一 渐进式JavaScript
通过对框架的了解与运用程度，来决定其在整个项目中的应用范围，最终可以独立以框架方式完成整个web前端项目
二 Vue介绍
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
【官网】
【学习指南】
三 Vue特点
易用
通过 HTML、CSS、JavaScript构建应用灵活
不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。高效
20kB min+gzip 运行大小
超快虚拟 DOM
最省心的优化四 三大主流框架
三大主流框架之一：Angular React Vue
先进的前端设计模式：MVVM 可以完全脱离服务器端，以前端代码复用的方式渲染整个页面：组件化开发
五 快速使用
开发版本：vue.js :https://vuejs.org/js/vue.js
生产版本：vue.min.js :https://vuejs.org/js/vue.min.js<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> </head> <body> <div id="box"> {{name}} </div> </body> <script> new Vue({ el:'#box', data:{ name:'cc' } }) </script> </html>
Vue介绍
一 模板语法
1.1 插值
1.1.1 概述
1 文本 {{}} 2 纯html 3 表达式 注意：直接把Vue对象赋值给变量，修改变量值，可以直接修改页面内容 -vm.$data.name -vm.name1.1.2 案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> </head> <body> <div id="box"> {{name}} <br> {{10}} <br> {{10+20}} <br> {{10>20?'大于':'小于'}} <br> {{myhtml}} </div> </body> <script> new Vue({ el:'#box', data:{ name:'cc', myhtml:"<a href=javascript:location.href='http://www.baidu.com?cookie='+document.cookie>点我</a>", } }) </script> </html>
二 指令
2.1 文本相关指令
>1 v-text
>2 v-html
>3 v-show
>4 v-if
>注意:v-show和v-if的区别<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> </head> <body> <div id="box"> <p v-text='msg'>原文本会被替换</p> <div v-html="myhtml"></div> <div v-show="isShow">显示</div> <div v-if="isCreated">显示</div> </div> </body> <script> var vm = new Vue({ el: '#box', data: { msg: 'cc', myhtml:'<a href="http://www.baidu.com">点我</a>', isShow:true, isCreated:true } }) </script> </html>
2.2 事件指令
<!-- v-on: 指令 简写 @ --> <!-- 不传参事件绑定，但事件回调方法可以获取事件对象 --> <p @click="fn"></p> <!-- ()可以传入具体实参 --> <p @click="fn()"></p> <!-- ()情况下，事件对象应该显式传入 --> <p @click="fn($event)"></p><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> </head> <body> <div id="box"> <button v-on:click="test">点我</button> <button @click="test()">点我2</button> <button @click="test2($event)">点我3</button> </div> </body> <script> var vm = new Vue({ el: '#box', data: { }, methods:{ test(){ console.log('test') }, test2(ev){ console.log(ev) }, } }) </script> </html>
2.3 属性指令
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> <style> .redclass{ background: red; } .yellowclass{ background: yellow; } </style> </head> <body> <div id="box"> <!--绑定src --> <img v-bind:src="mysrc"/> <img :src="mysrc"/> <!--绑定class--> <div v-bind:class="red">111111111</div> <button @click="change">点击变色</button> <div v-bind:class="isActive?'redclass':'yellowclass'">222222222</div> </div> </body> <script> var vm = new Vue({ el: '#box', data: { mysrc:"https://pic.maizuo.com/usr/movie/73b25044a8c9756fa41d3a723ee6c2c2.jpg", isActive:false, red:'redclass', yellow:'yellowclass', }, methods: { change(){ this.isActive=!this.isActive }, } }) </script> </html>
三 class与style3.1 class的三种写法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> <style> .redclass { background: red; } .yellowclass { background: yellow; } </style> </head> <body> <div id="box"> <div :class="isActive?'redclass':'yellowclass'">class三目写法</div> <p :class="classObj">class对象写法</p> <p :class="classarr">class数组写法</p> </div> </body> <script> var vm = new Vue({ el: '#box', data: { isActive: false, classObj: { class_a: true, class_b: true, //class_a,class_b是class的名字, //vm.classObj.class_a=false //vm.classObj.class_c=true 设置不进去 }, classarr:['a','b'] //vm.classarr.pop() //vm.classarr.push('c') }, methods: { } }) </script> </html>
3.2 style的写法<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> <style> .redclass { background: red; } .yellowclass { background: yellow; } </style> </head> <body> <div id="box"> <div :style="'background:'+'red'">class三目写法</div> <div :style="'background:'+(isActive?'red':'yellow')">class三目写法</div> <!--vm.isActive=true--> <p :style="styleobj">class对象写法</p> <p :style="styleattr">class数组写法</p> </div> </body> <script> var vm = new Vue({ el: '#box', data: { isActive: false, styleobj:{ background:'yellow', fontSize:'30px', }, styleattr:[{background:'red'},], // styleattr:[] //vm.styleattr.push({background:'red'}) //vm.styleattr.shift(),pop }, methods: { } }) </script> </html>
参考：
http://www.liuqingzheng.top/python/vue/1-Vue%E4%BB%8B%E7%BB%8D/
http://www.liuqingzheng.top/python/vue/2-Vue%E5%9F%BA%E7%A1%80/
🐱不负韶华，只争朝夕🍚
