心得技巧
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧

cgb2109-day14

发布时间：2022-06-30 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了cgb2109-day14，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

文章目录

    • 一,Vue组件的练习
      • --1,测试
    • 二,Vue路由Router
      • --1,概述
      • --2,测试
      • --3,总结
      • --4,练习
    • 三,Vue的ajax
      • --1,概述
      • --2,测试
    • 四,Vue-cli
      • --1,概述
      • --2,安装vue-cli
        • 1,安装原因
        • 2,安装nodejs.mis的应用程序
        • 3,验证nodejs是否安装:
        • 4,安装脚手架:
    • 五,创建Vue项目!!
      • 1,首先创建一个文件夹,用来存放下载好的vue项目资源
      • 2,在这个文件夹处,执行命令来下载
      • 3,开始下载:
      • 4,检查:
      • 5,启动项目
      • 6,访问项目
    • 六,在项目中添加自己的资源
      • 1,用Hbuilder打开你下载好的项目.
      • 2,目录结构
      • 3,在vue项目中添加自定义组件
        • 在src/components文件夹里,创建组件
        • 在src/App.vue文件里,注册组件
        • 测试

一,Vue组件的练习

–1,测试

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 组件</title>
		<!-- 自己写一个全局组件和局部组件 -->
		<script src="vue.js"></script>
	</head>
	<body>
		<div id="app1">
			<!-- 1,使用组件 -->
			<Com1></Com1>
			<Com2></Com2>
			<Com10></Com10>
			<Com20></Com20>
		</div>
		<div id="app2">
			<!-- 1,使用组件 -->
			<Com1></Com1>
			<Com10></Com10>
		</div>
		<script>
			/* 2.创建全局组件,在全局使用 */
			Vue.component('Com1',{
				template:'<h1>你好Com1</h1>'
			})
			Vue.component('Com10',{
				template:'<ol><li>我是元素1</li><li>我是元素2</li></ol>'
			})
			new Vue({
				el:"#app1",
				/* 3.创建局部组件:只能在局部(id=app1的位置)使用 */
				components:{
					'Com2':{
						template:'<h1>你好Com2</h1>'
					},
					'Com20':{
						template:'<button style="background-color: red;">按钮1</button>'
					}
				}
			})
			new Vue({
				el:"#app2"
			})
		</script>
	</body>
</html>

二,Vue路由Router

–1,概述

基于Vue组件化的思想, 从用户发起一个请求,一直到展示指定组件,这个过程就是Vue路由负责的 使用步骤: vue.js + vue-router.js 引入到网页中

–2,测试

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 Vue路由</title>
		<!-- 1.引入js文件,注意顺序! -->
		<script src="vue.js"></script>
		<script src="vue-router.js"></script>
	</head>
	<body>
		<!-- 2.准备数据渲染区,即将展示组件的功能 -->
		<div id="app">
			<!-- 3.4,点击不同的元素,即将路由到不同的组件 -->
			<router-link to="/home">主页</router-link>
			<router-link to="/help">帮助页</router-link>
			<!-- 3.5,展示组件的内容 -->
			<router-view></router-view>
		</div>
		<!-- 3.创建Vue对象 -->
		<script>
			//3.3,创建组件,让路由动态匹配
			var home={
				template:'<h1>我是主页..</h1>'
			}
			var help={
				template:'<h1>我是帮助页..</h1>'
			}
			//3.2,创建路由的细则
			//VueRouter表示vue路由的对象,routes属性用来描述细则
			var router=new VueRouter({
				//属性名:属性值
				routes:[
					//根据不同的请求,路由到不同的组件
					//path:访问路径,component:组件名称
					{path:"/home",component:home}  ,
					{path:"/help",component:help}
				]
			})
			new Vue({
				el:"#app",
				//3.1,设置路由功能
				// router:router //key 和value一样时,可以简写
				router//同上,简写形式
			})
		</script>
	</body>
</html>

–3,总结

cgb2109-day14

–4,练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习路由</title>
		<script src="vue.js"></script>
		<script src="vue-router.js"></script>
	</head>
	<body>
		<div id="app">
			<router-link to="/runoob">runoob</router-link>
			<router-link to="/w3c">w3c</router-link>
			<router-view></router-view>
		</div>
		<script>
			var runoob={
				template:"<a href='http://www.runoob.com'>http://www.runoob.com</a>"
			}
			var w3c={
				template:"<a href='http://www.w3school.com.cn'>http://www.w3school.com.cn</a>"
			}
			var router=new VueRouter({
				routes:[
					{path:"/runoob", component:runoob},
					{path:"/w3c", component:w3c}
				]
			})
			new Vue({
				el:"#app",
				router
			})
		</script>
	</body>
</html>

三,Vue的ajax

–1,概述

