VUE--入门学习

最新推荐文章于 2023-09-04 10:45:10 发布
最新推荐文章于 2023-09-04 10:45:10 发布
阅读量319 收藏 1
点赞数
分类专栏： VUE 文章标签： vue.js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53244569/article/details/119913619
版权

一.VUE入门学习

1.VUE入门案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>入门案例</title>
	</head>
	<body>
		<!-- 基本语法 
			1.导入JS类库.
			2.指定VUE渲染区域 标签体
			3.实例化VUE对象
			4.数据取值
		-->
		<div id="app">
			<h1>{{msg}}</h1>
		</div>
		
		<!-- 1.导入JS类库 -->
		<script src="../js/vue.js"></script>
		<!-- 2.创建VUE对象 -->
		<script>
			var app = new Vue({
				el: "#app",
				data: {
					msg: "vue入门案例 哈哈哈哈"
				}
			})
		</script>
	</body>
</html>

2.var/let/const说明

关于JS中变量定义说明:
1.var 没有作用域的概念 容易出现安全性问题. 成员变量
2.let 作用于var类似, 有作用域的概念 局部变量
3.const 定义常量
在这里插入图片描述

3.v-text/v-html说明

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>入门案例</title>
	</head>
	<body>
		<div id="app">
			<!-- 规则说明:  
				1.{{msg}} 当页面没有渲染成功时.以原标签展现.
				2.v-text  当页面没有渲染完成,则不予展现.
				3.v-html  将html代码片段 渲染展现
			 -->
			<h1>{{msg}}</h1>
			<!-- 1.v-text  -->
			<h1 v-text="msg"></h1>
			<!-- 2.v-html -->
			<div v-html="div"></div>
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					msg: "hellovue",
					div: "<h3>我是一个标题标签</h3>"
				}
			})
		</script>
	</body>
</html>

4.双向数据绑定

1.页面demo

在这里插入图片描述

2.MVVM思想:

M: model 数据层
V: view 视图层
VM: 视图数据的控制层

流程:

  1. Model变化, 虚拟DOM操作内存数据变化. 所以页面变化.
  2. View变化, 虚拟DOM操作内存数据变化, 数据变化.在这里插入图片描述

5.事件绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件绑定</title>
	</head>
	<body>
		<div id="app">
			<!-- 事件绑定的语法:
				v-on:click="简单的计算"
				v-on:click="点击事件"
			 -->
			
			展现数据: {{num}}
			<button v-on:click="num++">自增</button>
			<!-- <button v-on:click="addNum">自增函数</button> -->
			<button @click="addNum">自增函数</button>
			
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					num: 100
				},
				methods: {
					addNum: function(){
						this.num ++
					}
				}
			})
		</script>
	</body>
</html>

6.分支结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>分支结构</title>
	</head>
	<body>
		
		 <div id="app">
			 <!-- 需求：用户可以手动的输入成绩 
					根据成绩：自动计算等级
					等级规范：
							>=90 	优秀
							>=80 	良好
							>=70 	中等
							否则 		继续努力
							命令：
							1.v-if 		如果判断为true 则展现元素
							2.v-else-if 	如果不满足v-if，检查是否满足v-else-if
							3.v-else 		上述都不满足   才展现
							
			 -->
			 请输入成绩：<input type="tetx" v-model="score" /><br>
			 等级：
				 <h3 v-if="score >= 90">优秀</h3>
				 <h3 v-else-if="score >= 80">良好</h3>
				 <h3 v-else-if="score >= 70">中等</h3>
				 <h3 v-else>继续努力</h3>
		 </div>
		 
		 <!-- 1.导入JS类库 -->
		 <script src="../js/vue.js"></script>
		 
		 <!-- 2.创建vue对象 -->
		 <script>
		
				const app = new Vue({
					el:"#app",
					data:{
						score: 0
						
					},
					methods:{
						
					}
						
				});
		 </script>
		 
	</body>
</html>

