详解Vue-基本标签和自定义控件
按照国际惯例先安利: 上一篇把环境搭完了,然后把默认的8080内容跑通了,这一片尝试把常用的一些标签给学习一下(按钮啊,列表,图片啥的) 整篇都是跟着官方教程学,只是加入一系列自己的理解和分析,方便以后温故 默认环境已经帮我们把包结构建好了,如下 index.html是我们的页面 main.js是让App.vue和页面产生关联的“挂载js文件“(不知道这么描述合适不合适,有问题欢迎提出) App.vue就是我们具体的vue代码 vue本身对实际DOM进行了一层封装,我们的渲染等一系列行为其实都是在一个”虚拟dDOM”上进行操作,然后会刷新你需要刷新的地方,而不是整体刷新(这也就是性能相对好点一部分原因) 像React的render函数内渲染ui控件一样,vue是在一个的便签下写自己的内容,像这样 有学过js 的小伙都知道,这里的msg是一个带值的引用而不是一个'msg'而他的值来源于data{}下的属性 msg 完整代码如下 这就会在页面上打出 Hello wjj!了,不信你悄悄看 你的值属性都在data{}内,而一些诸如method,component则是和data{}平级的(这部分之后会有一个例子) vue使用v-加上一些特殊属性形成 指令,诸如v-bind就可以响应式的让数据和DOM发生绑定,只要数据变了页面就会刷新,普通的文本试过了接下来我们试试按钮 按钮{{ message }}
这边用 v-on来响应onclick事件 把时间交由一个方法 showlog来处理,这个方法也没干啥事 打了一句log 列表普通的h5做一个列表需要
|