可以避免刷新整个网页,而实现了局部刷新的效果,异步访问的. 提高了网页的动态性,提高了网页的响应速度. 在Vue框架中,封装了Ajax的复杂语法,技术命名叫axios, 使用步骤: 导入vue.js + axios.js 文件 语法: axios.get(java程序的访问方式).then( a => { console.log(a); } )

–2,测试

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 axios的语法</title>
		<!-- 1.导入js文件:
			vue.js核心 + vue-router.js是路由 + axios.js使用vue封装好的Ajax技术
		 -->
		<script src="vue.js"></script>
		<script src="axios.min.js"></script>
	</head>
	<body>
		<div id="app">
			<button @click="show()">按钮</button>
		</div>
		<script>
			//Vue的属性:el挂载点 + data数据区 + methods方法区 
			      //components局部组件 + router创建路由
			new Vue({
				el:"#app" ,
				methods:{
					show(){
						//vue提供的对象,get函数是指即将发起一个get请求
						//参数是一段java程序的访问方式
						//当程序访问成功时,then函数是vue自动调用的函数
						axios.get('http://www.baidu.com/').then(
							//a记录着java程序的返回值return
							//=>叫箭头函数
							a => {
								//在函数体重,处理返回的结果
								console.log(a.data);
							}
						)
					}
				}
			})
		</script>
	</body>
</html>

四,Vue-cli

–1,概述

npm:包管理器,npm命令会去指定的网址下载/安装好多的包(文件夹结构) webpack:自动化构建项目的命令,可以自动下载项目相关的资源(html css js 图片),而且可以自动压缩,打包.

–2,安装vue-cli

1,安装原因

为了能够成功的使用vue项目,必须先安装vue-cli脚手架

2,安装nodejs.mis的应用程序

(win7系统只能装nodejs13的,win10系统装nodejs14),
双击下一步下一步就可以了.

3,验证nodejs是否安装:

C:UsersWangYiBo>node -v
v14.17.5

4,安装脚手架:

C:UsersWangYiBo>npm config get registry  #第一次获取,会是一个国外的网址,即将下载的非常慢,不好,必须修改!
C:UsersWangYiBo>npm config set registry https://registry.npm.taobao.org #就是把npm的默认网址改成淘宝的!
C:UsersWangYiBo>npm install vue-cli -g #安装vue脚手架,本质上是去npm下载了好多包,原则是一路没有遇到飘红的ERR,只有黄色的WARN没关系,遇到飘红就重新执行这个命令(也许要多次执行)
C:UsersWangYiBo>vue -V  #查看vue-cli的版本
2.9.6
C:UsersWangYiBo>where vue #查看下载的位置 (npm文件夹有20M左右)

五,创建Vue项目!!

1,首先创建一个文件夹,用来存放下载好的vue项目资源

2,在这个文件夹处,执行命令来下载

cgb2109-day14

3,开始下载:

E:workspacevue>vue init webpack jt  #准备下载jt项目
#下载一些项目需要的资源,但是要进行一些配置,参考下图选择yes或者no

cgb2109-day14

4,检查:

原则还是一路没有遇到飘红的ERROR 还有提示信息: Project initialization finished!

5,启动项目

E:workspacevue>cd jt  #进入项目所在的文件夹
E:workspacevuejt>npm run dev   #启动项目(在哪个项目执行这个命令就启动哪个项目)

6,访问项目

cgb2109-day14

六,在项目中添加自己的资源

1,用Hbuilder打开你下载好的项目.

文件-打开目录-浏览项目位置-打开

2,目录结构

cgb2109-day14

3,在vue项目中添加自定义组件

在src/components文件夹里,创建组件

<template>
  <div>
      {{msg}}
  </div>
</template>
<script>
//表明 这个组件可以导出
export default{
    name:'Person',//组件名
    data(){
      return{
        msg :'hello vue project~'
      }
    }
}
</script>

<style>
</style>

在src/App.vue文件里,注册组件

<template>
  <div id="app">
    //3,使用自定义的组件
    <Person></Person>
  </div>
</template>
<script>
//1.导入指定的自定义组件 ,路径要求必须有./
import Person from './components/Person.vue'
export default {
  name: 'App',
  components:{ //2.添加组件
    Person //使用第一步导入成功的组件名
  }
}
</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>

测试

1,进入项目所在的文件夹里,运行启动命令来启动项目 : npm run dev 2,打开浏览器访问: http://localhost:8080 ,观察有没有展示你自定义组件的内容

cgb2109-day14

脚本宝典总结

以上是脚本宝典为你收集整理的cgb2109-day14全部内容，希望文章能够帮你解决cgb2109-day14所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：
猜你在找的心得技巧相关文章
其他相关热搜词更多
微信小程序PHPVueVue.jsPythonPython3SQLJSJavaScriptCSSCSS3Web前端C++C语言HTMLJavaTypeScriptes6鸿蒙OS
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新心得技巧教程
热门心得技巧教程