当前位置: 首页 > Web前端 > HTML

vue1.x的基本使用(一)

时间:2023-04-02 19:56:30 HTML

最近项目进度变慢了,抽点时间总结一下。文章会讲解和使用vue1.x到2.x,分享文中代码。详情请关注后续。简介:感觉会用到一些第三方模块下载工具,不过不用担心,都是一步一步搞定的。前端先用bower下载vue.js,引用方式和之前一样,直接引用路径即可。后面会转用其他工具,比如gulp、wekpack等,一些常用的工具也会介绍。比如bable的下一代javascript语法编译器,vue的路由,vue的交互。一、Bower前端包管理器理由:现在前端也是日新月异。一些第三方包、插件、模块、包也在不断更新,相互依赖的包也很多。比如项目需要用到bootstrap,bootstrap依赖jquery。以前的方法是下载bootstrap,然后下载jquery来使用,但是用bower下载,只需要下载bootstrap,它也会下载相关的依赖包,然后只需要做相关的import即可.安装bowerbower也是通过npm安装的npminstall-gbower查看bowerhelpbower-h创建bowerjson文件bowerinit安装bootstrap等第三方包bowerinstallbootstrap效果如下:下载的第三方包一般在bower_components文件夹下的文件会像之前一样在dist文件夹中简单引用:如果想把配置写成json,在下载第三方包的时候加上--save,比如:bowerinstallbootstrap--savelikethis2、vue基本使用html部分:{{msg}}javascript部分:varvm=newVue({el:'body',//data(){msg:'hello'}})array部分{{arr}}data(){...arr:['can','tom'],...}json部分{{jsonObj|json}}data(){...jsonObj:{'name':'can','age':25},...}v-for部分for循环使用

    {{phome}}</li>
    {{value}}下标为{{$index}}
data(){phoneList:['iPhome6','iPhome7','iPhome8'],}基础代码链接3.事件点击事件html:上一个事件button
Vue事件

@Writing(简写,推荐)

v-buttonjavascript://上一个按钮事件函数btnclick(){alert('I'我是一个点击事件');}//使用vue方式varvm=newVue({el:'body',methods:{vclick(){alert('vueclick');}}})4.基础综合示例效果如下:查看时:删除时:详细代码见tabelshow.html。