《VUE-REVIEW》day1
《VUE-REVIEW》day1
学习真是一个漫长的过程，学而时习之，不亦说乎？
前段时间学习了vue，但是公司一直用不到vue，久而久之不用又有点生疏了。现在重新梳理一遍VUE的知识点。好了，废话不多说，开始vue.。
复习参考前端小姐姐的vue笔记：https://www.cnblogs.com/yingzi1028/p/10310255.html#4649684
在这里我给大家推荐学习vue的三个网站：，1.vue开源项目汇总，2.vue.js中文社区3.vue官方文档。
什么是vue？
官网回答：
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
VUE是做什么的？
Vue.js是一款流行的JavaScript前端框架，旨在更好地组织与简化Web开发。
- Vue所关注的核心是MVC模式中的视图层，同时，它也能方便地获取数据更新，并通过组件内部特定的方法实现视图与模型的交互。
- 通俗的来讲，vue就是一个已经搭建好的空屋，与单纯使用jQuery这种库比，可以更好地实现代码复用，减少工作量；、
- 与Angular.js这种家具电器一应俱全的框架相比又不会一件件挑选，把自己不喜欢再一件件的扔了，甚至required 必须用且耗费空间的！
- 简而言之，vue做了必须的事，又不会做职责之外的事。
如何理解MVVM
MVVM是前端视图层的分层开发思想，分成M、V和VM，其中VM是MVVM核心思想，因为VM是M和V之间的调度者。
——>取 ——> 取 M：ajax获取的数据
M VM V VM：M、V之间的调度者
< ——存 <—— 存 V：每个页面中的html代码
使用MVVM的优点：为了我们开发更加方便，因为MVVM提供了数据的双向绑定。（数据的双向绑定是由VM提供的）。
正式开始学习vue
day01_01 hello world vue~
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../../lib/vue.js"></script> </head> <body> <div id="app">{{masg}}</div> <script> new Vue({ el:"#app", data:{ masg:'helloWord vue' } }) </script> </body> </html>
day01_02 vue的常用指令
<div id="vue_det"> <!-- 当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题。--> <!-- 使用v-cloak 可以解决插值表达式闪烁问题 --> <h1 v-cloak>site : {{site}}</h1> <!-- 使用v-text会覆盖当前标签内元素中原本的内容，也可以解决闪烁问题 --> <h1 v-text="url">123</h1> <!-- 使用v-html会解析当前标签元素中的内容 --> <p v-html="msg"></p> <!-- 使用 v-bind 可以绑定元素属性的值 --> <input type="button" value="按钮" title="我是个按钮"/> <input type="button" value="按钮" v-bind:title="myTitle+'5677888'"/> <!-- v-bind 可以简写为 ： --> <input type="button" value="按钮" :title="myTitle+'5677888'"/> <!-- v-on 可以绑定元素内事件方法 --> <input type="button" value="按钮1" v-on:click="fun"/> <!-- v-on 可以简写为 @ --> <!-- 当鼠标指针位于元素上方时，会发生 mouseover 事件。 --> <input type="button" value="按钮2" @mouseover="fun1"/> </div> <script type="text/javascript">
day01_03 跑马灯效果案例
效果：
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../lib/vue.js"></script> </head> <body> <div id="d1"> <!-- 实现鼠标移动到标签之上开始跑马灯，鼠标离开后结束 --> <div :style="style1" @mouseover="start" @mouseout="stop"> {{str}} </div> <!-- <input type="button" value="开始" @click="start"/> --> <!-- <input type="button" value="结束" @click="stop"/> --> </div> <script> new Vue({ el:'#d1', data:{ str:"我是个跑马灯！实现跑马灯效果", intervalId : null, style1:{color:'black'}, }, methods:{ start: function () { var that = this; if(that.intervalId!=null){ return; }else{ that.intervalId = setInterval(function(){ var str1 = that.str.substring(0,1); var str2 = that.str.substring(1); that.str = str2 + str1; console.log(that.change()); that.style1 = {color:that.change()} }, 400); } }, stop(){ clearInterval(this.intervalId); this.intervalId = null; this.style1 = {color:'black'} this.str = "我是个跑马灯！实现跑马灯效果"; }, //随机生成一种颜色 change(){ var ys = ['red','gold','green','GREEN','blue']; return ys[Math.round(Math.random()*4)] } } }) </script> </body> </html>
day01_04 事件修饰符
情景再现：
<head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <script src="../../lib/vue.js"></script> <style> .inner{ background-color: brown; height: 200px; width: 200px; } </style> </head> <body> <div id="app" > <!-- 当点击内层按钮时，不但内层绑定事件会触发，外层事件也会触发 --> <div class="inner" @click="innerHandler"> <input type="button" value="按钮1" v-on:click="fun1()"></input> </div> </div> <script> new Vue({ el:'#app', data:{ msg:"hello world" }, methods:{ fun1(){ alert(111); }, innerHandler(){ alert(222); } } }); </script> </body>
效果如下：
可以发现，当点击内层按钮时，不但内层绑定事件会触发，外层事件也会触发。
通过使用vue的事件修饰符，可以阻止外层按钮被触发
<div class="inner" @click="innerHandler"> <!-- .stop阻止点击事件冒泡（外层方法不会被调用） --> <input type="button" value="按钮1" v-on:click.stop="fun1()"></input> </div>
效果如下：
可以看见当点击内层按钮时，外层按钮没有被触发了。
其他事件修饰符还有：
.stop 阻止点击事件冒泡（外层方法不会被调用）
.prevent 会阻止当前时间的默认行为
.capture 添加事件的捕获机制 (给外层事件添加捕获机制，内层事件触发时，会先执行外层事件)
.self 只当事件在该元素本身（而不是子元素）发生时才会被回调，
.once 事件只发生一次
<div id="app" > <!-- 事件修饰符的使用，修饰符可以串联 --> <!-- <div class="inner" @click="innerHandler"> --> <!-- .stop阻止点击事件冒泡（外层方法不会被调用） --> <!-- <input type="button" value="按钮" @click.stop="butHandler"> --> <!-- .prevent会阻止当前时间的默认行为 --> <!-- <a href="http://www.baidu.com" @click.prevent="clickfunction">baidu.com</a> --> <!-- </div> --> <!-- .capture 添加事件的捕获机制 (给外层事件添加捕获机制，内层事件触发时，会先执行外层事件)--> <!-- <div class="inner" @click.capture="innerHandler"> <input type="button" value="按钮" @click="butHandler"> </div> --> <!-- .self只当事件在该元素本身（而不是子元素）发生时才会被回调， --> <!-- <div class="inner" @click.self="innerHandler"> <input type="button" value="按钮" @click="butHandler"> </div> --> <!-- .once事件只发生一次 --> <div class="inner" @click="innerHandler"> <input type="button" value="按钮" @click.once="alert"> </div> </div>
day01_05 v-model双向绑定指令的学习
v-bind只能实现数据的单向绑定，从M 到 V，使用 v-model 指令可以实现 表单数据 和 model中数据的双向绑定
注意：v-model 只能在表单元素中使用 input(radio,text,address,email...) select checkbox textarea 等
<body> <div id="app"> <h3>{{msg}}</h3> <!-- v-bind只能实现数据的单向绑定，从M 到 V --> <!-- <input type="text" v-bind:value="msg"> --> <!-- 使用 v-model 指令可以实现 表单数据 和 model中数据的双向绑定 --> <!-- 注意：v-model 只能在表单元素中使用 input(radio,text,address,email...) select checkbox textarea--> <input type="text" v-model="msg"> </div> <script> var vm = new Vue({ el: '#app', data: { msg:"数据的双向绑定哈哈哈" }, methods: {} }); </script> </body>
day01_06 利用v-model 实现简易计算器
<body> <div id="app"> <input type="text" v-model="a"> <select name="" id="" v-model="c"> <option value="+">+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option> </select> <input type="text" v-model="b"> <input type="button" value="=" @click="jisuan"> <input type="text" v-model="d"> </div> <script> var vm = new Vue({ el: '#app', data: { a:0, b:0, c:"+", d:0 }, methods: { jisuan(){ this.d = eval(this.a+this.c+this.b) } } }); </script> </body>
day01_07 vue中元素样式绑定-class
原始得html样式写法：
<head> <style> .active{ width:400px; height: 200px; background-color: red; } .italic{ font-style: italic; } </style> </head> <body> <!-- 原始写法 --> <div class="active"></div> </body>
vue给我们提供了多种元素样式绑定方式：
第一种写法 数组： <h1 :class="['active','italic']">哈哈哈哈哈哈哈哈哈</h1>
第二种写法 数组： <h1 :class="['active',flag1?'italic':'']">哈哈哈哈哈哈哈哈</h1>
第三种写法 <h1 :class="{active:flag1,italic:flag1}">哈哈哈哈哈哈哈哈</h1>
第四种写法 <h1 :class="{active:true,italic:true}">哈哈哈哈哈哈哈哈</h1>
还有好几种写法。。。。
day01_08 vue 中元素样式绑定-style
原始html中样式写法：
<div id="app"> <div style="background: violet;font-style: italic;">hello World</div> </div>
vue中得写法：
<body> <div id="app"> <!-- 第一种写法 --> <!-- <h1 :style="{color:'red',fontStyle:'italic'}">哈哈哈哈哈哈哈哈</h1> --> <!-- 第二种 --> <h1 :style="style1">哈哈哈哈哈哈哈哈</h1> <!-- 第三种 --> <h1 :style="[style1,style2]">哈哈哈哈哈哈哈哈</h1> <!-- ...可能还有好多种，vue很强 --> </div> <script> var vm = new Vue({ el: '#app', data: { style1:{color:'red',fontStyle:'italic'}, style2:{'text-decoration':'underline'} }, methods: {} }); </script> </body>
day01_09 v-for循环普通数组
<body> <div id="app"> <p v-for="item in list">{{item}}</p> <!-- 给数组加上索引 --> <p v-for="(item ,i) in list">索引值 i：{{i}}-------元素值 item:{{item}}</p> </div> <script> var vm = new Vue({ el: '#app', data: { list:[2,3,4,5,6] }, methods: {} }); </script> </body>
遍历结果：
day01_10 v-for遍历对象数组
<body> <div id="app"> <p v-for="(user,i) in userlist"> {{user.id}} ----{{user.name}} --- 索引{{i}}</p> </div> <script> var vm = new Vue({ el: '#app', data: { userlist:[ {id : 1, name : '张三'}, {id : 2, name : '李四'}, {id : 3, name : '王五'}, {id : 4, name : '王麻子'}, {id : 5, name : '二狗子'} ] }, methods: {} }); </script> </body>
遍历结果如下：
day01_11 v-for 遍历对象
<body> <div id="app"> <p v-for="(key,value,i) in user"> {{key}} ----{{value}}---索引i:{{i}}</p> </div> <script> var vm = new Vue({ el: '#app', data: { user:{ name:'张三', age:14, sex:'男' } }, methods: {} }); </script> </body>
遍历结果：
day01_12 v-for 遍历数字
<body> <div id="app"> <p v-for="item in 10">我是一个数字{{item}}</p> </div> <script> var vm = new Vue({ el: '#app', data: {}, methods: {} }); </script> </body>
遍历结果：
day01_13 v-if ,v-show的使用
<body> <!-- v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。 --> <div id="app"> <div v-if="type=== 'A'"> AAA </div> <div v-else-if="type=== 'B' "> bbb </div> <div v-else-if="type === 'C'"> ccc </div> <div v-else> not a-b-c </div> <!-- 也可以使用 v-show 指令来根据条件展示元素： --> <h1 v-show="ok">{{type}}!</h1> </div> <script> var vm = new Vue({ el: '#app', data: { type: 'C', ok: true }, methods: {} }); </script> </body>
官网：
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
v-if的特点：每次都会重新删除或创建元素。
v-if的缺点：有较高的切换性能消耗。
v-show的特点：每次不会重新进行dom的删除和创建操作，只是切换了元素的display：none样式。
v-show的缺点：有较高的初始渲染消耗。
如果元素涉及到频繁的切换，最好不要使用v-if，如果元素可能永远也不会被显示出来被用户看到，则推荐使用v-if。
day01_15 第一天内容总结回顾
<!-- 1 MVC 和 MVVM的区别 --> <!-- 2 vue 种基本的代码结构 --> <!-- 3 vue的常用指令: 插值表达式 v-cloak v-text v-html v-bind(缩写是:) v-on(缩写是@) v-model v-for v-if v-show --> <!-- 4 事件修饰符 .stop .once .self .capture .prevent --> <!-- 5 在VM实例中, 如果要访问data中的数据 或者 methods中的方法 必须使用 this --> <!-- 6 在 v-for中 学会使用 key属性 key的值只能是 string/number 类型的 --> <!-- 7 v-model只用用于表单元素 --> <!-- 8 vue中绑定元素样式的两种方式 v-bind:style v-bind:class -->
day01_16 案例-完成对列表的crud功能
注意 forEach some filter findIndex 这些都属于数组的新方法,都会对数组的每一项进行遍历,执行相关操作，
<body> <!-- 被vm 实例所控制的区域 --> <div id="app"> <div> name:<input type="text" v-model="addname"> age: <input type="text" v-model="addage"> address: <input type="text" v-model="addaddress"> <input type="button" value="添加" @click="add"> 搜素关键字: <input type="text" v-model="keyWords"> </div> <hr> <div> <table > <thead> <th>name</th> <th>age</th> <th>address</th> <th>option</th> </thead> <!-- 列表内容可以循环一个方法获取,通过方法监听关键字的改变而动态更新list内容,再将list内容展示出来--> <tbody v-for="item in serach(keyWords)" :key="item.name"> <!-- <tr v-for="item in userList" :key="item.name"> --> <td>{{item.name}}</td> <td>{{item.age}}</td> <td>{{item.address}}</td> <td><input type="button" value="删除" @click="del(item.name)"></td> </tbody> </table> </div> </div> <script> // 创建实例对象 var vm=new Vue({ // 指定控制的区域 el:'#app', data:{ addname:null, addage:null, addaddress:null, keyWords:'',//这里赋初始值为空,如果赋值为null下面includes方法会报错 userList:[ {name:'马云',age:50,address:'杭州'}, {name:'马化腾',age:45,address:'深圳'}, {name:'马斯克',age:40,address:'纽约'} ] }, methods:{ add(){ this.userList.push({name:this.addname,age:this.addage,address:this.addaddress}) }, del(name){ //先找到需要删除的行的索引 //findIndex属于数组的新方法,会对数组的每一项进行遍历。当为true时返回index // var index = this.userList.findIndex( // function(info){ // if(info.name === name){ // return true; // } // } // ) //使用es6箭头函数语法 var index = this.userList.findIndex(info =>{ if(info.name === name){ return true; } }) this.userList.splice(index,1) }, serach(keyWords){ //注意 forEach some filter findIndex 这些都属于数组的新方法,都会对数组的每一项进行遍历,执行相关操作 return this.userList.filter( function(info) { if(info.name.includes(keyWords)){ return info; } } ) } } }); </script> </body>
