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


Posted in Javascript onMarch 24, 2017

按照国际惯例先安利:Useful-Open-Source-Android_3water.rar

上一篇把环境搭完了,然后把默认的8080内容跑通了,这一片尝试把常用的一些标签给学习一下(按钮啊,列表,图片啥的)

整篇都是跟着官方教程学,只是加入一系列自己的理解和分析,方便以后温故

默认环境已经帮我们把包结构建好了,如下

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

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

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

列表

普通的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后面随便改 铁定报错)

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

这个也是绑定数据的,不信你控制台改改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-基本标签和自定义控件

教程的第一个大章节就浓缩完了,非常简短简单,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于firefox的ElementTraversal 接口 使用说明
Nov 11 Javascript
jQuery EasyUI datagrid实现本地分页的方法
Feb 13 Javascript
jquery模拟实现鼠标指针停止运动事件
Jan 12 Javascript
JQuery中attr属性和jQuery.data()学习笔记【必看】
May 18 Javascript
BootStrap轻松实现微信页面开发代码分享
Oct 21 Javascript
微信小程序 自定义Toast实例代码
Jun 12 Javascript
JS验证输入的是否是数字及保留几位小数问题
May 09 Javascript
在vue中读取本地Json文件的方法
Sep 06 Javascript
js canvas实现5张图片合成一张图片
Jul 15 Javascript
微信小程序使用npm包的方法步骤
Aug 13 Javascript
微信小程序通过一个json实现分享朋友圈图片
Sep 03 Javascript
element 中 el-menu 组件的无限极循环思路代码详解
Apr 26 Javascript
JS验证input输入框(字母,数字,符号,中文)
Mar 23 #Javascript
jQuery编写textarea输入字数限制代码
Mar 23 #jQuery
移动端刮刮乐的实现方式(js+HTML5)
Mar 23 #Javascript
BootStrap+Mybatis框架下实现表单提交数据重复验证
Mar 23 #Javascript
jquery实现全选、全不选以及单选功能
Mar 23 #jQuery
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
Mar 23 #jQuery
纯jQuery实现前端分页功能
Mar 23 #jQuery
You might like
PHP中PDO基础教程 入门级
2011/09/04 PHP
php简单实现批量上传图片的方法
2016/05/09 PHP
修改Laravel5.3中的路由文件与路径
2016/08/10 PHP
PHP聊天室简单实现方法详解
2018/12/08 PHP
jquery.validate使用攻略 第五步 正则验证
2010/07/01 Javascript
jQuery渐变发光导航菜单的实例代码
2013/03/27 Javascript
原生js编写设为首页兼容ie、火狐和谷歌
2014/06/05 Javascript
jquery中attr和prop的区别分析
2015/03/16 Javascript
js使用onmousemove和onmouseout获取鼠标坐标的方法
2015/03/31 Javascript
JavaScript控制网页层收起和展开效果的方法
2015/04/15 Javascript
详解JavaScript的表达式与运算符
2015/11/30 Javascript
基于javascript实现图片切换效果
2016/04/17 Javascript
微信小程序开发之相册选择和拍照详解及实例代码
2017/02/22 Javascript
JavaScript之filter_动力节点Java学院整理
2017/06/28 Javascript
利用adb shell和node.js实现抖音自动抢红包功能(推荐)
2018/02/22 Javascript
Node Puppeteer图像识别实现百度指数爬虫的示例
2018/02/22 Javascript
vue多层嵌套路由实例分析
2019/03/19 Javascript
jQuery操作元素的内容和样式完整实例分析
2020/01/10 jQuery
详解Python中 sys.argv[]的用法简明解释
2017/12/20 Python
Python中查看变量的类型内存地址所占字节的大小
2019/06/26 Python
Python 计算任意两向量之间的夹角方法
2019/07/05 Python
关于python中的xpath解析定位
2020/03/06 Python
浅谈python opencv对图像颜色通道进行加减操作溢出
2020/06/03 Python
浅谈Keras参数 input_shape、input_dim和input_length用法
2020/06/29 Python
Python如何截图保存的三种方法(小结)
2020/09/01 Python
pandas 数据类型转换的实现
2020/12/29 Python
APM Monaco中国官网:来自摩纳哥珠宝品牌
2017/12/27 全球购物
TUMI新加坡官网:国际领先的商旅箱包品牌
2019/01/12 全球购物
澳大利亚在线批发商:Simply Wholesale
2021/02/24 全球购物
业务员薪酬管理制度
2014/01/15 职场文书
简历上的自我评价
2014/02/03 职场文书
实习护士自荐信
2014/06/21 职场文书
小班下学期幼儿评语
2014/12/30 职场文书
毕业实习计划书
2015/01/16 职场文书
初三毕业感言
2015/07/31 职场文书
如何利用golang运用mysql数据库
2022/03/13 Golang