Vue前端网页技术

最新推荐文章于 2023-09-05 17:32:03 发布

【欸嘿】

最新推荐文章于 2023-09-05 17:32:03 发布

阅读量1.3k

点赞数 2

分类专栏：笔记文章标签： vue.js javascript

本文链接：https://blog.csdn.net/qq_47570500/article/details/120228417

版权

笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

Vue概念

Vue是我们国人开发的，作者：尤雨溪，是一个基于JavaScript的渐进式前端框架，更符合中国人习惯，在中国很多大型一线企业中广泛应用。

Vue3.0使用TypeScript编写，TypeScript是JavaScript的超集，微软研发，语法更加细致严谨，改js脚本语言为向一线强语言java、c靠拢，可以构建大型项目，基于ES6标准。

官网

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

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

特点

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

渐进式框架

Vue是一个用于构建用户界面的渐进式 SPA （ Single-Page Applications ）**单一页面框架。与其它庞大而单一框架不同的是，Vue从一开始就被设计为按需搭建。

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

MVVM框架

MVVM框架实现了页面和数据的分离，代码结构更加清晰，责任更加明确，同时实现自动化，数据变化，页面随之变化，无需写代码。
在这里插入图片描述

基础语法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue的运算符</title>
		<script src="vue.js"></script>
	</head>
	<body>
		<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>10?'yes':'no'}}</p>
			<p> 字符串操作: </p>
			<p> {{str}} {{str.length}} {{str.concat(1000)}} {{str.substr(3)}} </p>
			<p>vue解析数组：{{arrays[1].name}} {{arrays[0].age}} </p>
		
		</div>

		<script>	
				new Vue({
					el:"#app",
					// 数据的三种写法:标准写法
					// 第一种形式
					// data : {
					// 	msg : "hello vueeee~~~"
					// }
					// 第二种形式:定义函数,返回对象
					// data:function(){
					// 	return {
					// 		msg:"hi~vue"
					// 	}
					// },
					// 第三种形式:定义函数,es6的简写法
					data(){
						return {
							msg:"vue hi~",
							//vue定义数组
							arrays:[
								{
									name:"zhangsan",
									age:20
								},
								{
									name:"wangwu",
									age:30
								}
							]
						}
					}
					},
					/* 必须在methods里,创建Vue函数 */
					methods: {
						show:function(){ 
							console.log('hello vue');
						},
						sysout: function(color){
							console.log(color);
						}
					}
				});
		
		</script>

	</body>
</html>

高级用法：v-命令

常见的Vue指令:v-if v-for v-on v-bind v-model v-cloak等

双向绑定 v-model

通过指令v-model，实现双向绑定，修改一方同时修改相同的另一方，达到数据同时更新。MVVM是将"数据模型双向绑定"的思想作为核心，在View和Model之间没有联系，通过ViewModel进行交互，而且Model和ViewModel之间的交互是双向的，因此View视图的数据的变化会同时修改Model数据源，而Model数据源数据的变化也会立即反应到View视图上。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="address"/>
		</div>
	</body>
	<script>
		new Vue({
			el: "#app",
			data: {
				address: "北京天安门"
			}
		});
	</script>
</html>

