VUE学习笔记（1）

最新推荐文章于 2024-05-30 13:09:09 发布

小六子666666

最新推荐文章于 2024-05-30 13:09:09 发布

阅读量211

点赞数 2

分类专栏： Vue学习笔记

本文链接：https://blog.csdn.net/qq_40862118/article/details/104241549

版权

Vue学习笔记专栏收录该内容

0 篇文章 0 订阅

订阅专栏

VUE学习笔记（1）

初始VUE，VUE是前端最热门的一款框架，让前端码农们爱不释手，它能够让开发者们留下更多的时间去考虑业务的逻辑，减少很多不必要的操作。

先贴一段VUE的代码来分析下

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>初识VUE</title>
</head>
 
 <!-- 引入vue.js文件 -->
 <script src="../lib/vue.js"></script>
 
<body>
 <div id="app">	      <!-- 此处的id对应Vue对象里边的el（element的简写），示Vue控制这块中的代码 -->
  <p>{{msg}}</p>      <!--前端MVVM中的  V   插值表达式里边的 msg 对应Vue对象中data中的msg的值-->
 </div><script>
  var vm = new Vue({		//前端MVVM中的 VM 
   el:"#app",			//对应上述id为app的div块
   data:{  			//data里边的数据是MVVM中的 M
    msg:"VUE初体验"
   }
  })
 </script>
</body>
</html>

VUE中值绑定几种方式的比较

表达式	描述
{{}}	插值表达式方便，但是有闪烁问题`标注1`，可追加，不能够渲染HTML标签
v-text	方便但是不能够追加，不能够渲染HTML标签
v-html	能够渲染HTML标签

属性值的绑定标签:v-bind: | :
第2点是对显示值的绑定使用，v-bind:是对HTML标签的属性的值进行绑定，例如：

<input v-bind:type = "typeValue"> | <input :type = "typeValue">	//typeValue对应Vue对象中data中的typeValue(=>submit)  
//相当于
<input type = "submit">

<script>
  var vm = new Vue({  //前端MVVM中的 VM 
   el:"#app",   //对应上述id为app的div块
   data:{     //data里边的数据是MVVM中的 M
    msg:"VUE初体验",
    typeValue:"submit"
    }
  })
 </script>

事件的绑定标签：v-on: | @(Vue提供的事件绑定机制)
这个标签是给HTML标签绑定事件，减少了开发者对于DOM的操作，例如：

<input type = "button" v-on:click = "methodName" value="点击">	//使用v-on：click 表示给按钮加了一个点击事件，methodName对应Vue对象中的methosd中的methodName方法
<script>
  var vm = new Vue({  //前端MVVM中的 VM 
   el:"#app",   //对应上述id为app的div块
   data:{     //data里边的数据是MVVM中的 M
    msg:"VUE初体验",
    typeValue:"submit"
   },
   methods:{
  	methodName:function(){
		alert("点击了我~");
	}
   }
  })
  </script>

解决问题：

1.解决标注1：

这个闪烁问题是插值表达式：{{}} 的一个问题，解决这个闪烁我们就需要用到另一个标签v-cloak，解决方式如下：



<div id = "app">
	{{msg}}
</div>

<script>
     var vm = new Vue({  //前端MVVM中的 VM 
      el:"#app",   //对应上述id为app的div块
      data:{     //data里边的数据是MVVM中的 M
            msg:"VUE初体验",
       	 typeValue:"submit"
      },
      methods:{
      	methodName:function(){
     		alert("点击了我~");
    	}
      }
     })
</script>

****上述代码会因为网速等的原因出现闪烁现象，解决方式如下************
//加上这段CSS代码以及在标签中加上`v-cloak`就可以解决闪烁问题了
<style>
   [v-cloak]{
   	display:none;
   }
</style>

<div id = "app" v-cloak >
 {{msg}}
</div>

<script>
  var vm = new Vue({  //前端MVVM中的 VM 
   el:"#app",   //对应上述id为app的div块
   data:{     //data里边的数据是MVVM中的 M
         msg:"VUE初体验",
      typeValue:"submit"
   },
   methods:{
    methodName:function(){
    alert("点击了我~");
  }
   }
  })
</script>

一个小栗子（跑马灯的效果，大家可以尝试尝试）：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>初识VUE</title>
</head>
 
 <!-- 引入vue.js文件 -->
 <script src="../lib/vue.js"></script>
 
<body>
 <div id="app">
  <input type="button" value="跑起来" @click="start">
  <input type="button" value="驭~" @click= "stop">
  <p>{{msg}}</p>      <!--前端MVVM中的  V-->
 </div>
 
 
 <script>
  //前端MVVM中的 VM 
  var vm = new Vue({
   el:"#app",
   data:{  //data里边的数据是MVVM中的 M
    msg:"VUE初体验",
    Interval:null
   },
   methods:{
    start(){
     if(this.Interval != null) return;
     this.Interval = setInterval( () => {
      var star = this.msg.substring(0,1);
      var end = this.msg.substring(1);
      this.msg =  end + star ;
      console.log(this.msg)
     },400)
    },
    stop(){
     clearInterval(this.Interval);
     this.Interval = null ;
    }
   }
  })
 </script>
</body>
</html>

小六子666666

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
VUE学习笔记（1）

VUE学习笔记（1）初始VUE，VUE是前端最热门的一款框架，让前端码农们爱不释手，它能够让开发者们留下更多的时间去考虑业务的逻辑，减少很多不必要的操作。先贴一段VUE的代码来分析下<!doctype html><html><head><meta charset="utf-8"><title>初识VUE</t...
复制链接

扫一扫