7.循环结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>循环结构</title>
	</head>
	<body>         
		<div id="app">
			<!-- 指令: v-for 展现的标签 -->
			<!-- 案例1: 以循环方式输出爱好 -->
			<div id="demo1">
				<!-- 如果只有一个参数,则value表示数据 -->
				<p v-for="value in hobby" v-text="value"></p>
			</div>
			<hr />
			
			<!-- 案例2: 以循环方式输出爱好 展现下标
				 arg1: value的值的数据
				 arg2: 下标的数据.
			 -->
			<div id="demo2">
				<p v-for="arg1,arg2 in hobby">
					<span v-text="arg2+1"></span>
					----
					<span v-text="arg1"></span>
				</p>
			</div>
			<hr />
			
			<div id="demo3">
				<table border="1px" width="90%">
					<tr align="center">
						<td>编号</td>
						<td>名称</td>
						<td>年龄</td>
					</tr>
					<!-- 遍历数据获取对象,之后从对象中获取属性 -->
					<tr align="center" v-for="user in userList">
						<td v-text="user.id"></td>
						<td v-text="user.name"></td>
						<td v-text="user.age"></td>
					</tr>
				</table>
			</div>
			<hr />
			
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					hobby: ["敲代码","改BUG","钻研技术"],
					userList: [{id:100,name:"泰森",age:60},
							   {id:101,name:"嘴炮",age:40},
							   {id:102,name:"泰坦巨猿",age:300000},
							  ]
				},
				methods: {
				}
			})
		</script>
	</body>
</html>

二.VUE基本语法

1 表单双向数据绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单双向数据绑定</title>
	</head>
	<body>
		<div id="app">
			<!-- 问题: 表单中的哪些标签可以使用双向数据绑定
				 双向数据绑定说明: 用户可以录入的标签.
				 
				 答案: 
					1.文本框 2.单选框 3.多选框 4.下拉框  5.文本域
			 -->
			 <form action="http://baidu.com">
				 <div>
					 用户名: <input type="text" v-model="username"/>
				 </div>
				 <div>
				 	 性别: <input type="radio" value="男" name="sex"   v-model="sex"/>男
						   <input  type="radio" value="女" name="sex" v-model="sex"/>女
				 </div>
				 <div>
				 	 爱好: 
						<input type="checkbox" name="hobby" value="敲代码" v-model="hobby"/>敲代码
						<input type="checkbox" name="hobby" value="打游戏" v-model="hobby"/>打游戏
						<input type="checkbox" name="hobby" value="打豆豆" v-model="hobby"/>打豆豆
				 </div>
				 <div>
					 <!-- 
						VUE的点击事件中有一个属性,可以取消标签的默认行为
						@click.prevent
						常用场景: 
							1. form标签  阻止 action 提交
							2. a标签     阻止 href   属性跳转
					 -->
					 <input type="submit" value="提交" @click.prevent="formBtn"/>
				 </div>
			 </form>
			 
			
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					username: 'aaaa',
					sex: '女',
					hobby: ['敲代码']
				},
				methods: {
					formBtn(){
						alert("点击按钮 ajax提交数据")
					}
				}
			})
		</script>
	</body>
</html>

2.常用双向数据绑定属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单双向数据绑定</title>
	</head>
	<body>
		<div id="app">
			<!-- 问题: 表单中的哪些标签可以使用双向数据绑定
				 双向数据绑定说明: 用户可以录入的标签.
				 
				 答案: 
					1.文本框 2.单选框 3.多选框 4.下拉框  5.文本域
			 -->
			 <form action="http://baidu.com">
				 <div>
					 用户名: <input type="text" v-model="username"/>
				 </div>
				 <div>
				 	 性别: <input type="radio" value="男" name="sex"   v-model="sex"/>男
						   <input  type="radio" value="女" name="sex" v-model="sex"/>女
				 </div>
				 <div>
				 	 爱好: 
						<input type="checkbox" name="hobby" value="敲代码" v-model="hobby"/>敲代码
						<input type="checkbox" name="hobby" value="打游戏" v-model="hobby"/>打游戏
						<input type="checkbox" name="hobby" value="打豆豆" v-model="hobby"/>打豆豆
				 </div>
				 <div>
					 <!-- 
						VUE的点击事件中有一个属性,可以取消标签的默认行为
						@click.prevent
						常用场景: 
							1. form标签  阻止 action 提交
							2. a标签     阻止 href   属性跳转
					 -->
					 <input type="submit" value="提交" @click.prevent="formBtn"/>
				 </div>
			 </form>
			 
			
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					username: 'aaaa',
					sex: '女',
					hobby: ['敲代码']
				},
				methods: {
					formBtn(){
						alert("点击按钮 ajax提交数据")
					}
				}
			})
		</script>
	</body>
