栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

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

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

详解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是在一个的便签下写自己的内容,像这样


 {{ msg }}

有学过js 的小伙都知道,这里的msg是一个带值的引用而不是一个'msg'而他的值来源于data{}下的属性 msg

完整代码如下





这就会在页面上打出 Hello wjj!了,不信你悄悄看

你的值属性都在data{}内,而一些诸如method,component则是和data{}平级的(这部分之后会有一个例子)
vue使用v-加上一些特殊属性形成 指令,诸如v-bind就可以响应式的让数据和DOM发生绑定,只要数据变了页面就会刷新,普通的文本试过了接下来我们试试按钮

按钮





这边用 v-on来响应onclick事件

把时间交由一个方法 showlog来处理,这个方法也没干啥事 打了一句log

列表

普通的h5做一个列表需要

  1. 配合的组合拳,Vue几乎一致,值也是从data{}里返回来的,像这样

    
    
    
    
    

    用v-for来修饰列表,这个命名也不是瞎取的 in前 是集合体 in后是集合属性(也就是item具体属性的key,这里是text,不信你 v-for后面随便改 铁定报错)

    这个也是绑定数据的,不信你控制台改改list的数据就知道了,结果一定会变

    逻辑判断

    有v-for那也一定有v-if,看了看api还真有 当v-if的值为false时,这个标签将不可见

    
    
    
    
    

    你把 isTrue改成false 10086就不显示了(这里还能使用表达式,这部分知识点以后讲到)

    用户输入

    
    
    
    
    

    api提供了v-model 指令提供了控件与数据的双向绑定,让我们很轻松的能获取输入内容 此处message的值会根据输入变化而变化,并不是一个常量

    第一个自定义控件

    首先我们在 src目录下新建一个目录 叫”component”,建一个mycomponent.vue文件,然后也让他打2句话吧

    
    
    
    
    

    然后在我们的app.vue里调用他

    
    
    
    
    

    这里 有几个知识点

    1.Vue的导入操作是在标签里。

    2.如果存在子/父控件的概念的话,一定要先初始化/加载子控件 。

    效果如下:

    教程的第一个大章节就浓缩完了,非常简短简单,希望对大家的学习有所帮助,也希望大家多多支持考高分网。

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/88911.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号