详解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 相关文章推荐
javascript  Error 对象 错误处理
May 18 Javascript
JavaScript 密码强度判断代码
Sep 05 Javascript
CSS和JS标签style属性对照表(方便js开发的朋友)
Nov 11 Javascript
Js+Jq获取URL参数的集中方法示例代码
May 20 Javascript
jQuery焦点控制图层展示延迟隐藏的方法
Mar 09 Javascript
微信小程序实现之手势锁功能实例代码
Jul 19 Javascript
如何解决vue2.0下IE浏览器白屏问题
Sep 13 Javascript
vue-cli中vue本地实现跨域调试接口
Jan 16 Javascript
VUE 解决mode为history页面为空白的问题
Nov 01 Javascript
JS将指定的某个字符全部转换为其他字符实例代码
Oct 13 Javascript
JavaScript实现缓动动画
Nov 25 Javascript
JQuery绑定事件四种实现方法解析
Dec 02 jQuery
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中在数据库中保存Checkbox数据(2)
2006/10/09 PHP
php获取mysql数据库中的所有表名的代码
2011/04/23 PHP
PHP 杂谈《重构-改善既有代码的设计》之五 简化函数调用
2012/05/07 PHP
php 生成自动创建文件夹并上传文件的示例代码
2014/03/07 PHP
54个提高PHP程序运行效率的方法
2015/07/19 PHP
SSO单点登录的PHP实现方法(Laravel框架)
2016/03/23 PHP
PHP 结合 Boostrap 结合 js 实现学生列表删除编辑及搜索功能
2019/05/21 PHP
ThinkPHP5与单元测试PHPUnit使用详解
2020/02/23 PHP
js 匿名调用实现代码
2009/06/19 Javascript
NodeJS的模块写法入门(实例代码)
2012/03/07 NodeJs
如何获取JQUERY AJAX返回的JSON结果集实现代码
2012/12/10 Javascript
JavaScript实现节点的删除与序号重建实例
2015/08/05 Javascript
Bootstrap CSS布局之列表
2016/12/15 Javascript
JS实现的简单四则运算计算器功能示例
2017/09/27 Javascript
vue+web端仿微信网页版聊天室功能
2019/04/30 Javascript
Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法
2019/09/11 Javascript
[02:37]2018DOTA2亚洲邀请赛赛前采访 VP.no[o]ne心中最强SOLO是谁
2018/04/04 DOTA
python装饰器使用方法实例
2013/11/21 Python
Python入门篇之编程习惯与特点
2014/10/17 Python
每天迁移MySQL历史数据到历史库Python脚本
2018/04/13 Python
python将秒数转化为时间格式的实例
2018/09/16 Python
python添加模块搜索路径和包的导入方法
2019/01/19 Python
Python爬虫 bilibili视频弹幕提取过程详解
2019/07/31 Python
详解PyTorch手写数字识别(MNIST数据集)
2019/08/16 Python
Django接收自定义http header过程详解
2019/08/23 Python
Python如何优雅获取本机IP方法
2019/11/10 Python
python argparse模块通过后台传递参数实例
2020/04/20 Python
Python数据可视化图实现过程详解
2020/06/12 Python
Pytest测试框架基本使用方法详解
2020/11/25 Python
image-set实现Retina屏幕下图片显示详细介绍
2012/12/24 HTML / CSS
adidas旗下高尔夫装备供应商:TaylorMade Golf(泰勒梅高尔夫)
2016/08/28 全球购物
印尼在线购买隐形眼镜网站:Lensza.co.id
2019/04/27 全球购物
PHP如何对用户密码进行加密
2014/07/31 面试题
个人委托书范本
2014/09/13 职场文书
初中物理教学反思
2016/02/19 职场文书
Hive HQL支持2种查询语句风格
2022/06/25 数据库