心得技巧
cgb2108-day13
发布时间：2022-07-02 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了cgb2108-day13，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
文章目录
一,Vue练习
–1,vue解析数据
<!DOCTYPE htML>
<html>
<head>
<meta charset="utf-8">
<tITle>测试 vue解析数据</title>
<script src="vue/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{str}}</h1>
<h1>{{person.name}} {{person.age}} {{person.coding()}}</h1>
<h1>{{users[1].address}} {{users[0].age}}</h1>
<h1>{{show()}}</h1>
</div>
<script>
new Vue({
el:"#app",//id选择器
data(){
return{
str:'vue',
person:{ //对象
name:'jack',
age:20,
coding(){ //简写的函数
alert(this.name+this.age)
}
},
users:[ //数组
{
name:'tony',
age:10,
address:'西安'
},
{
name:'jerry',
age:20,
address:'广州'
}
]
}
} ,
methods:{
show(){
alert('show()调用成功!');
}
}
})
</script>
</body>
</html>
–2,Vue指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 vue指令</title>
<script src="vue/vue.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="fun()">单击按钮</button>
<!-- 6.v-on给元素添加事件:dblclick双击事件,click单击事件 -->
<button v-on:dblclick="fun()">双击按钮</button>
<!-- 练习:用vue做一个点赞的按钮
QQ:2250432165
-->
<button v-on:click="count++">点赞{{count}}</button>
<!-- 7.v-bind: 把后面出现的数据当变量使用,会解析变量的值-->
<a href="https://www.baidu.COM/">点我,百度一下</a>
<!-- 问题:把url当字符串了,而不是当变量用的 -->
<a href="{{url}}">点我,百度一下</a>
<a v-bind:href="url" target="_blank">点我,百度一下</a>
</div>
<script>
new Vue({
el:"#app", //挂载点
data:{ //准备数据
count:0, //点赞数
url:'https://www.baidu.com'
},
methods:{ //创建函数
fun(){
console.LOG(1);
}
}
})
</script>
</body>
</html>
二,Vue组件
–1,概述
扩展了HTML的元素,好处是: 提高了组件代码的复用性 使用步骤: 1,创建组件 2,使用组件(当做HTML标签) 1,分类: 全局组件 和 局部组件 : 作用域 全局组件语法: Vue.component(1,2)–1是标签名/组件名2是配置选项 局部组件语法:给Vue对象添加components属性
–2,测试
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 vue组件</title>
<!-- vue组件:扩展了HTML元素(提高了组件代码的复用性),
使用步骤:1,定义组件 2,使用组件
1,定义组件分为:全局组件和局部组件
2,两种组件的区别??
全局组件:可以在所有的数据渲染区使用,而且是先定义再new Vue()
局部组件:是在Vue对象里使用components来定义的,只能在当前对象的数据渲染区来使用
-->
<script src="vue/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 2,使用全局组件(本质上就是一个HTML元素) -->
<car></car>
<!-- 4,使用局部组件(本质上就是一个HTML元素) -->
<person></person>
</div>
<div id="d">
id=d位置,使用的全局组件:<car></car> ,使用成功!
id=d位置,使用的局部组件:<person></person> ,使用失败!
</div>
<script>
//1,创建全局组件
//给vue添加组件(组件名称,组件的模板)
Vue.component('car',{
// 通过template,描述car组件的功能
template:'<h3>hello Component</h3>'
})
//创建Vue对象,拥有了car组件
new Vue({
el:"#app",
components:{//3,创建局部组件
// 组件名称,组件模板
'person': {
template:'<h1>局部组件</h1>'
}
}
})
new Vue({
el:"#d"
})
</script>
</body>
</html>
三,Axios技术
–1,概述
是Vue提供的Ajax技术,和JS实现的Ajax不同,Vue提供了更简单语法,封装了js代码 Ajax技术是实现了网页的局部刷新,异步访问的功能.好处是: 避免了刷新整个网页,而只刷新局部 1,语法:
axios.get(访问资源的url).then( a => { 处理a的方式,a代表了服务器给浏览器返回来的数据 } )
2,使用步骤: 引入vue.js + 引入axios.js
–2,测试
项目结构
网页代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>练习 vue的axios</title>
<script src="vue/vue.js"></script>
<script src="vue/axios.min.js"></script>
</head>
<body>
<div id="app">
<!-- 需求:点击按钮,去1.json里获取city的数据并展示 -->
<button @click="show()">点我,展示数据</button>
<select>
<option v-for="i in city">{{i}}</option>
</select>
</div>
<script>
new Vue({
el:"#app",
data:{
city:''
},
methods:{
show(){
//去1.json里获取city的数据
axios.get('1.json').then(
a => {
this.city=a.data.city;
}
)
}
}
})
</script>
</body>
</html>
1.json文件代码
{
"name":"jack",
"city":["北京","上海","深圳"]
}
总结
四,Vue路由
–1,概述
接受浏览器的请求,根据不同的请求的方式,找到匹配的组件 工具类: 1,VueRouter表示Vue的路由对象. 2,routes属性是VueRouter的核心属性,用来把不同的请求匹配的不同的组件 使用步骤: 1, 引入vue.js 2, 引入vue-router.js
–2,测试
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 vue路由</title>
<!-- 1.引入js文件 -->
<script src="vue/vue.js"></script>
<script src="vue/vue-router.js"></script>
</head>
<body>
<!-- 2.准备数据渲染区 -->
<div id="app">
<!-- 3.4.使用路由 ,router-link被HTML翻译成了a标签,to翻译成href属性-->
<router-link to="/home">1</router-link>
<router-link to="/help">2</router-link>
<!-- 3.5.展示匹配成功的组件,路由的出口 -->
<router-view></router-view>
</div>
<!-- 3.准备路由功能 -->
<script>
//3.3. 创建组件
let home = {
template:"<h1>我是主页~~</h1>"
}
let help = {
template:"<h1>我是帮助页~~</h1>"
}
//3.2.创建路由对象VueRouter,通过routes属性指定请求和组件的匹配关系
let router = new VueRouter({
routes:[
//path请求路径,component匹配到的组件
{path:'/home',component:home},
{path:'/help',component:help}
]
})
//3.1.通过router属性指定路由功能
new Vue({
el:"#app",
//router:router
router //key和value一样的话就可以直接简写
})
</script>
</body>
</html>
作业
把Vue的组件 / axios / 路由 的代码,最少,各敲三遍
脚本宝典总结
以上是脚本宝典为你收集整理的cgb2108-day13全部内容，希望文章能够帮你解决cgb2108-day13所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
猜你在找的心得技巧相关文章
- clion结合vcpkg以及GTest的使用 2022-07-07
- EGF 2022-06-06
- ExtJS 布局-Column布局（Column layout） 2022-06-05
- 颜色之ARGB与RGB、RGBA的区别与介绍 2022-04-15
- rgba中的a是什么意思 CSS之RGBA颜色指南 2022-04-15
- rootfs -根文件系统制作 2022-07-07
- 网页简单布局之结构与表现原则分享 2022-04-15
- 小项目中怎么防止Vue的闪现画面效果 2022-04-15
- 隐藏 Web 中的元素方法及优缺点教程详解 2022-04-15
- 告别硬编码让你的前端表格自动计算的实例代码 2022-04-15
全站导航更多
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漏洞分析
最新心得技巧教程