【Vue使用学习Day1】Day1——vue基础用法+指令+事件修饰符
不是跳过了js是笔记写在本子上了哈哈
第一次用框架感觉很爽很快乐（刚踏入第一脚的萌新都是这样省儿的吗
还有哈，这边不会写一些理论的笔记只是知识点的整理和记录
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Day1——vue基础用法+指令+事件修饰符</title>
<script src="../lib/vue.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<style>
[v-cloak]{
display: none;
}
input {
background-color: #afd0e1;
border-radius: 5px;
}
.color {color: #5f80a0}
.weight {font-weight: 300}
.word {letter-spacing: 0.5em}
</style>
</head>
<body>
<header><h2>Day 1</h2></header>
<div id="box">
<header><h3>基础指令们</h3></header>
<ol>
<!--插值表达式在还未刷新完毕时会被显示，可使用v-cloak配合css将其隐藏-->
<li v-cloak>-----{{ msg1 }}(可以加头和尾巴。)</li>
<!--v-text避免闪烁问题，但会覆写标签内所有内容-->
<li v-text = 'msg2'>--------</li>
<li v-html = 'msg3'></li>
<li>v-bind绑定属性,(当成js代码执行,可再加表达式.)可以省略v-bind只留“:”。</li>
<li>v-on用于事件绑定。可以简写成"@"。如:
<input type="button" value="BUTTON" v-bind:title="mytitle + '加我'" v-on:click = "show">
和<input type="button" value="BUTTON" :title="mytitle + '加我'" @click = "show">
的效果是相同的。<br/>以上的<a href="#horse">跑马灯小例子</a></li>
<li>v-model数据双向绑定。<a href="#calculate">简易计算器</a></li>
<li>v-for循环<ol type="A">
<li>迭代数组<dt v-for="(item,i) in arr">索引：{{i}}---值： {{item}}</dt></li>
<li>迭代对象中的属性(<a href="#fruit">注意key</a>)
<dt v-for="item in objArr" >id: {{item.id}}---name: {{item.name}}</dt></li>
<li>迭代对象<dt v-for="(value, key,i) in obj">{{key}}---值: {{value}}</dt></li>
<!--所有迭代都有索引属性。迭代数字时从1开始迭代(索引不变)-->
<li>迭代数字<dt v-for="(count,i) in 3">索引: {{i}}---数字: {{count}}</dt></li>
</ol></li>
<!--v-if切换性能消耗较高，如若涉及到元素频繁切换则建议不要使用v-if。-->
<li><span v-if="flag">v-if每次都会重新删除或创建元素。</span>
<span><input type="button" value="点我看效果" @click="flag=!flag"></span></li>
<li v-show="flag">v-show使元素style的display为或者不为none。</li>
</ol>
</div>
<script>
var em = new Vue({
el: '#box',
data: {
msg1: '使用插值表达式，用v-cloak避免闪烁。',
msg2: '不使用差值表达式，v-text覆写全部内容。',
msg3: 'v-html可以解析html标签。
',
mytitle: 'v-bind绑定的属性。',
arr: [1,2,3],
objArr: [
/*求求你记住写引号吧！*/
{id: 1,name: 'Arthur'},
{id: 2,name: 'Alfred'},
{id: 3,name: 'Mathew'}
],
obj: {
id: 1,
name: 'Arthur',
gender: '男'
},
flag: true
},
methods: {//定义当前vue实例中所有可用的方法。
show:function () {
alert('Hello!')
}
}
});
</script>
<div>
<header><h3>条件修饰符(可叠加使用)</h3></header>
<ol>
<li>".stop"阻止冒泡。</li>
<li>".prerent"阻止默认事件。</li>
<li>".capture"添加事件监听时使用捕获。</li>
<li>".self"只有时间在元素本身(不是在子元素身上)时触发。</li>
<li>".once"只触发一次。</li>
</ol>
</div>
<div id="style">
<header><h3>通过v-bind为元素设置class（style同理）</h3></header>
<ol>
<li :class="['color','weight']">使用数组</li>
<li :class="['color','weight',boo?'word':'']">数组中使用三目运算符</li>
<li :class="['color','weight',{'word':boo}]">数组中嵌套对象</li>
<li :class="{color:true, weight:true, word:false}">直接使用对象</li>
<!--对象的的属性可带引号也可不带引号。-->
<li :class="classObj1">使用对象改写</li>
<li :class = "[classObj1,classObj2]">使用对象数组改写</li>
<li :style="styleObj">style例子</li>
</ol>
</div>
<script>
var style = new Vue({
el: '#style',
data: {
boo: false,
classObj1: {color:true, weight:true},
classObj2: {word:false},
styleObj: {'color': 'red','font-weight':200}
}
})
</script>
<div id="horse">
<h4>应用1：一个简单的跑马灯效果。</h4>
<input type="button" @click = "start" value="开始">
<input type="button" @click = "end" value="停止">
<p v-text = 'sent'></p>
</div>
<script>
var horse = new Vue({
el: '#horse',
data: {
sent: '一会儿你还会再见到我',
intervalID: null
},
methods: {
start: function () {
if(this.intervalID != null) return;
/*Lambda表达式的this由上下文来确定。*/
this.intervalID = setInterval( () => {
var start = this.sent.substring(0,1);
var end = this.sent.substring(1);
this.sent = end + start;
},100);
},
/*注意这里函数的两种写法*/
end() {
clearInterval(this.intervalID);
this.intervalID = null;
}
}
})
</script>
<div id="calculate">
<header><h4>应用2: 简易计算器</h4></header>
<input type="text" v-model="n1">
<select v-model="opt">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" v-model="n2">
<input type="button" value="=" @click="calc">
<input type="text" v-model="result">
</div>
<script>
var cal = new Vue({
el: '#calculate',
data: {
n1: 0,
n2: 0,
result: 0,
opt: '+'
},
methods: {
calc() {
switch (this.opt) {
case'+':
/*不类型转换会被作为字符串连接*/
this.result = parseInt(this.n1) + parseInt(this.n2);
break;
case'-':
this.result = parseInt(this.n1) - parseInt(this.n2);
break;
case'*':
this.result = parseInt(this.n1) * parseInt(this.n2);
break;
case'/':
this.result = parseInt(this.n1) / parseInt(this.n2);
break;
}
}
}
})
</script>
<div id="fruit">
<h4>应用3: 关于v-for的key</h4>
<input type="text" v-model="id" placeholder="id">
<input type="text" v-model="fruit" placeholder="fruit">
<input type="button" value="添加" @click="add">
<!--使用v-for迭代对象数组要使用key来规定唯一标识值，对data和页面数据进行强制关联。-->
<!--(如果不使用key，v-for可能会出现问题，例如此例中add新条目后checkbox的勾选错位。)-->
<!--v-for循环时，key只能使用number或者string。且key的绑定必须使用v-bind。-->
<p v-for="item in list" :key="item.id">
<input type="checkbox">{{item.id}}---{{item.fruit}}</p>
</div>
<script>
var fruit = new Vue({
el: '#fruit',
data: {
id: '',
fruit: '',
list: [
{id: 1, fruit: '葡萄'},
{id: 2, fruit: '樱桃'},
{id: 3, fruit: '香蕉'},
{id: 4, fruit: '猕猴桃'},
{id: 5, fruit: '香梨'},
{id: 6, fruit: '青梅'},
]
},
methods:{
add() {
this.list.unshift({id: this.id, fruit: this.fruit})
}
}
})
</script>
<a href="#box">回到顶端</a>
</body>
</html>