Vue
一、Vue了解
#1、什么是Vue 可以独立完成前后端分离式web项目的JavaScript框架 #2、why 三大主流框架之一：Angular React Vue 先进的前端设计模式：MVVM 可以完全脱离服务器端，以前端代码复用的方式渲染整个页面：组件化开发 #3、特点 单页面的web应用 数据驱动 数据的双向绑定 虚拟的DOM
简单使用
# 1.下载：https://vuejs.org/js/vue.min.js # 2.导入vue.js # 3.在自定义的script标签中创建vue对象 # 4.用vue对象来控制页面内容 <div id="app"> {{ }} </div> <script src="js/vue.min.js"></script> <script> new Vue({ el: '#app' #一般使用id，因其具有唯一标识性， }) </script>
二、Vue实例
1、el:实例
new Vue({ el: '#app' }) // 实例与页面挂载点一一对应 // 一个页面中可以出现多个实例对应多个挂载点 // 实例只操作挂载点内部内容
<div id='app'> {{ msg }} </div> <script> var app = new Vue({ el: '#app', data: { msg: '数据', } }) console.log(app.$data.msg); console.log(app.msg); </script> <!-- data为插件表达式中的变量提供数据 --> <!-- data中的数据可以通过Vue实例直接或间接访问-->
3、实例的methods
#v-on来为事件绑定方法，事件用 :事件名 标注 #语法：v-on:事件名 = "事件变量" # 事件变量：由vue实例的methods提供 #例如 <div v-on:click="btnClick" v-bind:class="my_cls"> {{msg}}</div>
<!DOCTYPE html> <html lang="en"> <head> <style> .btn{ width:200px; height:300px; background: red; } .btn1{ width: 500px; height: 1000px; background:bisque; } </style> </head> <body> <div id="app"> <!--<button v-on:click="btnClick" v-bind:class="my_cls"></button>--> <div v-on:click="btnClick" v-bind:class="my_cls"> {{msg}}</div> </div> </body> <script src="js/vue.min.js"></script> <script> new Vue({ el:'#app', data:{ msg:'abcd', my_cls:'btn' }, methods:{ btnClick:function () { if (this.my_cls == 'btn'){ this.my_cls = 'btn1' }else{ this.my_cls = 'btn' } } } }) </script> </html>
4、computed:计算
# computed功能：将function封装给一个变量，通过该变量就可以得到该function的值
使用场景，例如，输入姓氏和名称，对其拼接
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .span{color:red;} </style> </head> <body> </body> <div id="app"> <p>姓：<input type="text" placeholder="姓" v-model="first_name"></p> <p>名：<input type="text" placeholder="名" v-model="last_name"></p> <!--<p>姓名:<span class="span">{{first_name+last_name}}</span></p>--> <p>姓名:<span class="span" v-on:click="Click">{{name}}</span></p> </div> <script src="js/vue.min.js"></script> <script> new Vue({ el:'#app', data:{ first_name:'', last_name:'', name:'点击我才能触发' }, methods:{ Click:function () { this.name=this.first_name+this.last_name } } }) </script> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .span{color:red;} </style> </head> <body> </body> <div id="app"> <p>姓：<input type="text" v-model="first_name"></p> <p>名：<input type="text" v-model="last_name"></p> <p>姓名:<span class="span">{{name()}}</span></p> </div> <script src="js/vue.min.js"></script> <script> new Vue({ el:'#app', data:{ first_name:'', last_name:'', }, methods:{ name:function () { return this.first_name+this.last_name } } }) </script> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .span{color:red;} </style> </head> <body> </body> <div id="app"> <p>姓：<input type="text" v-model="first_name"></p> <p>名：<input type="text" v-model="last_name"></p> <p>姓名:<span class="span">{{name}}</span></p> </div> <script src="js/vue.min.js"></script> <script> new Vue({ el:'#app', data:{ first_name:'', last_name:'', }, computed:{ name:function () { // if (this.first_name=='' && this.last_name==''){return '默认姓名'} return this.first_name+this.last_name } } }) </script> </html>
5、监听
# watch是用来监听变量的，当监听的变量的值一旦发生变化，就会触发监听的函数 # 应用场景：多个变量(first_name、last_name)依赖于一个变量(name) ``` ```html <div id="app"> <p> 姓名：<input type="text" placeholder="姓名" v-model="name"> </p> <p>姓: {{ first_name }}</p> <p>名: {{ last_name }}</p> </div> <script> var app = new Vue({ el: '#app', data: { name: "", first_name: "姓", last_name: "名", }, watch: { name: function () { // eg: name = “张三” this.first_name = this.name[0]; // 张 this.last_name = this.name[1]; // 三 } } }); </script>
6、delimiters：分隔符
<div id='app'> ${ msg } </div> <script> new Vue({ el: '#app', data: { msg: 'message' }, delimiters: ['${', '}'] }) </script>
三、生命周期钩子
- 表示一个vue实例从创建到销毁的过程，将这个过程的一些节点赋予对应的钩子函数
- 钩子函数：满足特点条件被回调的方法
new Vue({ el: "#app", data: { msg: "message" }, beforeCreate () { console.log("实例刚刚创建"); console.log(this.msg }, created () { console.log("实例创建成功, data, methods已拥有"); console.log(this.msg); }, mounted () { console.log("页面已被vue实例渲染, data, methods已更新"); } // 拿到需求 => 确定钩子函数 => 解决需求的逻辑代码块 })
四、Vue指令
1、文本相关指令
<body> <div id="app"> <!-- 1) 插值表达式 --> <p>{{ msg }}</p> <p>{{ 1 + 2 * 3 + '条' + msg }}</p> <!-- 2) v-text --> <p v-text="msg"></p> <p v-text="'msg'"></p> <!-- 3) v-html：能解析html代码语法 --> <p v-text="html_msg"></p> <p v-html="html_msg"></p> <!-- 4) v-once：结合插值表达式来使用，变量值一旦被初始化赋值后就不会再改变 --> <input type="text" v-model="val"> <p>{{ val }}</p> <p v-text="val"></p> <p v-html="val"></p> <p v-once>{{ val }}</p> </div> </body> <script src="js/vue.min.js"></script> <script> new Vue({ el: '#app', data: { msg: '你是p', html_msg: '<b>html语法代码是否解析</b>', val: '000' } }) </script>
属性指令
# 1.v-bind:属性名="变量" # 2.简写=> :属性名="变量" # 3.:class="变量" | :class="{类名:is_able}" | :class="[类1变量, ..., 类n变量,]"
<head> <meta charset="UTF-8"> <title>属性指令</title> <style> .cls_a { width: 200px; height: 200px; background-color: yellowgreen; } .cls_b { text-align: center; line-height: 200px; border-radius: 50%; } </style> </head> <body> <!-- 属性指令：v-bind --> <div id="app"> <!-- 1) 自定义属性绑定变量 --> <p v-bind:abc="a"></p> <!-- 2) title属性 --> <p title="鼠标悬浮的文本提示">这是一个p段落</p> <p v-bind:title="my_title">这是一个p段落</p> <!-- 3) class属性 --> <!-- 重点：v-bind: 可以简写为 : --> <!-- my_class可以被任意赋值 --> <p :class="my_class">这是一个p段落</p> <!--{类名:类是否起作用, ...} 类是否起作用 写的是变量，变量的值为true或false--> <!--应用场景：通过一个变量真假控制一个类名是否起作用--> <p :class="{x:1, y:0, z:is_able}">这是一个p段落</p> <!--[类名1, ..., 类名n]: 多类名，每一个类名既可以是字符串常量也可以是变量--> <p :class="[o, p, q, 'oqp']">这是一个p段落</p> <!--多类名综合使用--> <p :class="[o, p, q, 'oqp', {k: true}, {h: false}]">这是一个p段落</p> <!-- 4) style属性 --> <p :style="my_style">这是一个p段落</p> <p :style="{color: 'red', backgroundColor: yellow}">这是一个p段落</p> </div> </body> <script src="js/vue.min.js"></script> <script> new Vue({ el: '#app', data: { a: 'A', my_title: '鼠标悬浮的文本提示', my_class: 'cls_a cls_b', is_able: true, o: 'O', p: 'P', q: 'Q', my_style: { color: 'red', // 'font-size': '30px' fontSize: '30px' }, yellow: 'greenyellow' } }) </script>
事件指令
# 指令：v-on:事件名="方法变量" # 简写：@事件名="方法变量" # 简写：@事件名="方法变量()" => 不是方法的调用，而是用于传参 # 简写：@事件名="方法变量('普通参数', $event)" => $event是事件参数，可以通过它得到鼠标点击的相关信息
<body> <!-- 指令：v-on:事件名="变量" --> <!-- 简写：@事件名="变量" --> <div id="app"> <p v-on:click="fn1" :style="{color: m_c}">{{ msg }}</p> <p @mouseover="fn2" @mouseleave="fn3" @mousedown="fn4" @mouseup="fn5">{{ msg }}</p> <!--事件需要参数时--> <!-- 注意：事件绑定 方法名() 等价 方法名，不能调用方法，而是作为传参的标志 --> <p @click="func('abc')">{{ msg }}</p> <!--类别django传参的应用场景，可以标识具体点击的是哪个li--> <!--{% for %}--> <!--<li @click="func({{forloop.index}})"></li>--> <!--{% end for%}--> <!--传入事件对象--> <p @click="func1($event)">{{ msg }}</p> </div> </body> <script src="js/vue.min.js"></script> <script> new Vue({ el: '#app', data: { msg: '你是p', m_c: 'red' }, methods: { func1: function (ev) { console.log(ev); // 数据点击页面的点击点 console.log(ev.clientX); console.log(ev.clientY); }, func: function (txt) { this.msg = txt }, fn1: function () { if (this.m_c == 'red') { this.m_c = 'blue' } else { this.m_c = 'red' } }, fn2: function () { this.msg = '鼠标悬浮了' }, fn3: function () { this.msg = '鼠标离开了' }, fn4: function () { this.msg = '鼠标按下了' }, fn5: function () { this.msg = '鼠标抬起了' } } }) </script>
表单指令
<body> <div id="app"> <!-- 指令：v-model="变量" --> <form action="" method="get"> <!-- 1) 数据的双向绑定 --> <input type="text" v-model="msg" name="usr"> <input type="password" v-model="msg" name="pwd"> <!-- 2) 单选框: value必须设置初值，v-model变量值要与单选框的value值统一 --> <p> 男:<input type="radio" name="sex" value="male" v-model="sex_val"> 女:<input type="radio" name="sex" value="female" v-model="sex_val"> </p> <!--3)单一复选框--> <p> <!-- v-model绑定的变量值与true-value|false-value统一 --> <!-- true-value|false-value默认值为 true | false --> 是否同意条款:<input type="checkbox" name="agree" v-model="agree_val" true-value="同意" false-value="不同意"> </p> <!-- 4) 多复选框 --> <!-- v-model绑定的变量是存放多复选框value的数组(列表) --> <p> 爱好: <input type="checkbox" value="喜好男的" name="cless" v-model='more_val' /> <input type="checkbox" value="喜好女的" name="cless" v-model='more_val' /> <input type="checkbox" value="不挑" name="cless" v-model='more_val' /> </p> <button type="submit">提交</button> </form> </div> </body> <script src="js/vue.min.js"></script> <script> new Vue({ el: '#app', data: { msg: '', sex_val: 'female', // 默认value="female"的单选框被选中 agree_val: '不同意', more_val: ['喜好男的', '喜好女的'] } }) </script>
条件指令
<head> <meta charset="UTF-8"> <title>文本指令</title> <style> .box { width: 200px; height: 100px; background-color: darkgray; } .pg1 { background-color: red; } .pg2 { background-color: yellow; } .pg3 { background-color: blue; } </style> </head> <body> <div id="app"> <!-- v-if与v-show的变量值都是bool，控制着显隐 --> <!-- v-if隐藏时标签不被渲染，v-show隐藏时标签渲染，用display:none来隐藏 --> <!-- 特殊属性key是vue在内存中建立缓存的标志, 来优化渲染的效率 --> <p v-if="is_if" key="my_if">v-if的显示与隐藏</p> <p v-show="is_show" key="my_show">v-show的显示与隐藏</p> <p> <button @click="btn_click('pg1')">红</button> <button @click="btn_click('pg2')">黄</button> <button @click="btn_click('pg3')">蓝</button> <div class="box pg1" v-if="pg == 'pg1'" key="pg1"></div> <div class="box pg2" v-else-if="pg == 'pg2'" key="pg2"></div> <div class="box pg3" v-else key="pg3"></div> </p> </div> </body> <script src="js/vue.min.js"></script> <script> new Vue({ el: '#app', data: { is_if: true, is_show: true, pg: 'pg1' }, methods: { btn_click: function (pg_num) { this.pg = pg_num } } }) </script>
循环指令
<head> <meta charset="UTF-8"> <title>文本指令</title> <style> p { padding-left: 30px; } </style> </head> <body> <div id="app"> <p>{{ array[1] }}</p> <p>{{ person['age'] }}</p> <div>循环array</div> <p v-for="v in array">{{ v }}</p> <div>带索引循环array</div> <p v-for="(v, i) in array">{{ v }}索引是{{ i }}</p> <div>循环dict</div> <p v-for="v in person">{{ v }}</p> <div>带key循环dict</div> <p v-for="(v, k) in person">{{ v }}键是{{ k }}</p> <div>带key带索引循环dict</div> <p v-for="(v, k, i) in person">{{ v }}键是{{ k }}索引是{{ i }}</p> <ul v-for="person in persons"> <!--{{ person }}--> <li v-for="(v, k) in person">{{ k }}: {{ v }}</li> </ul> </div> </body> <script src="js/vue.min.js"></script> <script> new Vue({ el: '#app', data: { array: ['iso', 'android', 'winPhone'], person: {'name': 'Jobs', 'age': 88, 'gender': '男'}, persons: [ {'name': 'Jason', 'age': 58}, {'name': 'Jerry', 'age': 68}, {'name': 'Owen', 'age': 17}, ] } }) </script>
前端array的操作
<script> arr = [1, 2, 3, 4, 5]; console.log(arr); // 从index开始往后操作length长度，替换为args // arr.splice(index, length, args); // arr.splice(2, 3, 9, 9); // [1, 2, 9, 9] 替换 // arr.splice(2, 3); // [1, 2] 删除 arr.splice(2, 0, 8); // [1, 2, 8, 3, 4, 5] 插入 console.log(arr); </script>
<body> <div id="app"> <input type="text" v-model="txt"> <button @click="send_msg">留言</button> <ul> <li v-for="(msg, i) in msg_arr" @click="delete_msg(i)">{{ msg }}</li> </ul> </div> </body> <script src="js/vue.min.js"></script> <script> new Vue({ el: '#app', data: { txt: '', // msg_arr: ['初始留言1', '初始留言2'] msg_arr: [] }, methods: { send_msg: function () { // this.txt // this.msg_arr if (this.txt) { this.msg_arr.push(this.txt); this.txt = '' } }, delete_msg: function (index) { this.msg_arr.splice(index, 1) } } }) </script>
