VUE简单了解学习！

最新推荐文章于 2024-09-11 09:13:55 发布

希望不要秃头的0.0

最新推荐文章于 2024-09-11 09:13:55 发布

阅读量135

点赞数 4

本文链接：https://blog.csdn.net/Yjh_pythonking/article/details/119654812

版权

VUE：是一个基于JavaScript的渐进式前端框架，更符合中国人习惯，在中国很多大型一线企业中广泛应用。

特点：一个轻量级的mvvm框架，双向绑定，数据动态更新。
是一个渐进式框架，其核心思想是数据驱动、组件化的前端开发
原生html页面是通过js 操作的是dom，而vue.js操作的是数据。
和传统前端开发开发的关注点完全不同，传统方式关注的是都像的document结构的api，而vue关注的是数据。
优点显而易见，从而屏蔽了使用复杂晦涩难记的dom结构api。

渐进：按需搭建，需要什么搭建什么功能

可以只使用核心vue.js
可以只使用核心vue.js + components组件
可以只使用核心vue.js + components组件 + router路由
可以只使用核心vue.js + components组件 + router路由 + vuex状态管理
构建大型vue项目：npm（包依赖） + webpack（打包、压缩、合并等）

对于后端开发来说，掌握前两种即可。

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

结构简介：

在表头里导入vue.js文件
在body里准备数据渲染区（视图），写好id，为下一步做准备，标签里写插值表达式，否则会当作普通数据来解析，后期只负责修改数据区就可以
在script里new Vue对象，加入挂载点和数据区和方法区。注意：数据区里全部都是KV形式的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue入门案例简化版本</title>
		<script src="old/vue.js" >
		</script>
	</head>
	<body>
		<div id="app">{{msg}}</div>
		<script >
		new Vue({
			el:"#app",
			data:{
			msg:"hello vue~"
		},
		methods:{
			
		}
		});
		</script>
	</body>
</html>

VUE基本语法：

加法:{{2+3}}

减法:{{2-3}}

乘法:{{2*3}}

除法:{{3/2}}

取余:{{10%2}}

三元表达式: {{age>10?'yes':'no'}}

字符串操作： {{str}} {{str.length}}长度 {{str.concat(1000)}}拼接 {{str.substr(3)}}截取 {{name.replace('阎','857')}}替换

VUE定义函数：

在方法区（methods）里定义，如下：

methods:{
      onsubmit(){
        alert("阎静辉真帅");
      }

定义对象and数组：

在数据区（data）里定义，如下：

                    data:{
					a:{
						name:'jack',
						age:22,
						c(){
							alert("给我弹出来")
						}
					},
					b:{
						name:'yjh',
						age:22
					},
					c:[{
						"name":"yjh",
						"age":"22",
						},
						{
						"name":"zzf",
						"age":"18"
						}
						]
				}

VUE指令集：前面都是V-开头的

v-model="参数" 对参数进行双向绑定，修改参数等于修改数据区的值

v-if="条件" 对条件进行判定，成功的话展现标签的值，否则不执行

v-show="条件" 对条件进行判定，成功的话展现标签的值，否则也展现，只不过被隐藏了

v-else-if

v-else

v-for="自定义名称 in 数组名" 名称后面可加i值当作下标值一同返回

v-on:click 单击事件，可简写为 @click，其他同

@dblclick 双击事件

@mouseenter 鼠标进入事件

@mouseout 鼠标走出事件

<a v-bind:href="#">点我跳转</a> 跳转事件，可简写为<a :href="#">简写版跳转</a>，正常写href的话会把href的变量当作参数来跳转，跳转错误。

注意：电脑反应慢的话插值表达式会展示一下，然后才会赋值，所以我们要解决闪现问题，通过css对v-cloak隐藏，首先在视图区添加v-cloak属性。具体如下：

<style type="text/css">
			[v-cloak]{
				display: none;
			}
		</style>

VUE脚手架

作用：vue脚手架指的是vue-cli，它是一个专门为单页面应用快速搭建繁杂的脚手架，它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。

准备：安装nodejs并进行验证，修改镜像下载地址，进入DOS命令窗口

node -v # v8.11.3，至少8以上
npm config get registry # 查看当前配置的镜像
npm config set registry https://registry.npm.taobao.org #设置成淘宝镜像
npm install vue-cli -g #安装vue-cli脚手架

创建自己的工作空间，准备生成VUE项目：

1.在工作空间下进入cmd
vue init webpack jt       //在当前目录会创建jt目录，jt是项目名称
执行上面命令，要配置很多选项，y，n （死记）
Project Name           项目名称，默认，回车
Project description            默认，回车
Author   chenzs           作者
vue build               默认，回车
install vue-router?           是否安装router，输入：y 安装
Use ESLint to lint your code?       规则引擎，过于严苛，输入：n
Setup unit tests?       单元测试，输入：n
Setup e2e tests with Nightwatch(Y/n)?   测试框架Nightwatch，输入：n
Should we run 'npm install' for
you after the project has been created?   默认npm，回车

2.cd 目录
npm run dev开启服务

3.在组件目录下载element-ui组件（组件目录一般为node_modules）
npm i element-ui -D

4.在h5导入文件，创建组件

5.把element-ui在main里导入
import ElementUI from 'element-ui'//导入elementUI 三句话
import 'element-ui/lib/theme-chalk/index.css'//导入全局样式表
Vue.use(ElementUI)

6.在App里导入、引用、写标签
import Item from './components/Item.vue' //1.导入
components:{//2.引用 Item
}
<Item></Item>//写标签名写自己定义的

7.开始编写本组件，基础布局仿照自带的helloVUE文件，API在Element官方网站进行查看。

到这里就结束了，前端这块我描述的很敷衍，可能因为我是后端方向的吧，下一阶段学习SpringMVC，把前后端和数据库串联起来。