</html>

3.VUE生命周期

1. 如何理解生命周期

说明: VUE中有一整套完整的VUE对象创建/使用/销毁的流程. 如果用户需要在某个特定的点 有特殊的需求,可以对VUE对象进行扩展!

2. 生命周期流程

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单双向数据绑定</title>
	</head>
	<body>
		<div id="app">
			<!-- 问题: 表单中的哪些标签可以使用双向数据绑定
				 双向数据绑定说明: 用户可以录入的标签.
				 
				 答案: 
					1.文本框 2.单选框 3.多选框 4.下拉框  5.文本域
			 -->
			 <form action="http://baidu.com">
				 <div>
					 用户名: <input type="text" v-model="username"/>
				 </div>
				 <div>
				 	 性别: <input type="radio" value="男" name="sex"   v-model="sex"/>男
						   <input  type="radio" value="女" name="sex" v-model="sex"/>女
				 </div>
				 <div>
				 	 爱好: 
						<input type="checkbox" name="hobby" value="敲代码" v-model="hobby"/>敲代码
						<input type="checkbox" name="hobby" value="打游戏" v-model="hobby"/>打游戏
						<input type="checkbox" name="hobby" value="打豆豆" v-model="hobby"/>打豆豆
				 </div>
				 <div>
					 <!-- 
						VUE的点击事件中有一个属性,可以取消标签的默认行为
						@click.prevent
						常用场景: 
							1. form标签  阻止 action 提交
							2. a标签     阻止 href   属性跳转
					 -->
					 <input type="submit" value="提交" @click.prevent="formBtn"/>
				 </div>
			 </form>
			 
			
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					username: 'aaaa',
					sex: '女',
					hobby: ['敲代码']
				},
				methods: {
					formBtn(){
						alert("点击按钮 ajax提交数据")
					}
				}
			})
		</script>
	</body>
</html>

三.VUE前后端调用

1.MVC思想说明

在这里插入图片描述

2. 前后端调用流程

在这里插入图片描述

3.Ajax

1.介绍

Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。 [3] 使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。 [3]

特点:
局部刷新,异步访问

2. Ajax异步原理

请求同步说明:
用户向服务器发起请求,如果服务器正忙,这时程序处于等待的状态.这时页面处于加载 ,同时用户不能操作.
为了让用户的体验更好,则一般采用异步.

异步调用的原理:
在这里插入图片描述

步骤:

  1. 用户发起Ajax请求, Ajax内部机制,将请求交给Ajax引擎处理.
  2. Ajax引擎接收到用户的请求之后,重写发起一个新的请求.访问后端服务器.
  3. 当服务器端接收到了 Ajax请求之后,完成业务处理.之后将数据响应给Ajax引擎.
  4. Ajax引擎通过事先约定好的 回调函数, 将服务器数据 交还给用户.
    5.用户在请求的过程中,可以完成自己的任务.
    注意事项: 多个Ajax的请求 不关注顺序.

4.Axios 入门案例

