vue——入门
一、
1 html5,css3,js(es5,es6):写一个一个的页面---》给后端（php，python，go，java）--》后端嵌入模板语法--》后端渲染完---》返回给前端---》在浏览器中看 2 ajax出现--》后台发异步请求，render+ajax混合（bbs项目） 3 单用ajax（加载数据，dom渲染页面）：前后端分离的雏形 4 agular：js框架，前端工程化，前端也是一个工程，一个项目 5 react，vue：当下最火的两个前端框架（vue国人用，react外国人用） 6 移动开发（安卓，ios）+web（web，微信小程序，支付宝小程序）+桌面开发（windows桌面）：前端---》大前端 7 一套代码在各个平台运行（前端）：谷歌flutter（Dart：跟java很像）：ios，安卓，桌面 8 在vue框架的基础上 nui-app ：https://uniapp.dcloud.io/ 一套代码编到10个平台，这不是梦想 9 在不久的将来，前端框架可能一统天下
10 vue的mvvm架构中的组件化开发非常优秀
二、
1 渐进式JavaScript:javascript的框架（jq），写简单的可以使用vue，写复杂的项目也可以使用 2 MVVM：Model-View-ViewModel -model：数据（后端给的，js接收到） -ViewModel：中转 （双向数据绑定：js中变量变了，html中数据也跟着变） -view：视图（html+css） 3 组件化开发，单页面开发 4 版本：1.x 2.x（用的最多） 3.x（beta版本） 5 下载：（可以使用cdn） -开发版本：vue.js :https://vuejs.org/js/vue.js -生产版本：vue.min.js :https://vuejs.org/js/vue.min.js 6 前端开发：webstorm，sublinetext，vscode（python，java，go，前端，免费），pycharm（咱们讲课） 7 快速使用 8 补充：解释型语言，需要解释器，js解释器集成到浏览器中了，console就等同于你在cmd小敲python3进的交互式命令行是一样的 9 nodejs:把chorm的v8引擎（解释器），安装到操作系统之上
三、模板语法
1 插值语法 {{ js变量或js语法}}
2 代码演示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="./js/vue.js"></script> <title>Title</title> </head> <body> <div id="box"> <p>{{name}}</p> <p>{{age}}</p> <p>{{ll}}</p> <p>{{obj}}</p> {{10+20+90}} {{10<20?'是':'否'}} </div> </body> <script> var vm = new Vue({ el: '#box', //在box这个div中可以写vue的语法 data: { name: 'hello world', age: 19, ll: [1, 2, 3], obj: {name: 'lili', age: 19}, s: '<a href="http://www.baidu.com">点我看美女</a>', }, }) </script> </html>
四、指令
1 标签属性为 v-xx的形式，是vue的指令 2 常用指令 v-html：让html渲染成页面 v-text:标签内容显示js变量对应的值 v-show:放一个布尔值，为真，标签就显示，为假标签就不显示 v-if：放一个布尔值，为真，标签就显示，为假标签就不显示 3 v-show 和v-if 区别：v-show标签还在，不显示了，v-if之间操作的dom把标签删除和加入
4 代码演示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="./js/vue.js"></script> <title>Title</title> </head> <body> <div id="box"> <p v-html="s"></p> <h1>v-text</h1> <span v-text="name">我是span标签</span> <span>{{name}}</span> <hr> <h1>v-show</h1> <div v-show="isShow">我是div</div> <hr> <h1>小案例，控件通过按钮控制显示和消失</h1> <button @click="handleClick()">点我</button> <div v-show="isShow">我是div</div> <hr> <h1>v-if</h1> <div v-if="isShow">我是divdivdiv</div> </div> </body> <script> var vm = new Vue({ el: '#box', //在box这个div中可以写vue的语法 data: { name: 'hello world', age: 19, ll: [1, 2, 3], obj: {name: 'lqz', age: 19}, s: '<a href="http://www.baidu.com">点我看美女</a>', isShow: true }, methods: { handleClick() { //this指的是当前vue对象 this.isShow = !this.isShow }, } }) </script> </html>
1 点击事件 给标签（控件）绑定函数，点击执行函数
2 v-on:click 缩写成 @click
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="./js/vue.js"></script> <title>Title</title> </head> <body> <div id="box"> <button v-on:click="handleClick">v-on:点我</button> <!--用的多--> <button @click="handleClick2">@click点我2</button> <!--如果不传参数，没有大的区别--> <button @click="handleClick2()">点我3带括号</button> <!--如果要传参数--> <button @click="handleClick3(100)">点我4带参数</button> <!--传入事件--> <button @click="handleClick5($event)">点我5带事件参数</button> </div> </body> <script> new Vue({ el: '#box', //在box这个div中可以写vue的语法 data: { }, methods: { handleClick(){ console.log('1111') }, handleClick2(){ console.log('22222') }, handleClick3(a,b){ console.log(a) console.log(b) }, handleClick5(ev){ console.log(ev) } } }) </script> </html>
4.3 属性指令
1 给标签属性的value值绑定成js的变量
2 v-bind:class='js变量' 缩写成 :class='js中变量'
3 代码演示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="./js/vue.js"></script> <style> .red { background: red; } .green { background: green; } </style> <title>Title</title> </head> <body> <!--有个按钮，有个div，点击按钮，div变色--> <div id="box"> <!-- <img v-bind:src="url" alt="">--> <img :src="url" alt="" width="60" height="60"> <div :class="red_class">我的个divdiv快乐的div</div> <br> <button @click="handleClick">点我变色</button> <!-- <div :class="change">--> <div :class="isActive?'red':'green'"> 我是一个div </div> </div> </body> <script> new Vue({ el: '#box', //在box这个div中可以写vue的语法 data: { url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608027235253&di=2198abb4a4b3d882d2c588011c108a9f&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F45%2F36%2F14300000491308128107360639165.jpg', change: 'red', isActive: true, }, methods: { handleClick() { // this.change='green' this.isActive = !this.isActive } } }) </script> </html>
1 同v-bind控制sytle和class的显示 :class='js变量、字符串、js数组' :style='js变量、字符串、js数组'
2 代码演示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Style 和 Class</title> <script src="./js/vue.js"></script> <style> .red { color: rgba(255, 104, 104, 0.7); } .font-20 { font-size: 20px; } .be-bold { font-weight: bold; } </style> </head> <body> <div id="box"> <p>我是一个普通的p标签</p> <div :class="class_obj"> <p>我是一个不普通的p标签1</p> </div> <button @click="handleClick">点击放大字体</button> <div :style="style_obj"> <p>我是一个不普通的p标签2</p> </div> </div> </body> <script> let vm = new Vue({ el: '#box', data: { // class_obj: 'red', // 放1个是字符串 class_obj: ['red', 'font-20', 'be-bold'], // 放2个是数组 // class_obj: { red:true, be-bold:false}, // 也可以放对象 // 数组.push() 从尾部添加1个元素 // 数组.pop() 删除最后1个元素 并返回 // 对象的写法 style_obj: { color: 'red', fontSize: '20px' } // style_obj: [{background:'red'}, {fontSize:'20px'}] }, methods: { handleClick(){ this.style_obj['fontSize']='30px' } } }) </script> </html>
终端测试命令(因为功能太多，作者只是写了一部分功能，只有检测到变化后点击才会改变，所以我们需要在终端进行测试或者自己把需要的功能完善)
vm.class_obj.pop()
vm.class_obj.pop()
vm.class_obj.pop()
vm.class_obj.push('be-bold')
vm.class_obj.push('red')
vm.class_obj.push('font-20')
# 样式 <h1>class的三种写法</h1> <div :class="isActive?'red':'green'">class三目写法</div> <p :class="classObj">class对象写法</p> <p :class="classarr">class数组写法</p> # 数据 isActive: true, // classObj:'red', classObj: {red: true, green: false, font: true}, classarr: ['red', 'green'],
# 样式 <h1>style的三种写法</h1> <div style="background:red">style三目写法</div> <div :style="'background:red'">style三目写法</div> <div :style="'background:'+'red'">style三目写法</div> <div :style="'background:'+(isActive?'red':'green')">style三目写法</div> <p :style="styleobj">style对象写法</p> <p :style="styleattr">style数组写法</p> # 数据 isActive: true, styleobj:{background:'yellow',fontSize:'60px'}, styleattr:[{background:'red'},]
2 代码演示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="./js/vue.js"></script> <style> .red { background: red; } .green { background: green; } .font { font-size: 30px; } </style> <title>Title</title> </head> <body> <div id="box"> <h1>class的三种写法</h1> <div :class="isActive?'red':'green'">class三目写法</div> <p :class="classObj">class对象写法</p> <p :class="classarr">class数组写法</p> <h1>style的三种写法</h1> <div style="background:red">style三目写法</div> <div :style="'background:red'">style三目写法</div> <div :style="'background:'+'red'">style三目写法</div> <div :style="'background:'+(isActive?'red':'green')">style三目写法</div> <p :style="styleobj">style对象写法</p> <p :style="styleattr">style数组写法</p> </div> </body> <script> var vm = new Vue({ el: '#box', data: { isActive: true, // classObj:'red', classObj: {red: true, green: false, font: true}, classarr: ['red', 'green'], //把原来的- 改成驼峰 styleobj:{background:'yellow',fontSize:'60px'}, styleattr:[{background:'red'},] }, }) </script> </html>
