什么是Vue
什么是Vue Vue.js是一个渐进式JavaScript框架
它是构建用户界面的JavaScript框架(让它自动生成js,css,html等) 渐进式:vue从小到控制页面中的一个变量到页面一块内容到整个页面,最终大到整个项目,东可以用vue框架来实现 vue可以干哪些事 将数据渲染到指定区域(数据可以是后台获取,也可以由前台自己产生) 可以与页面完成基于数据的交互方式 为什么学习Vue 1.整合了Angular React框架的优点(第一手API文档是中文的) 2.单页面应用(得益于vue的组件化开发 => 前台代码的复用) 3.虚拟DOM(提高操作DOM的效应) 4.数据的双向绑定
怎么使用Vue
1、引入vue.js
2、展示HTML
<div id="app"> <p>{{msg}}</p> <p>{{ 80+2 }}</p> <p>{{ 20>30 }}</p> <h1 v-text="msg"></h1> <h1 v-html="hd"></h1> <h1 v-html="str"></h1> </div>
3、建立一个vue对象
vue对象需要手动创建, 原因,一个vue对象可以只控制页面中的某一部分, 如果一个页面有多个部分都需要被控制,那么就需要创建多个vue对象
vue对象如何与控制的页面进行关联(绑定),采用的是vue对象中的挂载点(挂载点可以唯一标识页面中的某一个区域)
<body> <div id="app"> {{ msg }} </div> </body> <script src="js/vue.js"></script> <script> // Vue实例会根据数据产生虚拟DOM,最终替换掉挂载点的真实DOM(不要挂在到body上) var app = new Vue({ el: '#app', //挂载点 data: { msg: "赢在今日" } }); // 如果需要使用vue对象(实例), 那么久可以接受Vue创建的结果, 反之就不需要接收 console.log(app); console.log(app.$attrs); // vue实例的变量都是以$开头 console.log(app.$el); console.log(app.$data.msg); console.log(app.msg); // app对象 = new Vue()实例 = 标签div#app组件 </script>
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实例直接或间接访问-->
<style> .box { background-color: orange } </style> <div id='app'> <p class="box" v-on:click="pClick">测试</p> <p class="box" v-on:mouseover="pOver">测试</p> </div> <script> var app = new Vue({ el: '#app', methods: { pClick () { // 点击测试 }, pOver () { // 悬浮测试 } } }) </script> <!-- 了解v-on:为事件绑定的指令 --> <!-- methods为事件提供实现体-->
<body> <div id="app"> 姓<input type="text" v-model="first_name"> <hr> 名<input type="text" v-model="last_name"> <hr> <p>{{ first_name + " " + last_name }}</p> <p>{{ full_name_fn() }}</p> <!-- 一个变量的值依赖于多个变量的值 --> <p>{{ full_name }}</p> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: "#app", data: { first_name: "", last_name: "", }, methods: { // 声明的是函数, 该函数必须手动调用 full_name_fn: function () { return this.first_name + " " + this.last_name } }, computed: { // 声明变量full_name, 该变量的值等于后方函数的返回值 // 函数中包含的所有vue变量值只要有发生变化的系统就会调用该函数 full_name: function () { return this.first_name + " " + this.last_name } } }) </script>
<body> <div id="app"> 姓名<input type="text" v-model="full_name"> <hr> <p>{{ first_name }}</p> <hr> <p>{{ last_name }}</p> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: "#app", data: { full_name: "", first_name: "", last_name: "", }, watch: { // wacth只是对已有的变量进行值变化的监听, 一旦发现值变化,系统自动回调监听变量后的函数 // 后方函数和前方变量只有数据变化的监听绑定关系, 没有值相关的联系 full_name: function () { arr = this.full_name.split(" "); this.first_name = arr[0]; this.last_name = arr[1]; } } }) </script>
<div id='app'> ${msg} </div> <script> new Vue({ el: '#app', data: { msg: 'message' }, delimiters: ['${','}'] }) </script>
生命周期钩子
更加详细的资料见官网 https://cn.vuejs.org/v2/api/#选项-生命周期钩子
钩子函数: 满足特点条件被回调的方法
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的指令
指令:是带有v-前缀的特殊属性,通过属性来操作元素
<div id="app"> <!-- 插值表达式 --> <p>{{ msg }}</p> <!-- eg:原文本会被msg替换 --> <p v-text='msg'>原文本</p> <!-- 可以解析带html标签的文本信息 --> <p v-html='msg'></p> <!-- v-once控制的标签只能被赋值一次 --> <p v-once>{{ msg }}</p> </div> <script type="text/javascript"> // 指令: 出现在html标签中可以被vue解析处理的全局属性 new Vue({ el: "#app", data: { msg: "message" } }) </script>
<style type="text/css"> [v-cloak] { display: none; } </style> <div id="app" v-cloak> {{ msg }} </div> <script src="js/vue.min.js"></script> <script type="text/javascript"> new Vue({ el: "#app", data: { msg: "message" } }) </script> <!-- 避免页面闪烁-->
<body> <div id="app"> <!-- v-bind:属性 = "变量" --> <!-- 如果abc自定义属性被v-bind:指令绑定了,后面的值也会成为vue变量, 如果就想是普通字符串, 再用''包裹 --> <!-- : 就是 v-bind: 的简写方式 (1.常用 2.一定且只操作属性)--> <p v-bind:abc="'abc'" v-bind:title="h_info" :def="hehe">abc</p> <!--最常用的两个属性 class | style--> <!--class--> <p :class="a"></p> <!-- 单类名 --> <p :class="[a, b]"></p> <!-- 多类名 --> <p :class="{c: d}"></p> <!-- 了解: c为类名,是否起作用取决于d值为true|false 开关类名 --> <!--style--> <p :style="s1"></p> <!-- s1为一套样式 --> <p :style="[s1, s2, {textAlign: ta}]">12345</p><!-- 了解: s1,s2均为一套样式, ta是一个变量,专门赋值给textAlign("text-align") --> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: "#app", data: { h_info: "悬浮提示", hehe: "呵呵", a: 'active', b: 'rule', d: false, s1: { // 样式1: 值1, ..., 样式n: 值n '200px', height: '200px', background: 'red' }, s2: { borderRadius: '50%' }, ta: 'center' } }) </script>
<!-- v-bind: 指令可以简写为 : -->
<body> <div id="app"> <!-- v-on:事件 = "变量 简写 @ --> <!-- 事件绑定的变量可以在data中赋值,但建议在methods中赋值 --> <p v-on:click="fn1">11111111111111</p> <p @click="fn2">22222222222222</p> <!--vue事件的绑定可以传自定义参数--> <p @click="fn3(333)">3333333333333333</p> <!--vue事件的绑定不传自定义参数, 默认将事件对象传过去了--> <p @click="fn4">4444444444444444</p> <!--vue事件的绑定传自定义参数, 还要将事件对象传过去了, 要明确传$event--> <p @click="fn5(555, $event)">5555555555555555</p> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: "#app", data: { // 事件在data中提供一个函数地址,可以实现事件 fn1: function () { console.log("11111111111111") } }, // 事件尽量(要求)都放在vue实例的methods中 methods: { fn2: function () { console.log("22222222222222") }, fn3 (arg) { // ES6语法 console.log(arg) }, fn4: function (ev) { console.log(ev) }, fn5: function (arg, ev) { console.log(arg) console.log(ev) }, } }) </script>
<div id="app"> <!-- v-model针对于表单元素 --> <form action="" method="get"> <!-- 1、双向绑定:服务于文本输入框 --> <!-- v-model存储的值为输入框的value值 --> <div> <input type="text" name="usr" v-model="in_val"> <input type="password" name="ps" v-model="in_val" > <textarea name="info" v-model="in_val"></textarea> </div> <!-- 2、单选框 --> <div> <!-- 单选框是以name进行分组,同组中只能发生单选 --> <!-- v-model存储的值为单选框的value值 --> 男:<input type="radio" name="sex" value="男" v-model="ra_val"> 女:<input type="radio" name="sex" value="女" v-model="ra_val"> {{ ra_val }} </div> <!-- 3、单一复选框 --> <!-- v-model存储的值为true|false --> <!-- 或者为自定义替换的值 --> <div> <input type="checkbox" v-model='sin_val' true-value="选中" false-value="未选中" /> {{ sin_val }} </div> <!-- 4、多复选框 --> <!-- v-model存储的值为存储值多复选框value的数组 --> <div> <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' /> {{ more_val }} </div> </form> </div> <script type="text/javascript"> new Vue({ el: '#app', data: { in_val: '', // 默认值可以决定单选框默认选项 ra_val: '男', // 默认值为true,单一复选框为选中,反之false为不选中 sin_val: '', // 数组中存在的值对应的复选框默认为选中状态 more_val: ['喜好女的','不挑'] } }) </script>
<div id="app"> <button @click="toggle">显隐切换</button> <!-- v-if --> <div class="box r" v-if="isShow"></div> <!-- v-show --> <div class="box o" v-show="isShow"></div> <!-- 1.条件渲染的值为true|false --> <!-- 2.true代表标签显示方式渲染 --> <!-- 3.false v-if不渲染到页面,v-show以display:none渲染到页面,但也不会显示 --> <!-- 了解 :key由vue控制的属性key值需要唯一标识,因为key的值就是vue对该组件在内存中建立缓存的key --> <!-- <div class="box red" v-if="r_show" :key="key" ></div> --> <!-- v-if v-else-if v-else 案例 --> <ul> <li @mouseover="changeWrap(0)">red</li> <li @mouseover="changeWrap(1)">green</li> <li @mouseover="changeWrap(2)">blue</li> </ul> <!-- red页面逻辑结构 --> <div class="wrap red" v-if="tag == 0" key="0">...</div> <!-- green页面逻辑结构 --> <div class="wrap green" v-else-if="tag == 1" key="1">...</div> <!-- blue页面逻辑结构 --> <div class="wrap blue" v-else key="2">...</div> <!-- v-if相关分支操作,在未显示情况下,是不会被渲染到页面中 --> <!-- 通过key全局属性操作后,渲染过的分支会建立key对应的缓存,提高下一次渲染速度 --> <!-- v-show 案例 --> <ul> <li @mouseover="changeMain(0)">red</li> <li @mouseover="changeMain(1)">green</li> <li @mouseover="changeMain(2)">blue</li> </ul> <!-- red页面逻辑结构 --> <div class="main red" v-show="whoShow(0)">...</div> <!-- green页面逻辑结构 --> <div class="main green" v-show="whoShow(1)">...</div> <!-- blue页面逻辑结构 --> <div class="main blue" v-show="whoShow(2)">...</div> </div> <script type="text/javascript"> new Vue({ el: "#app", data: { isShow: false, tag: 0, flag: 0 }, methods: { toggle () { this.isShow = !this.isShow; }, changeWrap (num) { this.tag = num; }, changeMain (num) { // this.flag num this.flag = num; }, whoShow (num) { // this.flag num return this.flag == num; } } }) </script>
<body> <div id="app"> <ul> <li>{{ ls[0] }}</li> <li>{{ ls[1] }}</li> <li>{{ ls[2] }}</li> <li>{{ ls[3] }}</li> </ul> <ul> <!-- 一般列表渲染需要建立缓存 --> <!-- 列表渲染是循环,需要赋值变量给key,使用key需要v- bind:处理 --> <!-- v-for变量数组[]时,接收两个值时,第一个为元素值,第二 个为元素索引 --> <li v-for="(ele, index) in ls">{{ ele }} {{ index }}</li> </ul> <ul> <!-- v-for变量对象{}时,接收三个值时,第一个为元素值,第二 个为元素键,第三个为元素索引 --> <li v-for="(value, key, index) in dic">{{ key }} {{ value }} {{ index }}</li> </ul> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: "#app", data: { ls: ['张三', '李四', '王五', '赵六', '钱七'], dic: { name: 'Bob', age: 88, gender: '男' } }, }) </script>
<div id="app"> <div> <input type="text" v-model="val"> <button type="button" @click="submitMsg">提交</button> </div> <ul> <li v-for="(v, i) in list" :key="i" @click="removeMsg(i)">{{ v }}</li> </ul> {{ list }} </div> <script type="text/javascript"> new Vue({ el: "#app", data: { val: "", list: [] }, methods: { submitMsg () { if (this.val) { this.list.push(this.val); this.val = "" } }, removeMsg(index) { this.list.splice(index, 1) } } }) </script>
自定义指令
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width"> <title>Title</title> <script src="vue.js"></script> </head> <body> <div id="app"> <input type="text" v-focus> </div> <script> new Vue({ el:"#app", data:{ }, directives:{ //directives定义指令的 focus:{ //focus指令的名字 inserted:function (els) { //els绑定的这个元素 //inserted当绑定的这个元素 <input type="text" v-focus>显示的时候, els.focus(); //获取焦点的一个方法,和以前的时候是一样的 els.style.backgroundColor="blue"; els.style.color='#fff' } } } }) </script> </body> </html>
实现tag切换的小示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width"> <title>Title</title> <script src="vue.js"></script> <style> ul li{ list-style: none; display: inline-block; border: 1px solid cornflowerblue; height: 50px; 200px; background: cornflowerblue; text-align: center; line-height: 50px; } </style> </head> <body> <div id="mybox"> <ul> <li><span v-on:click="qh(true)">二维码登录</span></li> <li><span v-on:click="qh(false)">邮箱登录</span></li> </ul> <div v-if="temp"> <img src="erweima.png" alt=""> </div> <div v-if="!temp"> <!--取反--> <form action="http://mail.163.com" method="post"> <!--method是为了安全 ,action:提交的地址--> <p>邮箱:<input type="email"></p> <p>密码:<input type="password"></p> <p><input type="submit" value="登录"></p> </form> </div> </div> <script> new Vue({ el:"#mybox", //表示当前这个元素开始使用vue data:{ temp:true }, methods:{ qh:function (t) { this.temp=t } } }) </script> </body> </html>