Vue初学日记Day1

1.配置环境

参考：https://www.jianshu.com/p/454c3a7c5602

node-v10.16.0-x64.msi

链接：https://pan.baidu.com/s/1DX1kCrf3IsYUiVjSKDZKAA 提取码：gzcn

VSCodeUserSetup-x64-1.35.1.exe

链接：https://pan.baidu.com/s/1j41SgHP5fTLE1eC0jvSQKw 提取码：x9fu

Chrome Browser

2.Vue基本代码结构

按MVVM模式划分

<!DOCTYPE html>
<html lang="en">
<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-2.4.0.js"></script>
</head>
<body><!-- V --><div id="app"><p>{{msg}}</p>  </div><!-- V --><script>// VMvar vm = new Vue({      el:'#app',//Mdata:{          msg:"1111"}//M})    // VM</script>
</body>
</html>

3.v-cloak，v-text，v-html

插值表达式，作用于V模块

v-cloak 防止内容闪烁，提前在<style>中设置[v-cloak]的display属性为none，未加载完时不显示

v-text 字符串文本替换，替换后直接显示

v-html html文本替换，替换后按html代码去执行

<!DOCTYPE html>
<html lang="en">
<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>Day1_2_v-cloak&text&html</title><style>[v-cloak]{display: none;}</style>
</head>
<body><div id="app"><p v-cloak>{{msg}}</p><!-- v-cloak 防止闪烁 --><h4 v-text="msg">正在加载</h4><!-- v-text 字符串文本替换 --><div v-html="msg2">正在</div><!-- v-html html文本替换--></div><script src="../lib/vue-2.4.0.js"></script><script>var vm = new Vue({el:'#app',data:{msg:"123",msg2:"<h1> 1234 <h1/>"}})    </script>
</body>
</html>

4.v-bind属性绑定，v-on事件绑定

v-bind缩写为冒号:

V模块中元素，将其属性绑定到M模块中data中的元素，用data中元素来表示其属性

<body><div id="app"><input type="button" value="Btn" v-bind:title="mytitle + ' ss'"><input type="button" value="Btn2" :title="mytitle + '123'"><!-- v-bind属性绑定机制，可简写为冒号: 提供用于绑定属性的指令,后面识别为表达式 --><!-- Button插入 --></div><script>var vm = new Vue({el:"#app",data:{msg:"123",mytitle:"this is a button."}})</script>
</body>

v-on缩写@

V模块中元素，将其触发的事件绑定到VM中methods中的元素，用methods中元素表示其触发事件

v-on支持80多个事件

