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>

【运行效果如图】
Vue基础之实验篇——学习周记14_第1张图片

实验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>

【运行效果如图】
Vue基础之实验篇——学习周记14_第2张图片
点击按钮“click”,后:
Vue基础之实验篇——学习周记14_第3张图片
再一次点击按钮“click”,后:
Vue基础之实验篇——学习周记14_第4张图片
又点击了一次按钮“click”,后:
Vue基础之实验篇——学习周记14_第5张图片
再再再点击按钮“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>

【运行效果如图】
Vue基础之实验篇——学习周记14_第6张图片

实验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>

【运行效果如图】
Vue基础之实验篇——学习周记14_第7张图片
分别点击下面的两个“0”,可观察到:上面的数字“0”随之变动且为下面两个数字之和:
Vue基础之实验篇——学习周记14_第8张图片
★VUE的学习到这里就差不多啦,敬请期待下一篇更精彩有趣的内容吧★

!喜欢的话不要忘记【一键三连】哦!撒花花啦~

你可能感兴趣的:(VUE,vue,前端)