1.编辑页面
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Axios入门案例</title>
	</head>
	<body>
		
		<h1>Ajax请求练习</h1>
		<!-- 使用步骤:
			1.导入JS函数类库
			2.发起Ajax请求,之后业务处理.
		 -->
		 <script src="../js/axios.js"></script>
		 <script>
			/* axios请求方式
			 
				1.请求类型
				   1. get  执行查询业务
				   2. post 执行form表单提交(登录/新增)
				   3. put  执行修改操作 
				   4. delete 执行删除业务时.
				   
				2. axios语法
				   axios.get("url地址信息","参数信息")
						.then(function(args){
							
						})
						
				3. 关于args参数说明
					axios为了统筹请求状态.将所有的数据封装为
					promise对象
					
			 */
			
			/* 
			案例1: 利用axios获取后台用户列表信息
			url: http://localhost:8090/findAll 
			
			*/
			
			axios.get("http://localhost:8090/findAll")
				 .then(function(promise){
					 console.log(promise)
					 console.log(promise.data)
				 })
		 
		 </script>
	</body>
</html>
2.开启跨域

在这里插入图片描述

3.编辑UserController

在这里插入图片描述

4.编辑UserServiceImpl

在这里插入图片描述

四.Axios 请求案例

1. GET-带参数(方式1)

1. 编辑页面html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>前后端调用</title>
	</head>
	<body>
		
		 <h1>前后端调用</h1>
		 <script src="../js/axios.js"></script>
		 <script>
			/* 需求1: 查询id=1的用户
			   
			   GET方式1: 动态拼接参数的写法 
			   url: http://localhost:8090/axios/getUserById?id=1
			 */
			let url1 = "http://localhost:8090/axios/getUserById?id=1"
			axios.get(url1).then(promise => {
				console.log(promise.data)
			})
		 </script>
	</body>
</html>
2.编辑AxiosController
@RestController
@CrossOrigin
@RequestMapping("/axios")
public class AxiosController {

    @Autowired
    private UserService userService;

    /**
     * URL: http://localhost:8090/axios/getUserById?id=1
     * 参数: id=1
     * 返回值: User对象
     */
    @GetMapping("/getUserById")
    public User getUserById(Integer id){

        return userService.findUserById(id);
    }

}
3.编辑AxiosService

在这里插入图片描述

2.GET-带参数(restFul格式)

1.编辑页面HTML
/* 
				GET方式2: 利用restFul查询数据
				需求:     查询sex=女 age>18
				
				原因: restFul结构越来越受欢迎,则拼接restFul结构 变得繁琐.
				模板字符串:  
					语法: 一对反引号  ``
					取值: ${key} 形式取值
					优势: 保留代码的格式
					
			 */
			let sex2 = "女"
			let age2 = 18
			//let url2 = "http://localhost:8090/axios/user/"+sex2+"/"+age2
			let url2 = `http://localhost:8090/axios/user/${sex2}/${age2}`
			axios.get(url2).then(promise => {
				console.log(promise.data)
			})
2.编辑AxiosController

在这里插入图片描述

3.编辑UserServiceImpl

在这里插入图片描述

4.页面效果展现

在这里插入图片描述

3.GET-带参数(对象写法)

1.编辑html页面
/**
			 * GET方式3: 利用对象实现参数传递
			 * 需求3: 查询 name="王昭君" sex=女 age=19
			 * 参数语法:
			 * 	 数据结构: {}
			 * 	 关键字key(固定写法): params 
			 *   value: 用户需要传递的值
			 */
			let user = {
				name: '王昭君', 
				sex: '女',
				age: 19
			}
			
			let url3 = "http://localhost:8090/axios/getUser"
			axios.get(url3,{params : user})
			     .then(promise => {
					 console.log(promise.data)
				 })
2.编辑AxiosController

在这里插入图片描述

3.编辑UserServiceImpl

在这里插入图片描述

4.页面效果展现

在这里插入图片描述

五.前后端调用

1.请求类型说明

分组:
1.GET/DELETE 用法一致.
2.POST/PUT 用法一致.

2. Delete请求

1.编辑页面HTML
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>DELETE请求</title>
	</head>
	<body>
		 <h1>前后端调用-DELETE请求测试</h1>
		 <script src="../js/axios.js"></script>
		 <script>
		 
			/* DELETE测试1:
			   需求: 删除ID=232的数据
			 */
			let url = "http://localhost:8090/axios/deleteById?id=232"
			axios.delete(url)
				 .then( promise => {
					 console.log(promise.data)
				 })
			
		 </script>
	</body>
