前端网页--Vue

最新推荐文章于 2024-08-04 12:47:40 发布

峰＃

最新推荐文章于 2024-08-04 12:47:40 发布

阅读量684

点赞数 1

文章标签： vue vue.js

本文链接：https://blog.csdn.net/m0_46444588/article/details/121408971

版权

本文详细介绍了Vue.js，一个轻量级的前端框架，强调数据驱动和组件化。内容涵盖Vue的概述、官网、MVVM框架原理，以及从基础语法如运算符、data的三种写法到高级用法如v-命令的全面解析，包括v-model、v-cloak等。还深入讨论了Vue组件、路由Router和异步操作axios的使用。

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

一、Vue

–1,概述

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

-2,官网

https://cn.vuejs.org/ #官网

https://cdn.jsdelivr.net/npm/vue/dist/vue.js #下载最新版本

-3，MVVM框架

简而言之，MVVM框架实现了页面和数据的分离，代码结构更加清晰，责任更加明确，同时实现自动化，数据变化，页面随之变化，无需写代码，非常棒的一个改进。这是javascript、jquery、bootstrap等无法做到的，也是前端为何开始推崇Vue这些框架的根本原因，也标示着jquery的终结。

二,入门案例

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

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 1.引入vue.js来用vue框架的功能
			src用来指定js文件的位置-->
		<script src="vue.js"></script>
	</head>
	<body>
		<!-- 2. 数据渲染区，准备解析vue的数据 
			{
  {message}}是插值表达式，用来获取message-->
		<div id="app">{
  {message}}</div>
		<!-- 3.给第二步准备数据,js代码 -->
		<script type="text/javascript">
			//方式一：
			/* var a={
				message:"hello vue"
			}
			
			//1.创建Vue对象
			new Vue({
				//element的简称，挂载点，意思是把数据挂载到指定位置
				el:"#app",//利用css的id选择器，选中了网页中的元素
				//data是vue为挂载点准备好的数据
				data:a
			}); */
			
			//方式二：
			new Vue({
				el:"#app",
				data:{message:"hello vue"}
			})
		</script>
	</body>
</html>

3.测试

4.练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 1.引入vue.js文件 -->
		<script src="vue.js"></script>
	<body>
		<!-- 2.准备数据渲染区 插值表达式获取属性的值-->
		<div id="app">
			姓名：{
  {name}}
			年龄：{
  {age}}
		</div>    
		<!-- 3.创建Vue对象 -->
		<script type="text/javascript">
			new Vue({
				el:"#app",
				data:{
					name:"jack",
					age:12
					}
			})
		</script>
	</body>
</html>

三、Vue的基础语法

–1,运算符&函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 1.引入vue.js文件 -->
		<script src="vue.js"></script>
	</head>
	<body>
		<!-- 2.准备数据渲染区， -->
		<div id="app">
			<p>加法：{
  {2+3}}</p>
			<p>减法：{
  {2-3}}</p>
			<p>乘法：{
  {2*3}}</p>
			<p>除法：{
  {3/2}}</p>
			<p>取余：{
  {10%2}}</p>
			<p>三元运算符：{
  {age>18?"成年人":"未成年"}}</p>
			<p>字符串的常见操作：{
  {str}} {
  {str.length}}</p>
			
			调用函数：{
  {show()}}  {
  {print(100)}}  {
  {add(1,2)}}
		</div>
		<!-- 3.创建Vue对象 --&g

最低0.47元/天解锁文章

峰＃

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
前端网页--Vue

一、Vue–1,概述是一个轻量级的前端框架.封装了HTML CSS JS的代码.特点:1, 是一个轻量级的渐进式的框架, 按需配置2, 实现了数据驱动/双向绑定和组件化的思想(高内聚)3, vue框架可以避免了DOM的API4, 遵循了MVVM设计模式,实现前端代码的松耦合M是Model,是指数据V是View,是指视图VM是ViewModel,是指在指定视图里渲染指定数据-2,官网https://cn.vuejs.org/ #官网https://cdn.jsdel
复制链接

扫一扫