<body><div id="app"><input type="button" value="按钮" :title="mytitle + '！！！'" id="btn1"><p></p><input type="button" value="按钮2" v-on:click="myevent"><input type="button" value="按钮3" @mouseover="myevent"><!-- v-on事件绑定机制，此处为事件click/mouseover，在已定义的方法中去查找 --><!-- v-on: 可用 @ 替换--></div><script>var vm = new Vue({el:"#app",  //操作区域iddata:{      //定义数据msg:"123",mytitle:"这是一个按钮"},methods:{   //定义方法myevent:function(){alert("Hello")}}})document.getElementById("btn1").onclick = function(){alert("Hello World")}</script></body>

5.跑马灯效果制作

需要用到计时器：setInterval( function(), time) //每隔time毫秒，执行一次function()

清除计时器:clearInterval(interval_Id)

<!DOCTYPE html>
<html lang="en">
<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>Day1_5_HorseRaceLamp</title><script src="../lib/vue-2.4.0.js"></script>
</head>
<body><div id="app"><p>{{msg}}</p><input type="button" value="Begin" :title="bgtitle" @click="bgfc"><input type="button" value="Stop" :title="stptitle" @click="stpfc"></div><script>// 在VM中要获取data中的数据或methods中的方法，要用this.数据、this.方法来访问// 此处this表示vmvar vm = new Vue({el:"#app",data:{msg:"  This is a function of horse race lamp.  ",bgtitle:"Press this button, the function will begin.",stptitle:"Press this button, it will stop.",intervalId:null //定义定时器id},methods:{bgfc:function(){//console.log(this.msg)//var _this=this;if (this.intervalId!=null) return;this.intervalId = setInterval(()=>{// 用intervalId记录每次新建的定时器的id//setInterval(function(),time) 定时器var start = this.msg.substring(0,1)var end = this.msg.substring(1)this.msg= end + start}, 400)},stpfc(){clearInterval(this.intervalId)  //给定id，清除定时器this.intervalId=null}}})</script>
</body>
</html>

6.v-on事件修饰符

V模块，元素为包含关系，触发事件时，无事件修饰符时先执行触发的元素所绑定的事件，再依次执行其上一层（包含它的元素）所绑定的事件。

.stop //先执行其绑定的事件，将这种依次触发的传递终止。

.prevent //阻止元素自身功能(按钮功能，链接功能)，不阻止绑定的事件触发，也不阻止传递

.capture //外层元素设置capture后产生个监听器，内层元素触发后，先执行监听器，即先执行外层所绑定事件

.self //只有元素自身触发时才执行其绑定事件，不影响其内层和外层元素的触发传递

.once //只执行一次元素所绑定的事件，可和其它修饰符连用，使其它修饰符的功能也只执行一次

<!DOCTYPE html>
<html lang="en">
<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>Day1_6_v-on事件修饰符</title><script src="../lib/vue-2.4.0.js"></script><style>.inner1{height: 150px;background-color: darkblue;}.inner2{height: 100px;background-color:darkcyan;}.inner3{height: 50px;background-color:darkgoldenrod;}</style>
</head>
<body><div id="app"><div class="inner1" @click="divcli"><input type="button" value="按钮" @click.stop="btncli"></div><a href="https://www.baidu.com" @click.prevent="htmlcli">访问百度</a><div class="inner2" @click.capture="divcli"><input type="button" value="按钮"  @click="btncli"></div><div class="inner3" @click.self="divcli"><input type="button" value="按钮"  @click="btncli"></div><a href="https://www.baidu.com" @click.prevent.once="htmlcli">百度</a></div><script>var vm = new Vue({el:"#app",data:{},methods:{btncli(){console.log("Button is clicked")},divcli(){console.log("Div is clicked");},htmlcli(){console.log("Html is clicked");}}})</script>
</body>
</html>
<!-- .stop -->
<!-- .prevent -->
<!-- .capture -->
<!-- .self -->
<!-- .once -->

7.v-model及简易计算器

v-model是vue中唯一实现数据双向绑定的插值表达式，只可用于表单元素

<body><div id="app"><input type="text" v-model="a"><select v-model="opt"><option value="+">+</option><option value="-">-</option><option value="*">*</option><option value="/">/</option></select><input type="text" v-model="b"><input type="button" value="=" @click="cal"><input type="text" :value="c"></div><script>var vm = new Vue({el: "#app",data: {a: null,b: null,c: null,opt: '+',secret:"This is a secret"},methods: {cal() {switch (this.opt) {case "+":this.c=parseFloat(this.a)+parseFloat(this.b);break;case "-":this.c=parseFloat(this.a)-parseFloat(this.b);break;case "*":this.c=parseFloat(this.a)*parseFloat(this.b);break;case "/":if (this.b==0) this.c="Divisor can't be 0."else this.c=parseFloat(this.a)/parseFloat(this.b);break;}}}})</script>
</body>

eval(str) //可将字符串str中内容当做代码执行

因此可以用以下代码实现上代码的功能：

cal() {var str="parseFloat(this.a)"+this.opt+"parseFloat(this.b)"this.c=eval(str)}

当eval可能被恶意利用，应尽量少用

8.eval的风险Bug

以简易计算器代码为例，稍作修改

eval则有可能被恶意利用

<!DOCTYPE html>
<html lang="en">
<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>Day1_8_evalBug</title><script src="../lib/vue-2.4.0.js"></script>
</head>
<body><div id="app"><input type="text" v-model="a"><select v-model="opt"><option value="+">+</option><option value="-">-</option><option value="*">*</option><option value="/">/</option></select><input type="text" v-model="b"><input type="button" value="=" @click="cal"><input type="text" :value="result"></div><script>var vm = new Vue({el: "#app",data: {a: null,b: null,result: null,opt: '+',secret: "This is the secret."},methods: {cal() {var str = "this.result=" + this.a + this.opt + this.beval(str)}}})</script>
</body>
</html>

当输入 this.b=this.secret 时，则可读取代码中secret的内容

9.属性绑定class类样式和style行内样式

1).class类样式

在style中提前设定好样式

<style>.red{color: red}.thin{font-weight: 200}.italic{font-style: italic}.space{letter-spacing: 1em}</style>

在data中设定所需变量及class的对象

data:{spac:true,clr:true,classObj6:{'red':true,'thin':false,'italic':false,'space':true}},

在V中以class类来给内容添加样式

<div id="app"><h1 class="red thin italic">This is a sentence.</h1><!-- 直接引用style中的样式 --><h2 :class="['thin','italic']">This is sentence 2.</h2><!-- 引用一个class数组，数组中包含style中的样式，要用v-bind绑定 --><h3 :class="['thin','italic',spac?'space':'']">This is sentence 3.</h3><!-- class数组中的样式可以添加三元运算符 --><h4 :class="['thin','italic',{'red':clr}]">This is sentence 4.</h4><!-- class数组中用{}将样式元素扩起时，可用一个bool变量标注样式否使用 --><h5 :class="{'red':true,'thin':false,'italic':false,'space':true}">This is sentence 5.</h5><!-- 用{}可扩起多个样式 --><h6 :class="classObj6">This is sentence 6.</h6><!-- 可将样式数组或{}放在data中，用一个样式对象表示，可直接用v-bind调用 --></div>

2).style行内样式

