Vue介绍
是一个渐进式JavaScript 框架
作用：是动态构建用户界面 ：将后台的数据在前台的界面上动态的显示出
特点
遵循MVVM模式 M：model数据 V：视图 界面 VM：调度者
编码简洁，体积小，运行效率高
它本身只关注UI，可以轻松引入Vue插件或其他第三方库 开发项目
Vue扩展插件
1、Vue-cli ：脚手架 ：下载基于Vue的项目 写好了配置 声明好了依赖
2、axios ：ajax 请求
3、Vue-route ；路由
4、vuex ：状态管理
5、vue-lazyload ：懒加载
6、vue-scroller ：页面滑动相关
7、mint-ui ：基于vue的ui组件（移动端）
8、element-UI ：基于vue的ui组件（PC端）
ps:
vue.js devtools 调试神器
<!DOCTYPE html> <html> <head> <title>My first Vue app</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script> </head> <body> <div id="watch-example"> <p> Ask a yes/no question: <input v-model="question"> </p> <p>{{ answer }}</p> <p><img :src="img" alt=""></p> </div> <script> var watchExampleVM = new Vue({ el: '#watch-example', data: { question: '', answer: 'I cannot give you an answer until you ask a question!', img:'' }, watch: { // 如果 question 发生改变，这个函数就会运行 question: function (newQuestion, oldQuestion) { this.answer = 'Waiting for you to stop typing...' this.debouncedGetAnswer() } }, created: function () { // `_.debounce` 是一个通过 Lodash 限制操作频率的函数。 // 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率 // AJAX 请求直到用户输入完毕才会发出。想要了解更多关于 // `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识， // 请参考：https://lodash.com/docs#debounce this.debouncedGetAnswer = _.debounce(this.getAnswer, 500) }, methods: { getAnswer: function () { if (this.question.indexOf('?') === -1) { this.answer = 'Questions usually contain a question mark. ;-)' return } this.answer = 'Thinking...' var vm = this axios.get('https://yesno.wtf/api') .then(function (response) { console.log(response) vm.answer = _.capitalize(response.data.answer) vm.img = _.capitalize(response.data.image) }) .catch(function (error) { vm.answer = 'Error! Could not reach the API. ' + error }) } } }) </script> </body> </html>
模板语法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue</title> </head> <body> <div id="app"> <!--view 视图--> <input type="text" v-model="username"> <p>hello {{username}}</p> <h2>双大括号表达式</h2> <p>{{msg.toUpperCase()}}</p> <p v-text="msg"></p> <p v-html="msg"></p> <h2>强制数据绑定</h2> <img v-bind:src="img_url"> <img :src="img_url"> <h2>绑定事件监听</h2> <button v-on:click="test1">点我开车</button> <button @click="test2(msg)">点我开车</button> </div> <script type="text/javascript" src="./js/vue.js"></script> <script type="text/javascript"> const VM = new Vue({ //配置对象 el: '#app', //element :选择器 data: { // 数据 model username: 'mogu', msg: '<a href="https://www.cnblogs.com/nixindecat">I am come back</a>', img_url: 'https://i1.hdslb.com/bfs/face/85b49d96bd506c84831eca97c35534cfb696b578.jpg@68w_68h.webp' }, methods: { test1() { alert('我在测试！') }, test2(func) { alert(func) } } }) </script> </body> </html>
class与style的绑定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .acss { color: red; } .bcss { color: blue; } .ccss { font-size: 20px; } </style> </head> <body> <div id="app"> <h2>class的绑定</h2> <p class="ccss" :class="A">xxx字符串测试</p> <p :class="{acss:a,bcss:b}">xxx对象测试</p> <p :class="['acss','ccss']">xxx数组测试</p> <h2>style的绑定</h2> <p :style="{color : active,fontSize:fontsize +'px'}">style的绑定</p> <button @click="update">update</button> </div> </body> <script type="text/javascript" src="./js/vue.js"></script> <script type="text/javascript"> new Vue({ el: '#app', data: { A: 'acss', a: true, b: false, active:'red', fontsize:20 }, methods: { update() { this.A = 'bcss'; this.a = false; this.b = true; this.active = 'green'; this.fontsize = 30 } } }) </script> </html>
计算属性和监视
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue</title> </head> <body> <div id="app"> <!--view 视图--> 姓：<input type="text" placeholder="First name" v-model="First_name"><br> 名：<input type="text" placeholder="Last name" v-model="Last_name"><br> 姓名1（单向）：<input type="text" placeholder="Full name1" v-model="fullname1"><br> 姓名2（单向）：<input type="text" placeholder="Full name2" v-model="fullname2"><br> 姓名3（双向）：<input type="text" placeholder="Full name3" v-model="fullname3"><br> <p>{{fullname1}}</p> <p>{{fullname1}}</p> <p>{{fullname1}}</p> </div> <script type="text/javascript" src="./js/vue.js"></script> <script type="text/javascript"> const VM = new Vue({ //配置对象 el: '#app', //element :选择器 data: { // 数据 model First_name: 'A', Last_name: 'B', fullname2: 'A B' }, computed: { //计算属性 fullname1() { console.log('fullname()'); return this.First_name + ' ' + this.Last_name }, fullname3: { get() { return this.First_name + ' ' + this.Last_name }, set(val) { const names = val.split(' '); this.First_name = names[0]; this.Last_name = names[1] } } }, watch:{ //监听 First_name:function (val) { this.fullname2=val+' '+this.Last_name } } }); VM.$watch('Last_name',function (val) { //监听 this.fullname2=this.First_name+' '+val }) </script> </body> </html>
条件渲染
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="demo"> <!--条件渲染指令--> <p v-if="ok">successful</p> <p v-else>failed</p> <p v-show="ok">表白成功</p> <p v-show="!ok">表白很成功</p> <button @click="ok=!ok">切换</button> </div> <script type="text/javascript" src="./js/vue.js"></script> <script type="text/javascript"> new Vue({ el:'#demo', data:{ ok:true } }) </script> </body> </html>
列表渲染
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> </style> </head> <body> <div id="demo"> <h2>遍历数组v-for</h2> <table border="1px"> <thead> <tr> <th>id</th> <th>姓名</th> <th>年龄</th> <th>信息</th> <th>操作</th> </tr> </thead> <tr v-for="(p,index) in persons"> <td> {{index}} </td> <td> {{p.name}} </td> <td> {{p.age}} </td> <td> {{p.text}} </td> <td> <button @click="del(index)">删除</button> <button @click="update(index,{name:'cat',age:33,text:'妈妈喊你回家吃饭'})">更新</button> </td> </tr> </table> <h2>遍历对象v-for</h2> <ul> <li v-for="(v,k) in persons[1]"> {{k}} : {{v}} </li> </ul> <h2>列表渲染—过滤+排序</h2> <label> <input type="text" v-model="searchName"> </label> <table border="1px"> <thead> <tr> <th>id</th> <th>姓名</th> <th>年龄</th> <th>信息</th> <th>操作</th> </tr> </thead> <tr v-for="(p,index) in filterPersons" > <td> {{index}} </td> <td> {{p.name}} </td> <td> {{p.age}} </td> <td> {{p.text}} </td> <td> <button @click="del(index)">删除</button> <button @click="update(index,{name:'cat',age:33,text:'妈妈喊你回家吃饭'})">更新</button> </td> </tr> </table> <br> <button @click="setorder(1)">年龄升序</button> <button @click="setorder(2)">年龄降序</button> <button @click="setorder(0)">恢复顺序</button> </div> <script type="text/javascript" src="./js/vue.js"></script> <script type="text/javascript"> new Vue({ el: '#demo', data: { orderType:0, //0代表原本，1代表升序，2代表降序 searchName:'', persons: [ {name: '张三', age: 18, text: '道路千万条'}, {name: '李三', age: 25, text: '安全第一条'}, {name: '王五', age: 48, text: '行车不规范'}, {name: '赵五', age: 37, text: '回家跪衣板'}, {name: '董璇五', age: 16, text: '片场领盒饭'}, ] }, computed:{ filterPersons(){ const {searchName, persons,orderType} = this let fpersons; fpersons = persons.filter(p => p.name.indexOf(searchName)!==-1) if(orderType!==0){ fpersons.sort(function (p1,p2) { //如果返回负数，p1在前，正数p2在前 if(orderType===2){ return p2.age - p1.age }else { return p1.age - p2.age } }) } return fpersons } }, methods: { del(index) { this.persons.splice(index, 1) }, update(index, newdata) { this.persons.splice(index, 1, newdata) }, setorder(id){ this.orderType = id } } }) </script> </body> </html>
事件处理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <h1>绑定监听</h1> <button @click="test1">test1</button> <button @click="test2('login')">test2</button> <button @click="test3()">test3</button> <button @click="test4('mogu',$event)">test4</button> <h1>事件修饰符</h1> <div> <div>@click.stop<p>停止事件冒泡</p></div> <div style="height: 160px;background-color: red; 300px;" @click="test5"> <div style="background-color: #3c763d;height: 80px; 150px" @click.stop="test6"></div> </div> </div> <div><a href="https://www.baidu.com" @click.prevent="test7">百度揍你</a> <p>@click.prevent</p>阻止事件的默认行为 </div> <h1>按键修饰符</h1> <input type="text" @keyup.enter="test8"> </div> <script type="text/javascript" src="./js/vue.js"></script> <script type="text/javascript"> new Vue({ el: '#app', data: { test1() { alert('test1') }, test2(val) { alert(val + ' ' + 'test2') }, test3() { alert(event.target.innerHTML) }, test4(mogu) { alert(mogu + ' ' + event.target.innerHTML) }, test5() { alert('test5') }, test6() { alert('test6') }, test7() { alert('test7') }, test8() { alert(event.target.value + ' ' + event.keyCode) } } }) </script> </body> </html>
过度动画
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .fade-enter-active, .fade-leave-active { transition: opacity 1s; } .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ { opacity: 0; } </style> </head> <body> <div id="demo"> <button v-on:click="show = !show"> Toggle </button> <transition name="fade"> <p v-if="show">hello</p> </transition> </div> <script type="text/javascript" src="./js/vue.js"></script> <script type="text/javascript"> new Vue({ el: '#demo', data: { show: true } }) </script> </body> </html>