</html>
2. 编辑AxiosController

在这里插入图片描述

3.编辑UserServiceImpl

在这里插入图片描述

4.页面效果展现

在这里插入图片描述

3.POST请求

1. 编辑页面html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>POST请求</title>
	</head>
	<body>
		 <h1>前后端调用-POST请求测试</h1>
		 <script src="../js/axios.js"></script>
		 <script>
			
			/**
			 * 需求: 实现用户新增操作
			 * 语法: axios.post(url,新增参数)
			 * 规则: 如果post/put 传递对象则直接赋值.
			 */
			let user = {
				name: '小燕子',
				age: 18,
				sex: '女'
			}
			let url = "http://localhost:8090/saveUser"
			axios.post(url,user)
			     .then(promise => {
					 console.log(promise.data)
				 })
				
		 </script>
	</body>
</html>
2.请求参数的结构

1.url请求地址
在这里插入图片描述
2.参数结构
说明: http协议中只能识别 字符串!!!
在这里插入图片描述

3.编辑 AxiosController
/*
     * 需求: 实现用户入库操作
     * URL: http://localhost:8090/axios/saveUser
     * 参数: {name: "小燕子", age: 18, sex: "女"}
     * 返回值: String 新增成功!!!
     * 难点:
     *      json 互转  user对象
     *      1. user对象转化为json   @ResponseBody
     *      2. json转化为user对象   @RequestBody
     */
    @PostMapping("/saveUser")
    public String saveUser(@RequestBody User user){

        userService.saveUser(user);
        return "新增用户成功!!!";
    }
4.编辑 AxiosService

在这里插入图片描述

5.页面效果展现

在这里插入图片描述

4.PUT请求(一)

1.编辑页面html
/**
			 * 需求: 要求将id="238" 
			 * 	     改为name="小鬼当家",age=4,sex=男
			 */
			let user = {
				id: 238,
				name: "小鬼当家",
				age: 4,
				sex: "男"
			}
			let url = "http://localhost:8090/axios/updateUser"
			axios.put(url,user)
				 .then(promise => {
					 console.log(promise.data)
				 })
2.编辑AxiosController

在这里插入图片描述

3.编辑UserServiceImpl

在这里插入图片描述

PUT请求(二)

1.编辑页面html
/**
			 * 需求2: 要求将name="小燕子"
			 * 	      改为name="小鬼当家",age=18,sex=男
			 * 难点:  如果有多个参数,并且重复时 如何封装?
			 * 解决方案: 1.restFul + 对象 
			 */
			let name = "小燕子"
			let user2 = {
				name: "小鬼当家",
				age: 18,
				sex: "男"
			}
			
			let url2 = `http://localhost:8090/axios/updateUserByName/${name}`
			axios.put(url2,user2)
				 .then(promise => {
					 console.log( promise.data)
				 })
2.编辑AxiosController
 /**
     * 需求: 根据name修改数据
     * URL: http://localhost:8090/axios/updateUserByName/小燕子
     * 参数: name条件, {name: "小鬼当家",age: 18,sex: "男"}
     * 返回值: 修改成功
     * 注意事项:  restFul可以为对象的属性赋值.
     *          注意restFul的名称不要与属性重名.否则会覆盖
     *          引发BUG
     */
    @PutMapping("/updateUserByName/{whereName}")
    public String updateByName(@RequestBody User user,
                               @PathVariable String whereName){

        userService.updateUserByName(user,whereName);
        return "修改数据成功2222";
    }
3.编辑UserServiceImpl
 //userMapper.update(arg1,arg2)
    //arg1: set条件的数据,
    //arg2: where条件的数据
    @Override
    public void updateUserByName(User user, String whereName) {
        //updateWrapper 与 queryWrapper 功能一样,可以混用
        UpdateWrapper<User> updateWrapper = new UpdateWrapper();
        updateWrapper.eq("name",whereName);
        userMapper.update(user,updateWrapper);
    }
