Vue基础之实验篇——学习周记14

最新推荐文章于 2024-05-05 18:17:26 发布

咸盐月饼

最新推荐文章于 2024-05-05 18:17:26 发布

阅读量591

点赞数 1

分类专栏： VUE 文章标签： vue 前端

本文链接：https://blog.csdn.net/weixin_54919878/article/details/118314841

版权

VUE 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

Vue基础之实验篇

实验1——“平平无奇”？
实验2——四种颜色任你选择
实验3——指令
实验4——计数器

实验1——“平平无奇”？

<!DOCTYPE html>
<html>
	<head lang="en">
		<script src=" https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
		<meta charset="utf-8">
		<title>实验1</title>
	</head>
	<body>
		<div id="container">
			<h2>{{msg}}</h2>
			<button @click="add" style="font-size: large;">click</button>
			   <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;">click</button>
   <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——指令

<!DOCTYPE html>
<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——计数器

<!DOCTYPE html>
<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: '<button v-on:click="incrementHandler">{{ counter }}</button>',
  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>