vue.js入门

最新推荐文章于 2024-08-22 14:32:34 发布

chp_mdd兔崽

最新推荐文章于 2024-08-22 14:32:34 发布

阅读量188

点赞数

分类专栏：编程大白文章标签： javascript

本文链接：https://blog.csdn.net/qq_37391017/article/details/104734768

版权

编程大白专栏收录该内容

134 篇文章 1 订阅

订阅专栏

起步：

el参数可以获取id或者class.

vue.js一个节点对应一个vue实例，根据需要来实例化vue对象。

vue.js的指令：以v-开头，

v-cloak指令：

使用方法：

或者也可以采用css的写法：

也可以采用v-text写法避免源码加载的情况，因为这样子不需要写模板输出{{msg}},这个源代码没有出现，也就是不用插值表达式，自然做到了避免源代码加载的情况：

v-bind,将对应标签的属性给标签绑定上，绑定的值是date内定义的值。还可以简写，直接在属性前加个冒号，不用写v-bind，比如：

这个title是原本的html的属性，而里面的title其实是个值，vm中date定义好的。

v-on指令，绑定事件，事件类型：click点击事件等等：

这就绑定了点击事件，里面的发f1函数要在vm的methods自定义好。

v-on的简写：可以用@代替v-on：,注意别多写了冒号。

v-if和v-show指令：两者都可以控制元素的显示/隐藏，但原理不同，v-if是等于将元素代码注释掉，而show是像原来的原生JS上加上了display：none

v-for指令：

定义vue.js数组:

只输出数组元素：

输出数组以及索引：

循环打印一组对象数组：

由于是对象，所以插值表达式就要写出对象中的属性名。

打印对象：

最好写循环的时候绑定一个key属性：这个东西可以标识该数据唯一，这样做是以防止出错，对页面无影响。

循环还可以使用函数传值的写法：

<ul class="ul">
	<li v-for="num in fun(list)">{{num}}</li>  
    <!--这里list会先被解析成具体的值，然后当作参数传入函数中-->
</ul>


<script type="text/javascript">
	new Vue({
		el:'.ul',
		data:{
			list:1     这个list先被解析
		},
		methods:{
			fun:function test(t){
				var list=['1','2','3',t];
				return list;
			}
		}	
	})
</script>

vue.js事件修饰符：

stop和self用于阻止事件冒泡，once是让事件只执行一次，prevent是阻止默认行为触发，如a标签的默认行为跳转不会触发。

具体参考博客：https://blog.csdn.net/weixin_44797182/article/details/100106814

事件双向绑定指令：v-model,v-bind指令的改变是单向的，意思是，vue实例化定义好的内容msg，然后模板使用插值表达式渲染出来就是meg的内容，这种改变是单向的，而v-model，可以使得页面内容的改变影响到msg的值，v-model只能用于表单,别的标签不能用这个属性,所以双向绑定特别适合表单输入。

v-model:value=""可以直接简写成v-model=""

vue.js使用css样式：

第一种方法：将样式传入下图的数组，写成数组元素的形式，注意加上单引号，否则，编译会认为是date中的字段。

第二种使用：

这种方式能够直接控制某个样式显示与否。注意对象使用的是”:“号

第三种方式：

样式内嵌式使用方法：

注意，当属性名是有横杠比如图中的font-size这种，一定要用单引号包起来，是硬性规定。

使用多样式组合时，一定要用数组写法：

生命周期：

PS：控制台里边的数据是以前的，注意调试一定要注意控制台，因为往往页面输出的都是最终结果，控制台才是反映执行阶段的真实值

最常用到的生命周期函数：created mounted updated

过渡动画：使用transition标签包裹着要执行动画的代码块：

解释下这些状态：

v-enter与v-leave-to是一对相同表现的状态，它们都定义一个透明级别的状态，只不过enter表示元素的显示属于起始状态，leave表示元素的消失，属于最终状态。

v-enter-active:可以定义元素过渡效果，这里可以设置各种过渡函数来达到动画效果，表示元素显示过程中的状态

v-leave-active:同样是可以定义元素过渡效果，这里可以设置各种过渡函数来达到动画效果，只不过和enter-active不同的是它表示元素离开/消失过程中的状态。

v-enter-to与v-leave是一对:表示元素显示后的最终状态或者准备离开/消失的起始状态

引入第三方css库 animate 结合过渡动画：

引入了类库后，可以在需要执行的过渡指令（一定要写出需要的对应的过渡指令）中写入，比如要在过渡过程中使用一个CSS库的类，就这样写，这里拿第三方animate库举例：enter-active-class="animated （空格）类名"。

自定义类名，为了区别和使用不同的动画效果：

将原来指令的v-前缀替换为name的值即可

全局组件和私有组件：

写在vue实例外部的叫全局组件，在vue实例内部定义的叫私有组件。

全局组件的定义以及使用：

可以简写：

template的内容是html代码，Vue.component定义好了一个组件，test就是这个组件的名字。然后，这个test以标签的形式写在html上即可。显然test并不是预定义的标签，而是用户自己通过创建组件创建出来的一个新标签。

第三种方式，这种方式适用于封装代码比较多的模块：

调用方式都是一样：

以上所有定义方式都要注意一点，组件的根元素只有一个，因此所有的内容最好事先写在定义好的根元素内，否则一旦出现两个根元素/节点是会报错的。除了根元素，子节点随意。

私有组件，用id等标记的特殊代码块，在此代码块内，不能使用别的私有组件，全局组件是通用的所以不受限制，私有组件的话只能用自身定义好的私有组件。

定义在Vue()里面，跟data,methods是平级的。然后跟全局组件的3中定义方式一样，它们只是创建方式不一样。

组件中的data和methods，注意Vue中的data和methods是对象，而组件中data和methods是方法：

返回的是一个对象，并且该对象用于模板的插值表达式中：下图和上图的msg对应。

组件中的数据输出：

methods使用和Vue实例中的methods使用方法一样。直接使用methods里面的方法。

组件切换：

<div id="app">
	<a href="#" @click.prevent="comName='test1'">我是组件1</a>
	<a href="#" @click.prevent="comName='test2'">我是组件2</a>
	<component :is="comName">
	</component>
</div>

<template id="one">
	<h1>这是组件1</h1>
</template>
<template id="two">
	<h1>这是组件2</h1>
</template>
<script type="text/javascript">
	Vue.component('test1',{
			template:'#one'
		}
	)
	Vue.component('test2',{
			template:'#two'
		}
	)

	new Vue({
		el:'#app',
		data:{
			comName:'test1'
		}
	})
</script>

给data里面的对象comName赋值组件名，然后<component :is="comName">是表明该comName对象是赋值了组件的对象。

PS：<component :is="comName">一定要放在包含着组件切换的div代码块内，否则不起作用，这个标签是用来显示组件的。