望山。
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue中如何实现后台管理系统的权限控制的方法步骤
10-16
主要介绍了vue中如何实现后台管理系统的权限控制的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
VUE执行流程
jim_007的博客
12-19 530
参考内容链接： https://www.cnblogs.com/hello-wuhan/p/6961948.html -----vue加载流程的说明 https://blog.csdn.net/chuanxincui/article/details/88572727 -----vue加载文件作用的说明 流程： 1. 先加载index.html；他里面有...
controller层的url接口怎么跟vue进行交互
weixin_42576410的博客
02-14 497
在 Vue 和后端 Controller 层之间进行交互，通常需要使用 HTTP 协议通过 API 接口进行数据交换。 可以使用 Vue 提供的 HTTP 库，如 vue-resource 或 axios，来发送请求并获取响应。例如，使用 axios： axios.get('/api/users') .then(response => { console.log(response...
在vue工程中，controller和service的区别是什么？
AlgorithmHero的博客
08-20 195
在传统的MVC（模型-视图-控制器）架构中，控制器是用来管理应用程序中的业务逻辑、处理用户输入以及协调模型和视图之间交互的组件。在Vue.js应用中，你可以使用这些服务来保持组件的整洁和可维护性，避免在组件中直接处理所有逻辑。将一些通用的功能封装为服务，可以提高代码的可重用性，同时使组件更加专注于UI渲染和用户交互。综合起来，你可以将Vue.js中的组件视为控制器的角色，负责处理用户交互和视图渲染，而服务则是一种封装了功能逻辑的模块，用于处理数据获取和业务逻辑。
vue简介以及基本使用（一）
tortoise666的博客
09-14 279
Vue.js是一个构建数据驱动的web界面界面的渐进式mvvm框架，2014年2月正式发布；2016年4月发布2.0版本；创造者-尤雨溪 vue官网：https://cn.vuejs.org/ 一、设计模式MVC、MVP、MVVM MVC(model-view-controller)：view:用户看到的界面，model:数据，controller:业务逻辑 MVC特点： 1.用户可以向view发送指令，再由view直接要求model改变状态； 2.用户向controller发送指令，再由controlle
vue-router 学习快速入门
01-19
vue-router 快速入门 配置路由 $ npm install vue-router --save routes.js import Home from './pages/Home.vue' import Gifs from './pages/Gifs.vue' import User from './pages/User.vue' export const ...
vue-element-admin快速入门课程
06-29
本课程主要带领同学们完成该框架的入门学习。 本课程首先会对框架的安装，代码目录说明，路由配置项的含义这些基础知识做讲解，接着会带领大家从代码层面去分析其登陆流程与权限验证流程，对于如何实现前后端权限的...
Vue入门学习小案例-小王记事本
04-05
Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王...
vue-frontend-quickstart:Vue网站的入门模板-无节点
03-16
Vue前端快速入门 Vue网站的入门模板-无节点 预览 在线演示 使用这个专案 如何设定： 使用上方的模板按钮将此... Vue与React类似，但是包括我在内的许多人都认为Vue更易于学习和使用。 请参阅我的页面，以了解有关V
Vue之render构建、调用整体流程
玉案轩窗的博客
09-28 3437
前言 本篇文章是想要探寻下Vue中是如何处理html到vnode以及vnode转换为html的过程，主要是梳理其大概流程，一些细节流程会在单独文章的细究。
VUE 程序的执行过程（非常非常重要）
最新发布
Sayesan的专栏
09-04 1801
因此，可以说`index.html`文件是整个Vue应用程序的入口点，而`main.js`文件是Vue应用程序的入口文件。在浏览器加载和执行的过程中，`index.html`和`main.js`的先后顺序是先加载`index.html`，然后引入并执行`main.js`文件。6. `App.vue`文件作为Vue应用程序的根组件，被包含在`main.js`中创建的Vue实例中，并通过`new Vue({...}).$mount('#app')`语句挂载到指定的DOM元素上。文件是显式引入的，不需要在。
VUE调用后台方法
猫寻
08-02 1万+
本次修改dev环境 修改config下index.js文件，添加env: require('./dev.env'),到dev下： 修改config下dev.env.js文件，内容如下： var merge = require('webpack-merge') var prodEnv = require('./prod.env') module.exports = merge(pro...
vue介绍与入门
rongwenbin的专栏
03-05 427
一.什么是vue.js vue.js是javascript的一个轻量开源库。它的作者是尤雨溪，于2014年2月编写的开源库，到目前为止，它在 github上已经超过了10w多颗star。Vue.js是用于构建交互式的Web界面的库，提供了MVVM数据绑定和一个可组合的组件系统，具有简单、灵活的API。 我们现在所学习的是vue2.0的版本，那么我们可以通过登录国内站点访问。 中文文档...
vue-admin-template实现登录过程（对接Controller）
weixin_46295656的博客
05-28 5943
vue-admin-template实现登录过程（对接Controller） 关注公众号，每天更新优质好文！ vue-admin-template是使用vue+element-ui开发的一款很棒的后台管理系统基础模板。我们一般在上面进行二次开发。 我们可以预览一下，还是很棒的，我很喜欢。 项目预览地址： https://panjiachen.gitee.io/vue-admin-template 接下来，我们就下载了使用一下吧。 1.第一步、 下载vue-admin-template模板，然后导入到开
vue2入门
weixin_47039303的博客
10-24 170
1.MVC view页面 Model只负责数据库 controller(处理请求,后端) view视图层->服务器 2.MVVM M表示需要处理数据的一部分,V表示页面 ,MV整体的控制v和m 3. 优点 1.可以完全替代过去操作dom对象,jqajax, 2.可以更加关注业务逻辑 3.直接渲染数据到页面 4.版本 vue1,2的区别,2经常用,老项目用1 语法区别很大 版本3处于测试阶段 5. 使用赋值数据//el也可以是"el" {{str1}} var vm=new Vue({ "el"
vue项目路由跳转及请求接口流程
weixin_43923665的博客
08-16 4568
vue-router和axios的简单学习与应用
Vue项目中的接口调用
热门推荐
一起学习前端知识，一起成为前端开发工程师！
04-24 2万+
在企业开发过程中，往往有着明确的前后端的分工，前端负责接收、使用接口，后端负责编写、处理接口。 对于前端如何使用接口，今天在Vue中进行讲解。 一个项目往往由这几个部分组成。 其中在src文件夹中，，有这么些内容。 我们常常把接口文件，新建一个文件夹在src下，命名为api，api内的文件便是接口文件。 通常把后端的接口写在api文件夹下，自己命名为xxx.js // 登录 export function login(data) { return request({ url: '/api/c
vue实现自定义video的controller
Zmikoo学习之路
09-02 2183
html: <div ref='videoContainer' :class="['myvideo-box',fullScreenState ? 'fullscreen' : '']" @mousemove='controlerShowControl(true)' @mouseout='controlerShowControl(false)' @click='controlerShowControl(true)'> <video ref='vide
Vue基本应用、指令、MVVM和MVC模式
Darlingmi的博客
09-05 556
一、前后端分离的架构 1、MVVM架构模式          在前端页面中，把Model用纯JavaScript对象表示，View负责显示，两者做到了最大限度的分离，把Model和View关联起来的就是ViewModel。 Model：代表数据模型，也可以 在 Model 中定义数据修改和操作的业务逻辑。 View：视图，代表 UI 组件，它负责将数据模型转化成 UI 展现出来。 ViewModel: 是一个同步 View 和 Model 的对象
vue学习-vue入门
08-25
如果你想学习 Vue.js 并入门的话，以下是一些步骤和资源可以帮助你开始： 1. 首先，确保你已经安装了 Node.js。你可以在官方网站上下载并按照指示进行安装。 2. 之后，你可以使用 Vue 的官方脚手架工具 Vue CLI 来...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

望山。

谢谢您的打赏！！！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值