详解Vue-基本标签和自定义控件

更新时间：2017年03月24日 08:26:13 作者：王亟亟

本篇文章主要介绍了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.如果存在子/父控件的概念的话，一定要先初始化/加载子控件。

效果如下：

这里写图片描述

教程的第一个大章节就浓缩完了，非常简短简单，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue
控件

Vuex的热更替如何实现
这篇文章主要介绍了Vuex的热更替如何实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-06-06
Vue.js实战之利用vue-router实现跳转页面
对于单页应用，官方提供了vue-router进行路由跳转的处理，这篇文章主要给大家介绍了Vue.js实战之利用vue-router实现跳转页面的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。
2017-04-04
Vue中Element的table多选表格如何实现单选
这篇文章主要介绍了Vue中Element的table多选表格如何实现单选，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-07-07
vue如何循环请求一个接口
这篇文章主要介绍了vue如何循环请求一个接口问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-07-07
vue实现把页面导出成word文件的方法
这篇文章主要为大家详细介绍了vue实现把页面导出成word文件的方法,文中的实现步骤讲解详细,并且有详细的代码示例,需要的小伙伴可以参考一下
2023-10-10
详解Vue3 中的计算属性及侦听器
这篇文章主要介绍了详解Vue3 中的计算属性及侦听器，文章围绕主题的相关资料展开详细的内容介绍，具有一定的参考价值，需要的朋友可以看下一下
2022-08-08
vue基于input实现密码的显示与隐藏功能
这篇文章主要介绍了vue基于input实现密码的显示与隐藏功能,文末给大家介绍了vue 如何实现切换密码的显示与隐藏效果，本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下
2022-01-01
如何让vue长列表快速加载
这篇文章主要介绍了如何让vue长列表快速加载，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下
2021-03-03
vue使用jsencrypt实现rsa前端加密的操作代码
这篇文章主要介绍了vue使用jsencrypt实现rsa前端加密,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-09-09
vue组件component的注册与使用详解
组件是Vue是一个可以重复使用的Vue实例, 它拥有独一无二的组件名称,它可以扩展HTML元素,以组件名称的方式作为自定义的HTML标签，这篇文章主要介绍了vue组件component的注册与使用,需要的朋友可以参考下
2022-08-08