闪现 v-cloak

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
		<style>
			[v-cloak]{
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="app" v-cloak>
		…
		</div>
	</body>
</html>

判断 v-if

<p v-if="person.age>=18">成年人</p>
<p v-if="person.age<18">未成年人</p>
			
<p v-if="person.salary>=2000">金领</p>
<p v-else-if="person.salary>=1000">白领</p>
<p v-else>我</p>

<!-- 和v-if一样也可以判断,只是条件不满足也会在页面加载,不显示而已 -->
<p v-show="person.age>=20">成年人</p>

Tip: 什么时候用 v-if ，什么时候用v-show?

v-show靠页面的样式进行控制，未显示但内容已在页面上，而v-if内容是不在的

v-if判断是否加载，可以减轻服务器的压力，但在需要时加载有更高的切换开销；v-show调整DOM元素的CSS的dispaly属性，可以使客户端操作更加流畅，但有更高的初始渲染开销。如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

循环 v-for

<!-- 数组的遍历:类似于java里的foreach循环,o表示每次获取到的数据 -->
<p v-for="o in arrays">{{o}}</p>
<!-- o是数据,i是下标 -->
<p v-for="o,i in arrays">下标是:{{i}}---数据是:{{o}}</p>
<p v-for="(o,i) in arrays">下标是:{{i}}---数据是:{{o}}</p>

事件 v-on

@click为v-on:click的缩写

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<p>{{count}}</p>
			<button @click="count++">点我</button>
			
			<button onclick="show()">javascript 点我</button>
			<button v-on:click="show()">v-on:click 点我</button>
			<button @click="show()">简写的事件,点我</button>
		</div>
	</body>
	<script>
		function show(){
			alert("old show");
		}
		new Vue({
			el: "#app",
			data:{
				msg : "hello vue",
				count:1
			},
			methods:{
				show : function(){
					console.log(this.msg)
				}
			}
		})
	</script>
</html>

绑定 v-bind

当属性的值是变量而不是字符串时，通过v-bind进行标识，vue会自动处理

全称: v-bind:href
简称： :href 冒号开头就说明后面跟的是变量

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<a href="http://act.codeboy.com">java培优</a>
			<a v-bind:href="url" target="_blank">{{urlname}}</a>
			<a :href="url" target="_blank">{{urlname}}</a>
		</div>
	</body>
	<script>
		var vm = new Vue({
			el: "#app",
			data:{
				name: "tony",
				url: "http://act.codeboy.com",
				urlname: "达内java培优"
			}
		})
	</script>
</html>

Vue组件

注册一个全局组件(所有实例都能用)语法格式如下：
Vue.component(tagName, options)
tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件:
也可以注册一个局部组件(只能在这个实例中使用)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 1.先引入vue -->
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<starter></starter>
			<foot></foot>
		</div>
		<script>
			//全局组件
			Vue.component('foot',{
				template:'<ol><li>你好</li><li>你好</li><li>你好</li></ol>'
			})
			new Vue({
				el:'#app',
				//局部组件
				components:{
					starter:{//组件名
						template:'<h1>哈哈</h1>'
					}
				}
			})
		</script>
	</body>
</html>

构建Vue项目 lifecycle+npm+webpack

Vue的生命周期 lifecycle

生命周期函数：

vue实例在某一个时间点会自动执行这些函数；
生命周期钩子函数不允许写成箭头函数；
可以分为3个阶段，一共8个钩子：初始化阶段（创建前/后, 载入前/后），运行中（更新前/后），销毁（销毁前/销毁后）

细分每个过程：
在这里插入图片描述

安装nodejs并验证

安装nodejs,下一步下一步就可以,可以安装最新的15版本,win7的话可以安装14版本.使用以下dos命令提示符下执行：

node -v      # v8.11.3，至少8以上,最新的是v15.11.0

配置npm

Nodejs下的包管理器,Nodejs中包含了npm,无需单独安装.默认去官网下载资源,可以换成国内的镜像

npm config get registry # 查看当前配置的镜像，结果是默认的国外网址https://registry.npmjs.org/

npm config set registry https://registry.npm.taobao.org #设置成淘宝镜像

npm config get registry #再获取查看,结果是修改后的https://registry.npm.taobao.org/

参数说明

注意单词的大小写

-i 安装指令，全拼： --install
-S 生产环境，全拼： --save
-D 开发环境，全拼： --save—dev
-O 可选依赖，全拼： --save—optional
-E 精确安装指定模块版本，全称：--save—exact
-g 全局安装，全拼： --global

脚手架安装

vue-cli: 用户生成Vue工程模板（帮你快速构建一个vue的项目，也就是给你一套vue的结构，包含基础的依赖库）
vue-cli: 脚手架工具安装与配置（需要几分钟）

npm install vue-cli -g     #安装vue-cli脚手架---可能比较慢,要等几分钟

npm uninstall vue-cli -g   #卸载vue-cli脚手架 --- 大可不必

vue –V       #查看版本

where vue    #vue安装在哪里

创建Vue项目 npm

工作空间

创建一个文件夹作为工作空间
进入工作空间目录：D:\workspace\vue

生成vue项目

基于vue.js的官方webpack模板：(乱码无需理会)
webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包

vue init webpack 项目名           #此处项目名不能使用大写---可能比较慢,要等

在这里插入图片描述

注：

jt01 为自定义的项目名称
产生项目webpack模板，目录100+m，可见内容多复杂，庞大
会自动生成node_modules临时目录，可以删除，每次编译、运行会自动产生

启动项目 & 停止项目

cd jt01           # 进入项目目录

npm run dev       # 自动启动服务，ctrl+c 停止,可能要等几分钟

注意：端口号可能不同，默认为8080，如果发现端口占用npm很聪明，它会自动改变端口号，以其具体提示的端口信息为准。
在这里插入图片描述

打开Vue项目

在这里插入图片描述

简单来说项目加载的过程是：

index.html -> main.js -> App.vue -> index.js -> HelloWorld.vue

创建组件Car.vue

<template>
  <!-- 获取值 -->
  <h1>{{msg}}</h1>
  <!--  <h1>{{msg}}</h1> 报错,只能有一个根标签 -->
</template>

<script>
  /* 自定义组件 */
  export default{
    name:'Car',
    data(){
      return{
        msg:'hi components'
      }
    }
  }
</script>

<style>
</style>

修改App.vue，注册自定义组件

<template>
  <div id="app">
      <!-- 3.使用自定义组件,就像用标签 -->
    <Car></Car>
  </div>
</template>

<script>
  // 1.导入自定义组件,必须写./
  import Car from './components/Car.vue'

  export default {
    name: 'App',
    components:{ // 2.添加自定义组件
      Car //用了第一步的名字
    }
  }
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

安装 element-ui

访问官网: https://element.eleme.cn/#/zh-CN/component/installation,查看组件指南

安装

npm i element-ui –D  # 下载资料,这可能要等几分钟

修改 main.js,引入Element

//你可以引入整个 Element，或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Element。
//你可以参考官网的【快速上手】

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false

import ElementUI from 'element-ui'; //导入element
import 'element-ui/lib/theme-chalk/index.css';//导入element的css
//以上代码便完成了 Element 的引入。需要注意的是，样式文件需要单独引入。
Vue.use(ElementUI);//使用element


/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

【欸嘿】

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
Vue前端网页技术

Vue概念Vue是我们国人开发的，作者：尤雨溪，是一个基于JavaScript的渐进式前端框架，更符合中国人习惯，在中国很多大型一线企业中广泛应用。Vue3.0使用TypeScript编写，TypeScript是JavaScript的超集，微软研发，语法更加细致严谨，改js脚本语言为向一线强语言java、c靠拢，可以构建大型项目，基于ES6标准。官网https://cn.vuejs.org/ #官网https://cdn.jsdelivr.net/npm/vue/dist/vue.js #下载最
复制链接

扫一扫