不提前在style中设定好样式，直接在使用样式的具体内容（字体、颜色等的格式）

可先在data中，设定好对象专门记录格式

data:{styleObj1:{'color':'blue','font-size':'30px'},styleObj2:{'font-weight':'20'}},

在V中直接设定style的具体格式

<div id="app"><h1 :style="{'font-size':'20px','color':'red'}">This is sentence 1.</h1><!-- {}可以包含多个格式，但要用v-bind绑定 --><h2 :style="styleObj1">This is sentence 2.</h2><!-- 设定style格式对象 --><h3 :style="[styleObj1,styleObj2]">This is sentence 3.</h3><!-- 设定style 格式对象的数组 --></div>

10.v-for

循环普通数组

<body><div id="app"><div v-for="item in list">{{item}}</div><!-- A in B 格式，B为data中数组对象，A依次循环B中的元素 --><div v-for="(item,i) in list">No.{{i}} is {{item}}</div><!-- (A,C) in B 格式，B为data中数组对象，A依次循环B中的元素，C为A的索引序号 --></div><script>var vm =new Vue({el:"#app",data:{list:[1,2,3,4,5,6]}})</script>
</body>

循环对象数组

v-text缩写{{ }}，可以用于引用data中的数据

<body><div id="app"><p v-for="user in list">{{user.id}}--{{user.name}}</p><!-- 同样 A in B 形式 --></div><script>var vm =new Vue({el:"#app",data:{list:[{id:1, name:'n1'},{id:2, name:'n2'},{id:3, name:'n3'},{id:4, name:'n4'},]}})</script>
</body>

循环对象（其自身键值对）

<body><div id="app"><!-- 在遍历对象身上的键值对时 v-for="(val，key，索引) in B" 依次为内容 键值名 索引序号 --><p v-for="(val, key, i) in user">{{val}}---{{key}}---{{i}}</p></div><script>var vm =new Vue({el:"#app",data:{user:{id:1,name:'Tony',gender:'male'}}})</script>
</body>

迭代数字

<div id="app"><p v-for="i in 10">this is No.{{i}}.</p><!-- A in B 形式， B为循环范围，A为每次循环迭代的值 --></div>

循环中键值key的使用

<label>标签

<label for="某元素的id"></label> 当点击label的内容时，光标会自动跳到它所指向id的元素

<body><div id="app"><div><label for="idtxt">Id:<input type="text" v-model="id" id="idtxt"></label><label for="nametxt">Name:<input type="text" v-model="name" id="nametxt"></label><input type="button" value="添加" @click="add"></div><!-- :key将每个循环的内容绑定唯一的key值，必须用v-bind绑定，key只能使用number或string --><!-- 在组件中使用v-for循环时，若出现问题，必须在使用v-for时指定唯一的字符串/数字 类型的 :key值，
用key值将单次循环的所有内容绑定，使得每次循环的内容能互相区分
这里若无:key="item.id ， checkbox就不会对应item，
添加新元素时，checkbox的状态不会跟随对应item --><p v-for="item in list" :key="item.id"><input type="checkbox">{{item.name}}</p></div><script>var vm= new Vue({el:"#app",data:{id:null,name:null,list:[{id:1,name:'n1'},{id:2,name:'n2'},{id:3,name:'n3'},{id:4,name:'n4'},{id:5,name:'n5'}]},methods:{add(){//this.list.push({id: this.id, name: this.name})// push塞入数组尾部this.list.unshift({id: this.id, name:this.name})// unshift塞入数组头部，塞入对象为{}，{}内输入对象的键值}}})</script>
</body>

11.v-if和v-show

v-if=true/false、v-show=true/false用来表示V模块中元素是否显示，

<body><div id="app"><input type="button" value="button" @click="flag=!flag"><!-- v-if 每次都会重新删除或创建元素 --><!-- v-show 每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式 --><!-- v-if 较高切换性能消耗 --><!-- v-show 较高初始性能消耗 --><!-- 若频繁切换用v-show，若可能永远也不会被显示出来用v-if --><h1 v-if="flag">This is v-if</h1><h1 v-show="flag">This is v-show</h1></div><script>var vm = new Vue({el:"#app",data:{flag:true}})</script>
</body>

以上是初学Vue第一天所学的内容

学习参考：

https://www.bilibili.com/video/av50680998/?p=21