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>
// VM
var vm = new Vue({
el:'#app',
//M
data:{
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", //操作区域id
data:{ //定义数据
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表示vm
var 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.b
eval(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第一天所学的内容
学习参考：
449
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
