使用HbuilderX学习Vue笔记

最新推荐文章于 2025-04-01 09:14:18 发布

SEVEN clock

最新推荐文章于 2025-04-01 09:14:18 发布

阅读量2.2k

点赞数 2

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

本文链接：https://blog.csdn.net/qq_42266891/article/details/102750030

版权

这篇博客详细记录了使用HbuilderX学习Vue的过程，包括HTML页面结构、Vue的指令和生命周期函数，以及组件的使用。重点讲解了Vue中如何定义全局过滤器、指令，实现数据搜索和动画效果。此外，还探讨了Vue实例的生命周期，特别是created、mounted等关键阶段，以及组件化开发的优势。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用HbuilderX学习Vue

从各种视频和书中结合学习。做个笔记温故知新。

html中的页面结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 1.导入vue的包 -->
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<p>{
  {msg}}</p>
		</div>
		<script>
            // 2.创建一个vue的实例
			var vm = new Vue({
    
				el: '#app', 
				data: {
     
					msg: '欢迎学习vue'
				}
                 methods:{
    }//存放自定义的方法
                 directives: {
    }//自定义私有指令
                 filters: {
    
               //定义私有过滤器,过滤器有两个条件  [过滤器名称 和 处理函数]
               //过滤器调用的时候,采用的是就近原则,如果私有过滤器和全局过滤器名称一致了,这时候优先调用私有过滤器
                     msgFormat:function(msg,arg){
    
                         //字符串的 replace 方法,第一个参数,除了可写一个字符串之外,还可以定义一个正则
						return msg.replace(/说/g,arg)+'~~~'
                         }
                 }//自定义私有过滤器
            
			})
		</script>
	</body>
</html>

当我们导入包之后，在浏览器的内存中就多了一个Vue构造函数。注意：我们new出来的这个 vm对象,就是我们MVVM的vm的调度者。

el: '#app', ——表示当前我们new的这个vue实例,要控制页面上的哪个区域
data:{},——这里的data就是mvvm中的m,专门用来保存每个页面的数据的，data属性中,存放得是el中要用到的数据。

如果你会在之后某些时候需要一个属性，但是它一开始不存在或为空的时候，你就需要在data中设置一些初始值，比如：

data: {
   
  	n1: 0,
	n2: 0,
	opt: '+',
    selection:false,
    list:[],
    error:null
}

注意： Vue中所有的指令，在调用的时候，都以 v- 开头。

Vue中的一些用法

<p v-cloak>——v-cloak能够解决插值表达式闪烁的问题。p为一个标签。
<h4 v-text="msg">——默认v-text是没有闪烁问题的，v-text会覆盖元素中原本的内容，但是插值表达式只会替换自己的这个占位符，不会把整个元素内容清空。
<p v-html>——可以让变量变成一个html元素，而不是一个普通的文本。
v-bind:——vue提供的属性绑定机制，缩写"："。v-bind只能实现数据的单向绑定，从M自动绑定到v，无法实现数据的双向绑定。
v-model="自定义事件"——可以实现表单元素和model中数据的双向数据绑定，注意:v-model 只能运用在表单元素中：比如 input(radio,text,address,email…)，select，checkbox，textarea。
v-on:属性="自定义事件"——vue提供的事件绑定机制，缩写’’@’’。在vue中，使用事件绑定机制，为元素指定处理函数的时候，如果加了小括号，就可以给函数传参了比如@click="add()"。
this.intervalid = setInterval( () => {})——定时器。
<p>{ { 1 == 1 ? 'YES' : 'NO' }}</p>——三元表达式。判断？前的布尔值类型。
@click.stop——使用 .stop 阻止冒泡。阻止单击事件继续传播。
@click.prevent——使用 .prevent阻止默认行为。提交事件不再重载页面。
@click.capture——使用 .capture实现捕获触发事件的机制。
@click.self——使用 .self实现只有点击当前元素的时候，才会触发事件处理函数。.self 只会阻止自己身上冒泡行为的触发，并不会真正阻止人家冒泡行为的触发。
@click.prevent.once——使用 . once只触发一次事件函数。例如此处，点击第二次就不会阻止默认行为。证明，修饰符是可以串连的，使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。
<input v-model.lazy="msg" >——’.lazy’修饰符使得v-model在"change"时，而非"input"时更新。
<input v-model.number="age" type="number">—— 如果想自动将用户的输入值转为数值类型，可以给v-model添加’.number’修饰符。即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。
<input v-model.trim="msg">—— 如果要自动过滤用户输入的首尾空白字符，可以给v-model添加 ‘.trim’ 修饰符。
add() { this.list.unshift({ })}——添加方法(添加在数组上方)，使用push({})时，为添加在数组下方。
setTimeout(function(){}, 3000);——3000毫秒后，{}内的值变换到所定义的值。
<p>{ { message.split('').reverse().join('') }}</p>——spilt将信息变成一个数组，reverse将数组元素反序，join重新将排序后的元素形成新的一个数组。
v-for——关于v-for的一些用法：

在组件中，使用v-for循环的时候，或者在一些特殊情况中，如果v-for有问题，必须在使用v-for的同时，指定唯一的字符串/数字类型：key值。以用来保证数据的唯一性。

注意：v-for循环的时候，key属性只能使用 number 获取string

注意：key 在使用的时候，必须使用v-bind 属性绑定的形式，指定 key 的值。

for循环普通数组

<div id="app">
  <p v-for="(item,i) in list" :key = "i">索引值:{
  {i}} --- 每一项：{
  {item}}</p>
</div>
<script type="text/javascript">
	var vm = new Vue({
    
		el:'#app',
		data:{
    
			list:

最低0.47元/天解锁文章