【0】Vue的基础概述

最新推荐文章于 2024-09-14 18:52:56 发布

Youky_

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量162

点赞数

分类专栏： Vue 文章标签： javascript vue.js es6 html5 前端

本文链接：https://blog.csdn.net/qq_43882506/article/details/106431909

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

什么是Vue

Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合
这是官网给出的介绍，可能不是那么容易理解。简单来说，Vue是一个视图层框架，帮助我们更好的构建应用。

使用Vue和原生JS一个最显著的差别就是，Vue不再对DOM直接进行操作，而是通过对数据的操作，来改变页面。使用Vue构建的页面，是有一个个的组件组成的，当组件中定义的数据发生变化时，组件的显示也会跟着变化，且此过程无需刷新页面。

如何用Vue构建一个页面

下面，我会用一个非常简单的demo演示一下Vue中组件的常见结构

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="E:\vue.js"></script>
</head>
<body>
	<div id='box'>
		<test></test>
		<try></try>
	</div>
	<script>
		var test={
			props:[],
			data:function(){
				return{
					X:'hello'
				}
			},
			template: "<h1 >{{X}}</h1>",
			methods:{
				handleItemClick:function(item){
                	console.log();
                }
			}
		}
		Vue.component('try',{
			template:"<p2>world</p2>"
		})
	var vm=new Vue({
            el:"#box",
            data:{
                text:"",
                list:[]
            },
            components:{
                test:test
            },
            methods:{
                handleBtnClick:function(){
                    this.list.push(this.text);
                    this.text="";
                }
            },
            beforeCreate:function(){},
            computed:{
                x:function(){}
            },
            watch:{
                list:function(){
                	console.log('list change')
                }
            }
        })
	</script>
</body>
</html>

复制这段代码用浏览器打开，如果看到这样的效果，说明运行成功。下面我们分析一下这段代码中的结构运行结果

这段代码一共定义了三个组件，一个根组件vm，一个全局组件try，一个局部组件test

根组件中：
创建组件时传入一个对象作为参数，组件内的各个属性的值也是对象或函数
el表示与DOM的绑定，括号内是一个选择器来选择DOM元素
data中用来定义数据
components中用来注册局部组件
methods中定义函数，当给组件绑定事件时用到的回调函数要在这里定义
beforeCreate是一个生命周期钩子，声明周期钩子有11个，常用的有8个，这里只列一个作为展示
computed是计算属性
watch是侦听器，监视变量的变化

全局组件和局部组件：
区别：局部组件要在跟组件中进行注册，全局组件可以直接使用
子组件中的props用来接收父组件传来的值
子组件中的data的值不是一个对象而是一个函数而不是对象，在函数中返回一个对象
子组件中用到的函数，要在子组件的methods中定义
子组件中的template用来定义模板，这是一段可以复用的HTML代码

以上就是组件中常用的一些结构，这里只是简单的介绍一下。使用Vue的过程，就是基于组件的结构，以及Vue提供的一些指令，对页面完成一系列高效的操作。具体的使用流程，将会在后面继续讲解。