Vue.js基础教程

一、简单介绍

是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

二、优点

三、安装与部署

直接script标签引入
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
通过NPM下载
$ npm install vue
通过命令行工具(CLI)
Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本

四、创建第一个vue应用

<html>
	<head>
	<meta charset="utf-8">
	<title></title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>   //这里用cdn的地址引入vue
	</head>
	<body>
		<div id="app">
	  	{
  
  { message }} {
  
  {name}}    //引用message和name变量，这个{
  
  {}}是插值表达式
		</div>
	
	<script type="text/javascript">
		var app = new Vue({       //只要引入vue.js就会产生一个Vue函数，这里通过new创建了一个vue实例应用对象app
			el: '#app',          	//挂载点 id为app的元素
			data: {                  //数据管理
				message: 'Hello Vue!',
				name : "Vue"
			}
		});
	</script>
</body>
</html>

五、挂载点（el）

针对上述的简单例子，我们不禁会有几个关于挂载点的小问题？

1. Vue实例的作用范围是哪个呢？

 答：Vue会管理el选项命中的元素及其内部元素

2. 是否可以使用其他选择器？

答：可以使用其他选择器，但是建议使用id选择器

3. 是否可以设置其他的Dom元素呢？

答：可以使用其他的双标签，但是记住，不能挂载到html和body标签上，会报错

六、data数据对象

Vue中用到的数据定义在data中，data可以写复杂类型的数据，渲染复杂类型的数据时，只要符合js预发即可

七、Vue常见指令（即元素内部的属性）

v-text

1、v-text的作用是：设置标签的文本内容（textContent）
2、默认写发会替换掉全部的文本内容，如果想要实现局部替换，则使用插值表达式的形式{
{}}
3、例子：<div v-text='message'></div> //data中的message属性值会插入到div中作为其文本内容

v-html

1、用法和v-text相似，作用是：设置元素的innerHTML
2、区别就是v-text只会解析文本内容，然后插入到对应元素内部，但v-html如果引用的值是一个html标签结构的，v-html就会将其解析成html，然后插入到对应元素内部

v-on

v-on是为元素绑定事件的，它有一种简写方式@（v-on：===@），事件写在与el、data同级的methods对象中

这里还要提到一个事件修饰符（.修饰符），事件后面跟上.修饰符可以对事件进行限制，举个例子，@.entry=“xxx”,这样写只有按entry键才能触发xxx函数

v-show

它是用来控制元素的显示状态，它的本质是修改元素的display，实现显示隐藏，指令后面的内容最终都会解析为布尔值

v-if

它也是用来控制元素的显示状态，它的本质是通过操纵dom元素来切换显示状态，表达式为true时，元素存在于dom树中，false时从dom树中移除

v-bind

作用：为元素绑定属性，完整写法v-bind：属性名，简写：直接省略v-bind，直接：属性名
注意：它只能实现数据的单向绑定，只能从M(model)->V(vi)

v-for

作用：根据数据生成列表结构，数组经常和v-for一起使用，预发是（item,index）in 数组数据，item和index可以结合其他指令一同使用

v-model

该指令可以实现表单元素和Model中数据的双向绑定，但是要注意，它只能用在表单元素中（input、select、checckbox、textarea这些）

Demo：inout中输入改变，也会同步影响data中的值，值改变了也会同步影响第一行引用message的显示

八、vue中使用样式

1.使用class类名样式

2.使用内联样式

九、过滤器

vue中允许你自定义过滤器，用于一些常见文本的格式化，它只能用于两个地方插值表达式（{
{}}）和v-bind表达式中，一般分为两种（私有和全局）

9.1、全局过滤器

定义方式：

Vue.filter('过滤器名称',function(data){      //直接用Vue来定义filter，所有的实例对象都能用
	return "新的处理后的内容"
})

调用方式：

{
  
  { name | 过滤器名称 }}    //这段代码的意思就是说，原先引用的是name变量的值，他会经过过滤器的处理，返回的新的结果作为此处的最终结果

注意：调用过滤器的时候还可以给过滤器传参，放到过滤器定义时的函数的第二个形参位置，因为第一个默认是过滤器 | 符号前的变量值

9.2、私有过滤器

定义方式：

const vm2 =new Vue({
	el:"#app",
	data:{...}
	methods:{...}
	filters:{
		过滤器名称：function(){
			....
		}
	}
})

调用方式： 同上。。。

十、自定义指令

10.1、全局自定义指令

定义方式：


Vue.directive('自定义指令名称'，{
	bind:function(el){...}       // 每当指令绑定到元素上时会立即执行该函数，只执行一次，但此时还没插入到DOM树中
	inserted:function(el){...}   //元素插入到DOM中时执行，只执行一次
	update:function(el){...}    //所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新
	componentUpdated：function(){...}  //指令所在组件的 VNode 及其子 VNode 全部更新后调用。
	unbind：function(){...}   //只调用一次，指令与元素解绑时调用。
})

//每个函数中的第一个参数永远是el，表示被绑定了指令的那个元素

使用方式：

在你绑定的元素上用v-加上你自定义的指令名称：<input v-focus>

10.2、私有自定义指令

定义方式：

directives: {          //也是和上述定义私有过滤器一样写在实例的directives属性中
  focus: {
    bind:function(el){...}       
	inserted:function(el){...} 
	update:function(el){...}  
  }
}

10.3、钩子函数参数

指令钩子函数会被传入以下参数：

el：指令所绑定的元素，可以用来直接操作 DOM。
binding：一个对象，包含以下 property：

name：指令名，不包括 v- 前缀。
value：指令的绑定值，例如：v-my-directive=“1 + 1” 中，绑定值为 2。
oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
expression：字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中，表达式为 “1 + 1”。
arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 “foo”。
modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

除了 el 之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行。

10.3、函数简写

在很多时候，你可能想在 bind 和 update 时触发相同行为，而不关心其它的钩子。比如这样写：

Vue.directive('color-swatch', function (el, binding) {     //直接在定义指令后跟函数，而不是上面的对象
  el.style.backgroundColor = binding.value
})

十一、vue实例的生命周期

11.1、创建期间的生命周期

beforeCreate
created
beforeMount
mounted

11.2、运行期间的生命周期

beforeUpdate
updated

11.3、销毁期间的生命周期

beforeDestroy
destroyed

十二、Vue过渡&动画

12.1、使用过渡类名实现动画

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- <script src="vue.js" type="text/javascript" charset="utf-8"></script> -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<style>           //直接定义两个不同阶段的类名来控制实现动画
		.v-enter,.v-leave-to{        
			opacity: 0;
		}
		.v-enter-active,.v-leave-active{
			transition: all 1s ease;
		}
	</style>
</head>
<body>
	<div id="app">
	  <input type="button" value="点我" @click="flag=!flag"/>
	  
	  <transition >      //transition标签是vue官方提供的，将要动画的元素包裹住
		  <div v-if="flag">你好</div>
	  </transition>
	 
	</div>
	
	<script type="text/javascript">
	var app = new Vue({
		el: '#app',
		data: {
			flag : false
		}
	});
	</script>

</body>
</html>

12.2、自定义动画的类名前缀（v-）

	<style>      
		.my-enter,.my-leave-to{ //这里的类名前缀就不用写v-,和transition中name属性值保持一致
			opacity: 0;
		}
		.my-enter-active,.my-leave-active{
			transition: all 1s ease;
		}
	</style>

	<transition name="my">    //给transition标签添加一个name属性来自定义动画类名前缀
		<div v-if="flag">你好</div>
	</transition>

十三、组件

13.1、什么是vue组件：

vue中的组件的出现是为了拆分Vue实例的代码量的，能够让我们以不同的组件来划分不同的功能

13.2、创建组件的方式

方式一（全局组件）

<body>
	<div id="app">
	 <!-- <input type="button" value="点我" @click="flag=!flag"/>
	  
	  <transition >
		  <div v-if>你好</div>
	  </transition> -->
	  <my-com1 />   //直接用标签的形式使用自定义组件
	 
	</div>
	
	<script type="text/javascript">
		
	// 使用Vue.extend()来创建全局的vue组件
	const com1 =Vue.extend({
		template:"<h1>哈哈哈啊哈哈哈</h1>"   //通过template属性指定组件要展示的html结构
	})	
	
	Vue.component('myCom1',com1)   //用Vue.component定义全局组件，第一个参数是自定义组件名称，第二个是刚创建出来的组件模板对象
	
	var app = new Vue({
		el: '#app',
		data: {
			flag : false
		}
	});
	</script>
</body>

注意：如果在定义组件的时候，写的自定义组件名称是驼峰形式的，如上面那样，那么你在调用组件时要小写并以-连接，如果没有驼峰形式的，直接原样调用即可

方式二（全局组件）

	//直接在组将注册方法中，第二个参数中传入一个对象，template属性还是一样定义组件的html结构
	
	Vue.component('myCom1',{
		template:"<h2>12312312312321</h2>"
	})

缺点：html结构如果有嵌套，这样写成字符串形式太麻烦了，不便于开发书写

方式三（全局组件）

	<div id="app">
	  <my-com1 />   //直接用标签的形式使用自定义组件
	</div>
	
	//直接在控制元素外面定义个模板，这样便于开发者书写，有提示
	<template id="temp">
		<div>
			<h1>
				1111
			</h1>
			<span>
				2222
			</span>
		</div>
	</template>
	
	Vue.component('myCom1',{
		template:"#temp"   //template原先的手写字符串替换成外面定义的模板元素，id要一致
	})

方式四（私有组件）

	//定义组件模板接口
	<template id="temp">
		<div>
			<h1>
				1111
			</h1>
		</div>
	</template>
	
	var app = new Vue({
		el: '#app',
		data: {
			flag : false
		},
		components:{     //私有组件还是在实例对象中添加components属性
			组件名称:{
				template:"#temp"
			}
		}
	});

13.3、组件中的data

	<template id="temp">
		<div>
			<h1>{
  
  {name}}</h1>    //调用组件自身的data数据，调用方式和实例的data一样
		</div>
	</template>
	
	<script type="text/javascript">
	
	Vue.component('myCom1',{
		template:"#temp",
		data:function(){    //可以在组件注册时声明data属性，这个data必须是一个函数，而且必须返回一个对象
			return{
				name:'haha'
			}
		}
	})

13.4、实现组件中切换

//component是Vue的一个占位符，：is属性用于确定要展示的组件名称
//如果要实现不同条件下展示不同的组件，只需要变量控制:is后面的值即可

<component :is="'myCom1'"></component>

13.5、组件间传值

父组件向子组件传值

//父组件上用属性绑定的方式（v-bind）给子组件传递数据
<div id="app">                          //这里实例控制的div相当于父组件
	<com1  v-bind:parentData="msg"/>    //这个msg是父组件data中的数据
</div>

<script>
	var app = new Vue({             
		el: '#app',
		data: {
			msg: false    
		},
		components:{
			com1:{
				template: '<h1> {
  
  { parentData }} </h1>'      //定义后这里才能使用
			}
		}，
		props：[ ' parentData' ]   //要使用父组件传的数据，需要在props的数组中定义下
	});
</script>

注意：props中的数据是只读的，而组件自身内部的data是可读可写的

父组件向子组件传递方法

<div id="app">                 
	<com1  v-on:focus="show"/>    //通过事件绑定方式去传递父组件的show方法，简写	@focus
</div>

<template id="haha">
	<input type="button" @click ='myClick'>点我</input>  //子组件点击时调用自身的方法myClick
</template>

<script>
	var app = new Vue({             
		el: '#app',
		data: {
			msg: false    
		},
		components:{
			com1:{
				template: '#haha'   
				methods:{
					myClick(){             //通过$emit触发父组件穿过来的方法focus
						this.$emit('focus')
					}
				}
			}
		}，
		methods：{
			show(){
				console.log(1111)
			}
		}
	});
</script>

子组件向父组件传递数据

<div id="app">                 
	<com1  v-on:focus="show"/> 
</div>

<template id="haha">
	<input type="button" @click ='myClick'>点我</input>  //子组件点击时调用自身的方法myClick
</template>

<script>
	var app = new Vue({             
		el: '#app',
		data: {
			msg: false    
		},
		components:{
			com1:{
				template: '#haha'   
				methods:{
					myClick(){          //调用父组件传过来的方法的同时还可以向父组件传递数据
						this.$emit('focus'，2222,3333)
					}
				}
			}
		}，
		methods：{
			show(val1,val2){              //父组件中通过函数形参来拿到子组件传递过来的数据
				console.log(val1,val2)    // 输出 2222,3333
			}
		}
	});
</script>

13.6、通过ref获取dom元素和组件引用

直接在想要获取的dom元素和组件上写上ref属性，获取通过this.$refs就能获取，这样就不用操作dom就你能获取对应元素了

十四、路由（vue-router）

14.1、安装

1、直接下载 / CDN

https://unpkg.com/vue-router/dist/vue-router.js

Unpkg.com 提供了基于 NPM 的 CDN 链接。上面的链接会一直指向在 NPM 发布的最新版本。你也可以像 https://unpkg.com/vue-router@2.0.0/dist/vue-router.js 这样指定版本号或者 Tag。

在 Vue 后面加载 vue-router，它会自动安装的：

<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script>

2、NPM下载安装

npm install vue-router

如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

14.2、使用

1、导入包文件

<script src="./lib/vue-router-3.0.1.js"></script>

2、定义不同组件

const login ={
	template:"<h1>我是登录组件</h1>"
}

const register={
	template:"<h1>我是注册组件</h1>"
}

3、创建路由对象，当导入vue-router包文件后，在全局window对象中就会有一个路由构造函数，叫做VueRouter，在new的时候可以给构造函数传递一个配置对象

const routerObj =new VueRouter({
	routes:[             //路由规则
		{path:'/login',component:login},
		{path:'/register',component:register}
	]
})

4、关联实例，注册路由对象

const vm =new Vue({
	el:"#app",
	data:{},
	methods:{},
	router:routerObj     //将路由对象注册到实力上，用来监听url地址，然后展示对应的组件
})

5、在视图层（实例关联的元素上占位，用于显示路由匹配的组件）

<div id="app">                 
	<router-view></router-view>  //这是vue-router提供的标签，专门用来占位的，将来路由匹配到的组件就会放到这里显示
</div>

14.3、router-link的使用

以前用自己写的a标签超链接实现路由跳转

<a href=“#/login” >跳转登录组件</a>
<a href=“#/register” >跳转注册组件</a>

vue-router有提供一个router-link标签，默认渲染为a标签

<router-link to=“/login” >跳转登录组件</router-link>
<router-link to=“/register”” >跳转注册组件</router-link>

14.4、redirect重定向的使用

// 通常用于初始的根目录的重定向
routes:[  
	{path:'/',redirect: "/login"}    
	{path:'/login',component:login},
	{path:'/register',component:register}
]

14.5、路由传参

1、使用query（查询字符串）方式传递参数

<router-link to=“/login?age=123” >跳转登录组件</router-link>

注意：这种方式传递参数不需要修改路由匹配规则，如果你要拿到传递的参数，可以在组件内部通过this.$route.query组件实例上获取

2、使用params方式传递参数

<router-link to=“/login/123” >跳转登录组件</router-link>   //这边直接按匹配规则来传参

routes:[      
	{path:'/login/：id',component:login},  //这边路由匹配规则中通过占位符来匹配对应路由参数
]

注意：如果想要得到传递的id：123，可以通过this.$route.param获取

14.6、路由嵌套

//如果想要再login登录组件中又生成一个二级路由/login/account1和/login/account2

const router= new UseRouter({
	routes:[
		{ 
			path:'/login',
			component:login,
			children:[    //需要在一级路由的children属性中定义路由规则
				{ path:'account1',component:account1 }, 
				{ path:'account2',component:account2 }
			]
		}
		{ path:'/register',component:register}
	]
})

14.7、使用命名视图实现经典布局（头部+侧边栏+主体）

//视图区还是设置3个坑来显示，但是使用name属性说明这个坑就只显示对应name的组件
<div id="app">
	<router-view></router-view>
	<router-view name="leftCom"></router-view>
	<router-view name="rightCom"></router-view>
</div>

const header = {
	template:"<h1>我是header组件</h1>"
}
const leftCom= {
	template:"<h1>我是左侧侧边栏组件</h1>"
}
const rightCom= {
	template:"<h1>我是主体区组件</h1>"
}

const router =new VueRouter({
	routes:[
		{path:"/",components:{     //这里的路由规则中匹配到/时可以同时显示多个组件，每个组件有key，要和视图区的坑的name对应
			"default":header,
			"leftCom":leftCom,
			"rightCom":rightCom
		}}
	]
})

//布局的样式文件忽略。。。。。

十五、实例属性-watch

1、使用watch来监听data中变量的变化

//通过点击事件来改变data中的flag变量值，用watch来监听flag的值
<body>
	<div id="app">
	  <button type="button" @click="change">点我改变</button>    
	  <h1>{
  
  {flag}}</h1>
	</div>
	
	<script type="text/javascript">
	
	
	var app = new Vue({
		el: '#app',
		data: {
			flag: false
		},	
		methods:{
			change:function(){
				this.flag=!this.flag
			}
		},
		watch:{       //data中的flag变量值变了，会触发该函数
			flag:function(){
				console.log("flag发生改变了")
			}
		}
	});
	</script>
</body>

2、watch监听路由地址的变化

watch：{
	‘$route.path’:function(){      //直接监听$route
		console.log('路由发生改变了')
	}
}

十六、实例属性-computed

在computed中可以定义一些属性，这些属性叫做【计算属性】，计算属性的本质其实是一个方法，只不过我们在使用这些计算属性的时候，是把他们的名称直接当成属性来使用，而不是当做方法去调用

注意：
1、计算属性在引用的时候一定不要加（）去调用，直接把他当成普通的属性（变量）去使用
2、只要这个计算属性内部有用到data中的数据，而且这些data数据发生了改变，就会触发该计算属性（该方法），也就是会立即重新计算这个计算属性的值
3、计算属性的值会被缓存起来，方便下次直接使用
4、在计算属性的函数中一定要return 值

十七、watch、methods、computed之间的区别

computed：属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算属性，主要用作普通属性来使用，而不是方法
methods：方法表示一个具体的操作，主要用来些业务逻辑的
watch：一个对象，键是需要监听的表达式，值是对应回调函数，主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作，可以看作是computed和methods的结合体

十八、页面使用render渲染组件

const login ={
	template:"<h1>我是登录组件</h1>"
}

const vm =new Vue({
	data:{},
	methods:{},
	render:function(createElements){  //createElement是一个方法，调用它，会把指定的组件模板渲染为html结构
		return createElements(login)  
	}
})

注意：这种render方式渲染组件，这个return 返回的组件内容会替换掉上面el挂载的那个元素（整个替换），不想以前那种通过component形式渲染组件，那个只是在对应位置放了一个组件而已，不影响div中其他存在的元素

十九、webpack中导入Vue

1、回顾下，页面中是如何导入Vue的？

//直接通过script标签导入
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

2、webpack中导入Vue

方式一

//先通过npm下载Vue包
npm i vue --save

//然后通过import导入,但是这样的方式导入需要注意，这样导入的vue的构造函数功能并不齐全，只提供了runtime-only的方式，所以如果想要直接import导入，可以通过相对路径去导入对应的完整vue包文件
import Vue from vue   //x
import Vue from "../node_modules/vue/dist/vue.js"  //√，引入完整功能的vue.js文件

方式二

如果我就想直接通过import直接引入怎么办？

import Vue from "vue"  //引入方式不变

但需要在webpack.config.js配置文件中去修改vue包文件的路径，增加resolve属性，vue$的意思是：当遇到vue结尾的文件导入时，去右侧的指定路径去找

二十、webpack页面中导入自定义组件（.vue文件）

1、先单独定义login.vue组件文件

<template>
	<h1> login组件 </h1>
</template>

<script>  //组件的逻辑代码
	.....
</script> 

<style>   //组件样式
	....
</style>

2、页面中导入

import login from './login.vue'

3、由于webpack默认解析不了vue文件格式，所以需要再下载对应的loader

npm i vue-loader vue-template-compiler -S

4、然后再Vue实例中通过render属性渲染组件（webpack中不能用components的方式渲染组件）

今天的文章Vue.js基础教程分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/29161.html

Vue.js基础教程

一、简单介绍

二、优点

三、安装与部署

四、创建第一个vue应用

五、挂载点（el）

六、data数据对象

七、Vue常见指令（即元素内部的属性）

八、vue中使用样式

九、过滤器

9.1、全局过滤器

9.2、私有过滤器

十、自定义指令

10.1、全局自定义指令

10.2、私有自定义指令

10.3、钩子函数参数

10.3、函数简写

十一、vue实例的生命周期

11.1、创建期间的生命周期

11.2、运行期间的生命周期

11.3、销毁期间的生命周期

十二、Vue过渡&动画

12.1、使用过渡类名实现动画

12.2、自定义动画的类名前缀（v-）

十三、组件

13.1、什么是vue组件：

13.2、创建组件的方式

13.3、组件中的data

13.4、实现组件中切换

13.5、组件间传值

13.6、通过ref获取dom元素和组件引用

十四、路由（vue-router）

14.1、安装

14.2、使用

14.3、router-link的使用

14.4、redirect重定向的使用

14.5、路由传参

14.6、路由嵌套

14.7、使用命名视图实现经典布局（头部+侧边栏+主体）

十五、实例属性-watch

十六、实例属性-computed

十七、watch、methods、computed之间的区别

十八、页面使用render渲染组件

十九、webpack中导入Vue

二十、webpack页面中导入自定义组件（.vue文件）

相关推荐

发表回复