Vue基础之实验篇——学习周记14
Vue基础之实验篇
- 实验1——“平平无奇”？
- 实验2——四种颜色任你选择
- 实验3——指令
- 实验4——计数器
实验1——“平平无奇”？
<html>
<head lang="en">
<script src=" https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
<meta charset="utf-8">
<title>实验1title>
head>
<body>
<div id="container">
<h2>{{msg}}h2>
<button @click="add" style="font-size: large;">clickbutton>
<p v-change="handleClick">文字p >
div>
<script>
//directive
new Vue({
el:'#container',
data:{
msg:'Hello Vue',
colors:['orange','yellow','red','pink'],
order:0
},
methods:{
add:function(){
this.order++;
},
handleClick:function(){
if(this.order==this.colors.length){
this.order=0;
}
return this.colors[this.order];
}
},
directives:{
changes:{
bind:function(el,bindings){
console.log('指令已经绑定到元素了');
console.log(el);
console.log(bindings);
el.style.backgroundColor=bindings.value();
},
update:functioon(el,bindings){
console.log('指令的数据有所变化');
console.log(el);
console.log(bindings);
el.style.bckgroundColor=bindings.value();
},
unbind:function(){
console.log('已经解绑了')
}
}
}
})
script>
body>
html>
【运行效果如图】
实验2——四种颜色任你选择
<body>
<div id="container">
<h2>{{msg}}h2>
<button @click="add" style="font-size: large;">clickbutton>
<p v-change="handleClick">文字p >
div>
<script>
new Vue({
el:'#container',
data:{
msg:'hello',
color:['orange','yellow','red','pink'],
order:0
},
methods:{
add:function(){
this.order++;
},
handleClick:function(){
if(this.order==this.color.length){
this.order=0;
}
return this.color[this.order];
}
},
directives:{
change:{
bind:function(el,bindings){
el.style.backgroundColor=bindings.value();
},
update:function(el,bindings){
el.style.backgroundColor=bindings.value();
},
unbind:function(){
console.log('已经解绑了')
}
}
}
})
script>
body>
html>
【运行效果如图】
点击按钮“click”，后：
再一次点击按钮“click”，后：
又点击了一次按钮“click”，后：
再再再点击按钮“click”，后，“文字”的背景颜色变回最开始的橙色
实验3——指令
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
head>
<body>
<div id="app">
<p>页面载入时，input 元素自动获取焦点：p>
<input v-focus>
div>
<script>
// 创建根实例
new Vue({
el: '#app',
directives: {
// 注册一个局部的自定义指令 v-focus
focus: {
// 指令的定义
inserted: function (el) { //生命周期函数
// 聚焦元素
el.focus()
}
}
}
})
script>
body>
html>
【运行效果如图】
实验4——计数器
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
head>
<body>
<div id="app">
<div id="counter-event-example">
<p>{{ total }}p>
<button-counter v-on:increment="incrementTotal">button-counter>
<button-counter v-on:increment="incrementTotal">button-counter>
div>
div>
<script>
Vue.component('button-counter', {
template: '',
data: function () {
return {
counter: 0
}
},
methods: {
incrementHandler: function () {
this.counter += 1
this.$emit('increment')
}
},
})
new Vue({
el: '#counter-event-example',
data: {
total: 0
},
methods: {
incrementTotal: function () {
this.total += 1
}
}
})
script>
body>
html>
【运行效果如图】
分别点击下面的两个“0”，可观察到：上面的数字“0”随之变动且为下面两个数字之和：
★VUE的学习到这里就差不多啦，敬请期待下一篇更精彩有趣的内容吧★
！喜欢的话不要忘记【一键三连】哦！撒花花啦~