前端-vue框架介绍
发布时间:2020-12-15 07:55:38 所属栏目:Java 来源:网络整理
导读:目录 vue介绍 vue的使用 引入 挂载点 插值表达式 文本指令 属性指令 事件指令 事件指令传参 表单指令 条件指令 vue介绍 渐进式javascript框架 js是页面脚本语言,用来控制或是辅助页面搭建,js功能的集合体,vue可以更好更强大的去管理页面 1)vue可以控制一
目录
vue介绍渐进式javascript框架 js是页面脚本语言,用来控制或是辅助页面搭建,js功能的集合体,vue可以更好更强大的去管理页面 1)vue可以控制一个页面中的一个标签 2)vue可以控制一个页面 3)vue可以控制整个项目 js要控制页面,需要在页面中script引入js==>vue项目就只有一个页面==>组件化开发 优点: 1.三大前台框架:Angular、React、Vue vue:综合前两个框架的优点(轻量级)、一手文档是中文(上手快)、vue完全开源(免费) 2.单页面web应用 - 服务于移动端 - 客户端只需要问后台索要数据 3.MVVM设计模式 4.数据驱动 - 区别于DOM驱动(DOM加载后才能操作) - 在缓存中根据数据处理dom,再渲染给真实dom 5.虚拟dom - 页面的缓存机制 6.数据的双向绑定 - 页面中变量相同,数据就相同,实时被检测 vue的使用引入# 官网下载vue文件并引入前端页面 <script src="js/vue.js"></script> 挂载点利用new vue实例化对象,通过挂载点与页面建立关联 # 挂载点 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue导入</title> <style> h1 { color: red; } h2 { color: pink; } </style> </head> <body> <div id="app"> <div> <h1>{{ }}</h1> <h2>{{ }}</h2> </div> <div> <h1>{{ }}</h1> <h2>{{ }}</h2> </div> </div> </body> <script src="js/vue.js"></script> <script> // new Vue({ // // 挂载点:vue实例(对象)通过挂载点与页面建立关联 // el: 'h1' // }); // new Vue({ // el: 'h2' // }) new Vue({ // 挂载点只遍历第一个匹配的结果 // html与body标签不可以作为挂载点 // 挂载点的值一般就采用id选择器(唯一性) el: '#app' }) </script> </html> 插值表达式<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <!--插值表达式--> <h1>{{ msg.split('')[0] }}</h1> <h2>{{ info + msg }}</h2> <h3>{{ num * num }}</h3> <h4>{{ num | my_filter }}</h4> <h4>{{ a,b | f1(c,d) | f2 }}</h4> <h4>{{ arr | f3 }}</h4> </div> </body> <script src="js/vue.js"></script> <script> Vue.filter('my_filter',function (v) { console.log(v); return 999 }); Vue.filter('f1',function (a,b,c,d) { console.log(a,d); // return '过滤后的逻辑结果' return a + b + c + d }); Vue.filter('f2',function (v) { console.log(v); return v * v }); Vue.filter('f3',function (v) { let new_arr = []; for (n of v) { if (n >= 60) { new_arr.push(n) } } return new_arr }); new Vue({ el: '#app',// data成员用来为vue控制的变量提供值 data: { msg: 'message',info: '信息',num: 10,a: 1,b: 2,c: 3,d: 4,arr: [23,59,62,97] } }) </script> </html> 文本指令<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文本指令</title> </head> <body> <div id="app"> <!--文本指令: {{ 变量表达式 }} v-text="变量表达式" v-html="html标签可被解析" v-once="限制的变量",内容还是通过上方三者完成渲染 --> <h2 v-text="msg + '!!!'"></h2> <h2 v-text="htm"></h2> <h2 v-html="htm"></h2> <input type="text" v-model="msg"> <h3>{{ msg }}</h3> <!--一次性渲染,插值表达式中的任何一个变量被限制,整个结果就不可变--> <h3 v-once="htm">{{ msg + htm }}</h3> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: '#app',data: { msg: 'message',htm: '<i>标签内容是否被解析</i>' } }) </script> </html> 属性指令<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>属性指令 - 控制样式</title> <style> .div { width: 200px; height: 200px; background-color: red; } .box { width: 200px; height: 200px; } .blue { background-color: blue; } .green { background-color: green; } </style> </head> <body> <div id="app"> <div class="div" style="border-radius: 50%"></div> <!--属性指令:v-bind:属性名="属性值" => v-bind: 可以简写为 : eg: v-bind:style="{color: 'red'}" --> <!--自定义属性:没有太多应用场景--> <div abc="xyz"></div> <div v-bind:abc="xyz"></div> <!--title属性--> <div :title="xyz" class="div" style="border-radius: 50%"></div> <!--style属性--> <!--1)变量:变量的值为字典--> <div :style="my_style"></div> <!--2)字典中的多个变量--> <div :style="{width: w,height: h,background: b}"></div> <!--class属性--> <!--<div class="box blue"></div>--> <div :class="c"></div> <div :class="[c1,c2]"></div> <div :class="[c1,'blue']"></div> <!--x为类名,是否生效有变量y(true|false)值决定--> <div :class="{x: y}"></div> <div :class="[{'box': true},c2]"></div> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: '#app',data: { xyz: 'ABC',my_style: { width: '100px',height: '100px','background-color': 'cyan',borderRadius: '50%' },w: '50px',h: '50px',b: 'red',c: 'box blue',c1: 'box',c2: 'green',y: true,} }) </script> </html> 事件指令<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>事件指令</title> <style> .div { width: 200px; height: 200px; background-color: red; } /*没有vue,不显示,有vue,会移除该属性 => 没有闪烁的显示内容*/ [v-cloak] { display: none; } </style> </head> <body> <div id="app" v-cloak> <!--事件指令 v-on:事件名="fn变量" => v-on: 可以简写为 @ v-on:click="clickAction" @dblclick="dblclickAction" --> <!--内容操作:每点一次,内容+1--> <h2 v-once="num">{{ num }}</h2> <h2>{{ num }}</h2> <div v-on:click="clickAction" class="div">{{ num }}</div> <hr> <!--样式操作:点击切换背景颜色--> <div @click="changeColor" class="div" :style="{backgroundColor: bgColor}"></div> <!--样式操作:点击切换整体样式--> <div @click="changeStyle" :style="my_style"></div> </div> </body> <script src="js/vue.js"></script> <script> let app = new Vue({ el: '#app',data: { num: 100,bgColor: 'cyan',backgroundColor: 'orange' } },methods: { clickAction: function () { // console.log(app.num); // console.log(this.num); this.num ++ },changeColor () { // 方法的写法 // if (this.bgColor == 'cyan') { // this.bgColor = 'blue' // } else { // this.bgColor = 'cyan' // } // this.bgColor = 'cyan' if this.bgColor != 'cyan' else 'blue' this.bgColor = this.bgColor != 'cyan' ? 'cyan' : 'blue' },changeStyle: () => { // 这种写法,内部拿不到this(指向的是window) app.my_style = app.my_style.backgroundColor == 'orange' ? { width: '200px',height: '200px',backgroundColor: 'yellow' } : { width: '100px',backgroundColor: 'orange' } } } }); console.log(app); console.log(app.$el); console.log(app.$data.num); console.log(app.num); </script> </html> 事件指令传参<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div { width: 50px; height: 50px; background-color: red; border-radius: 50%; text-align: center; line-height: 50px; color: white; cursor: pointer; } </style> </head> <body> <div id="app"> <!--没有传值默认传 事件对象 --> <div @click="btnClick1">{{ msg }}</div> <!--方法()不会直接调用方法,而是在点击触发后进行传参,接收到的参数就是传入的参数--> <div @click="btnClick2(1,msg)">{{ msg }}</div> <!--一旦书写 方法() 就不再传入事件对象,通过 $event 手动传入事件对象--> <div @click="btnClick3(msg,$event,$event)">{{ msg }}</div> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: '#app',data: { msg: 'box' },methods: { btnClick1(ev) { console.log(ev); console.log(ev.clientX); },btnClick2(a,c) { console.log(a,c) },btnClick3(a,} }) </script> </html> 表单指令<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表单指令</title> </head> <body> <div id="app"> <form action=""> <!--表单指令:v-model="变量"--> <!--双向绑定:一个地方修改值,所有地方的数据都会被更新--> <div> <input type="text" v-model="info" name="usr"> <input type="password" v-model="info" name="pwd"> <p>{{ info | infoFilter }}</p> </div> <div> <!--单选框:v-model="变量存放的是某个单选框的value值,代表该选框选中"--> 男<input type="radio" name="sex" value="male" v-model="sex_val"> 女<input type="radio" name="sex" value="female" v-model="sex_val"> </div> <div> <!--单独的复选框:v-model="true|false代表该选框是否选中"--> 是否同意<input v-model="cb_val" value="yes" type="checkbox" name="agree"> </div> <div> <!--群复选框:v-model="存放选中选框value的数组"--> 男<input v-model="cbs_val" value="male" type="checkbox" name="hobby"> 女<input v-model="cbs_val" value="female" type="checkbox" name="hobby"> 哇塞<input v-model="cbs_val" value="others" type="checkbox" name="hobby"> <p>{{ cbs_val }}</p> </div> <div> <input type="submit"> </div> </form> </div> </body> <script src="js/vue.js"></script> <script> Vue.filter('infoFilter',(info) => { return info ? info : '初始内容' }); new Vue({ el: '#app',data: { info: '',sex_val: 'female',cb_val: 0,cbs_val: ["others"] } }) </script> </html> 条件指令<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .btn1 { width: 400px; } .box { width: 200px; height: 200px; float: left; } .wrap:after { content: ''; display: block; clear: both; } .red { background-color: red } .blue { background-color: blue } </style> <style> .btn-wrap { height: 25px } .btn { width: 100px; height: 25px; float: left; } .page { width: 300px; height: 150px; } .p1 { background-color: pink } .p2 { background-color: yellow } .p3 { background-color: green } </style> </head> <body> <div id="app"> <!--条件指令 v-if="true|false" v-show="true|false" --> <button class="btn1" @click="btnClick">{{ title }}</button> <div class="wrap"> <!--v-if隐藏时不渲染,v-show隐藏时用display:none渲染--> <!--v-if隐藏时在内存中建立缓存,可以通过key属性设置缓存的键--> <div class="box red" v-if="is_show" key="box_red"></div> <div class="box blue" v-show="is_show"></div> </div> <div class="btn-wrap"> <button class="btn" @click="changePage('pink')">粉</button> <button class="btn" @click="changePage('yellow')">黄</button> <button class="btn" @click="changePage('green')">绿</button> </div> <div> <div class="page p1" v-if="page == 'pink'"></div> <div class="page p2" v-else-if="page == 'yellow'"></div> <div class="page p3" v-else></div> </div> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: '#app',data: { title: '隐藏',is_show: true,page: localStorage.page || 'pink' },methods: { btnClick() { this.title = this.title == '隐藏' ? '显示' : '隐藏'; this.is_show = !this.is_show; },changePage(page) { this.page = page; localStorage.page = page; // 永久缓存 // sessionStorage.page = page; // 临时缓存 } } }) </script> </html> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |