前端2 Vue（comphonents)+Router+ajax+vue-cli（整合Vue项目）+ElementUI

Java晓姐姐

已于 2024-08-14 16:44:27 修改

阅读量215

点赞数

分类专栏： Java 文章标签： json 前端 vue.js

于 2022-04-28 23:00:05 首次发布

本文链接：https://blog.csdn.net/m0_60323584/article/details/124482773

版权

本文详细介绍了如何从头开始构建一个Vue项目，包括Vue的基础语法、指令、组件、路由、Ajax以及如何使用Vue-cli和ElementUI。通过一步步的实践操作，指导读者完成一个完整的前端项目集成。

摘要由CSDN通过智能技术生成

一.Vue

是一个轻量级的前端框架.封装了HTML CSS JS的代码.
特点:
1, 是一个轻量级的渐进式的框架, 按需配置
2, 实现了数据驱动/双向绑定和组件化的思想(高内聚)
3, vue框架可以避免了DOM的API
4, 遵循了MVVM设计模式,实现前端代码的松耦合
M是Model,是指数据
V是View,是指视图
VM是ViewModel,是指在指定视图里渲染指定数据

1.把vue.js导入到你的项目中

2.创建HTML文件,并引入vue.js

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 vue框架</title>
		<!-- 1.引入vue.js来用vue框架的核心功能 
			src用来指定js文件的位置
		-->
		<script src="vue.js"></script>
	</head>
	<body>
		<!-- 2.准备解析vue的数据 
			{
  {message}}是插值表达式,用来获取message的值
		-->
		<div id="app"> {
  {message}} </div>
		<!-- 3.给第二步准备数据 -->
		<script>
			var a={
				message:"hello vue~"
			}
			//1,创建Vue对象
			new Vue({
				//el挂载点,意思是,把数据挂载到指定位置
				el:"#app",//利用CSS的id选择,选中了网页中的元素
				//data是vue为挂载点准备好的数据
				data:a
			})
		</script>
	</body>
</html>

3.测试

运行到浏览器查看页面是否出现hello vue~

练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习 vue开发步骤</title>
		<!-- 1.引入vue.js -->
		<script src="vue.js"></script>
	</head>
	<body>
		<!-- 2.准备数据渲染区,插值表达式获取属性的值-->
		<div id="app">
			姓名:{
  {name}}
			年龄:{
  {age}}
		</div>
		<!-- 3.创建Vue对象 -->
		<script>
			new Vue({
				el:"#app" , //挂载点
				data:{ //给挂载点准备数据
					name:"jack" ,
					age:20
				} 
			})
		</script>
	</body>
</html>

4.Vue的基础语法

1.运算符&函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 vue的运算符</title>
		<!-- 1.引入vue.js -->
		<script src="vue.js"></script>
	</head>
	<body>
		<!-- 2.准备数据渲染区 创建Vue对象 -->
		<div id="app">
			加减乘除运算: {
  {3+2}} {
  {3-2}} {
  {3*2}} {
  {3/2}} {
  {3%2}}
			三元运算符: {
  { age > 18 ? "成年人" : "未成年" }}
			字符串的常见操作:{
  {str}} {
  {str.length}} {
  {str.concat(100)}}
		
			调用函数: {
  { show() }}  {
  { print(100) }}  {
  {add(1,2)}}
		</div>
		<!-- 3.创建Vue对象 -->
		<script>
			new Vue({
				//指定挂载点的位置,每个Vue对象必须有这个el属性!!!
				el:"#app",
				data:{ //给数据渲染区准备数据
					age:10,
					str:"hello"
				},
				methods:{ //准备函数
				 //函数名:函数的声明
					show:function(){
						console.log("show()调用成功!");
					},
					print:function(a){
						console.log("print()调用成功"+a);
					},
					add:function(a,b){
						console.log(a+b);
					}
				}
			})
		</script>
	</body>
</html>

2.解析类型丰富的data

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 vue解析复杂的数据</title>
		<script src="vue.js"></script>
	</head>
	<body>
		<div id="app">
			{
  {name}}
			<h1>解析vue对象的数据:</h1>
			<h1>姓名:{
  {person.name}}  年龄:{
  {person.age}} </h1>
			<h1>解析vue数组的数据:</h1>
			<h2>{
  {hobby}}  {
  {hobby[0]}}  {
  {hobby[1]}} </h2> 
			<!-- 数组名[下标].属性名   目的是来获取每个对象中属性对应的值 -->
			<h2>{
  {persons[0].name}}  {
  {persons[1].age}}</h2>
		</div>
		<script>
			var vm = new Vue({
				el:"#app",
				data:{
					name:"jack",
					//对象名:对象的多个特征
					person:{
						name:"rose",
						age:20
					},
					//数组
					hobby:["篮球","足球"],
					//数组
					persons:[
						{ name:"jack" , age:20 },
						{ name:"rose" , age:10 }
					]
				}
			})
		</script>
	</body>
</html>

3.data的三种写法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue里data的三种写法</title>
		<script src="vue.js"></script>
	</head>
	<body>
		<div id="a">
			{
  {msg}} {
  {hobby[0]}}
		</div>
		<script>
			new Vue({
				el:"#a",
				//通过函数,设置返回值--vue项目中组件化的使用
				// data:function(){
				data(){//效果同上,是上面代码的简写形式
					//必须返回js对象
					return {
						msg:"hello vue",
						hobby:[1,2,3]
					}
				}