详解Vue-基本标签和自定义控件
按照国际惯例先安利：Useful-Open-Source-Android_jb51.rar
上一篇把环境搭完了，然后把默认的8080内容跑通了，这一片尝试把常用的一些标签给学习一下（按钮啊，列表，图片啥的）
整篇都是跟着官方教程学，只是加入一系列自己的理解和分析，方便以后温故
默认环境已经帮我们把包结构建好了，如下
index.html是我们的页面
main.js是让App.vue和页面产生关联的“挂载js文件“（不知道这么描述合适不合适，有问题欢迎提出）
App.vue就是我们具体的vue代码
vue本身对实际DOM进行了一层封装，我们的渲染等一系列行为其实都是在一个”虚拟dDOM”上进行操作，然后会刷新你需要刷新的地方，而不是整体刷新（这也就是性能相对好点一部分原因）
像React的render函数内渲染ui控件一样，vue是在一个<template></template>的便签下写自己的内容，像这样
<div id="app2">
{{ msg }}
</div>
有学过js 的小伙都知道，这里的msg是一个带值的引用而不是一个'msg'而他的值来源于data{}下的属性 msg
完整代码如下
<template>
<div id="app2">
{{ msg }}
</div>
</template>
<script>
export default {
name: 'app2',
data () {
return {
msg: 'Hello wjj!'
}
}
}
</script>
这就会在页面上打出 Hello wjj!了，不信你悄悄看
你的值属性都在data{}内，而一些诸如method,component则是和data{}平级的（这部分之后会有一个例子）
vue使用v-加上一些特殊属性形成 指令，诸如v-bind就可以响应式的让数据和DOM发生绑定，只要数据变了页面就会刷新,普通的文本试过了接下来我们试试按钮
按钮
<template>
<div id="app2">
<p>{{ message }}</p>
<button v-on:click="showlog">查看log</button>
</div>
</template>
<script>
export default {
name: 'app2',
data () {
return {
message: 'Hello Vue.js!'
}
},
methods: {
showlog: function () {
console.log(this.message)
}
}
}
</script>
这边用 v-on来响应onclick事件
把时间交由一个方法 showlog来处理，这个方法也没干啥事 打了一句log
列表
普通的h5做一个列表需要<ol> <li>配合的组合拳，Vue几乎一致，值也是从data{}里返回来的，像这样
<template>
<div id="app2">
<ol>
<li v-for="list in items">
{{ list.text }}
</li>
</ol>
</div>
</template>
<script>
export default {
name: 'app2',
data () {
return {
items:[
{ text : '123'},
{ text : '234' },
{ text : 345 },
{ text : 10086}
]
}
}
}
</script>
用v-for来修饰列表，这个命名也不是瞎取的 in前 是集合体 in后是集合属性（也就是item具体属性的key,这里是text,不信你 v-for后面随便改 铁定报错）
这个也是绑定数据的，不信你控制台改改list的数据就知道了，结果一定会变
逻辑判断
有v-for那也一定有v-if,看了看api还真有 当v-if的值为false时，这个标签将不可见
<template>
<div id="app2">
<p v-if="isTrue">10086</p>
</div>
</template>
<script>
export default {
name: 'app2',
data () {
return {
isTrue: true
}
}
}
</script>
你把 isTrue改成false 10086就不显示了(这里还能使用表达式，这部分知识点以后讲到)
用户输入
<template>
<div id="app2">
<p>{{ message }}</p>
<input v-model="message">
</div>
</template>
<script>
export default {
name: 'app2',
data () {
return {
message: hi wjj
}
}
}
</script>
api提供了v-model 指令提供了控件与数据的双向绑定，让我们很轻松的能获取输入内容 此处message的值会根据输入变化而变化，并不是一个常量
第一个自定义控件
首先我们在 src目录下新建一个目录 叫”component”,建一个mycomponent.vue文件，然后也让他打2句话吧
<template>
<div id="mycomponent">
<h1>我是第一个自定义控件</h1>
<p>{{ msg }}</p>
</div>
</template>
<script type="text/javascript">
export default{
data(){
return{
msg : "hi i am wjj"
}
}
}
</script>
然后在我们的app.vue里调用他
<template>
<div id="app2">
<p>{{ message }}</p>
<input v-model="message"></input>
<mycomponent></mycomponent>
</div>
</template>
<script>
import mycomponent from './component/mycomponent.vue'
export default {
name: 'app2',
data () {
return {
message: 'Hello Vue.js!'
}
},
components: { mycomponent }
}
</script>
这里 有几个知识点
1.Vue的导入操作是在<script></script>标签里。
2.如果存在子/父控件的概念的话，一定要先初始化/加载子控件 。
效果如下：
教程的第一个大章节就浓缩完了，非常简短简单，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
在权限管理系统中，菜单也属于权限控制的一个资源，属于角色控制的一环。不同角色用户，登录系统后，出现的系统菜单是不同的。菜单结合路由集合，实现可访问路由的过滤，也就实现了对应角色菜单的展示和可访问路由的控制。2021-05-05
组件是Vue.js最强大的功能之一,组件可以扩展HTML元素,封装可重用的代码,下面这篇文章主要给大家介绍了关于vue如何动态加载组件的相关资料,需要的朋友可以参考下2022-10-10
这篇文章主要介绍了vue后台管理如何配置动态路由菜单，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要为大家详细介绍了vue实现顶部左右滑动导航，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
本文主要介绍了浅谈vite和webpack的区别，从性能优化的几个方便讲解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
这篇文章主要为大家详细介绍了如何在 Vue 3 中实现动态路由注册和手动导航,确保用户访问的页面与权限对应,感兴趣的小伙伴可以跟随小编一起学习一下2024-12-12
今天小编大家分享一篇解决vuex数据异步造成初始化的时候没值报错问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
this.$emit()的作用大家应该也都知道,主要用于子组件像父组件传值,这篇文章主要给大家介绍了关于vue中this.$emit使用方法的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-02-02
本文通过两种方案给大家介绍了Vue程序化的事件监听器，每种方案通过实例代码给大家介绍的非常详细,需要的朋友可以参考下2020-01-01
最近项目中让实现一个导入导出Excel的功能,下面这篇文章主要给大家介绍了关于前端利用vue实现导入和导出功能的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-09-09
最新评论