vue1.x 基础使用(一)
来源:互联网 发布:销售数据报告 编辑:程序博客网 时间:2024/06/16 13:00
最近项目进度慢下来了,花点时间总结一下。文章会从vue1.x 到2.x的一些说明以及使用,也会文章中的代码共享出来。详细请关注后续。
简介:感慨是会用到一些第三方的模块下载工具,不过不要担心,都是一步步来的,偏前端先是用到了 bower 把vue.js 下载下来,引用的方法也和以前一样,直接引用 路径。后面陆续会换到其他的一些工具,如gulp,wekpack等。也会介绍一些常用的工具。如 bable 下一代的javascript 语法编译器,vue的路由,vue的交互。
1.bower 前端包管理器
原因:现在前端也日新月异,一些第三方包,插件,模块,包也在不断更新,相互依赖的包也是很多,如项目需要用到bootstrap,而bootstrap又依赖jquery,以往方法是下载bootstrap后,又下载jquery才能用,而用bower 下载只需要下载bootstrap 它会把相关依赖的包也下载下来,到时候只需要做相关的引入就行了。
安装 bower
bower 也是通过npm安装
npm install -g bower
查看bower帮助
bower -h
建立 bower json文件
bower init
安装 第三方的包如 bootstrap
bower install bootstrap
效果如下:
下载好的第三方包都是在 bower_components 这个文件夹下面
一般文件都会在 dist 这个文件夹下
简单引用方式和以往一样:
<script src="../bower_components/jquery/dist/jquery.js"></script> <script src="../bower_components/bootstrap/dist/js/bootstrap.js"></script>
如果你想把配置写在json里面,在下载第三方包时候加 –save
如:
bower install bootstrap --save
这样
2.vue 基础使用
html部分:
<span>{{msg}}</span><!--引入vue.js--><script src="../bower_components/vue/dist/vue.js"></script>
javascript 部分:
var vm = new Vue({ el:'body',// data(){ msg:'hello' }})
array 部分
<span>{{arr}}</span>data(){ ... arr:['can','tom'], ...}
json 部分
{{ jsonObj | json }}data(){ ... jsonObj:{'name':'can','age':25}, ...}
v-for 部分
<span>for 循环使用</span> <ul> <li v-for="phome in phoneList ">{{phome}}</li> </ul> <span>or</span> <ul> <li v-for="value in phoneList ">{{value}} 下标为 {{$index}}</li> </ul> data(){ phoneList:['iPhome 6','iPhome 7','iPhome 8'],}
基础部分的
<script> var vm = new Vue({ el:'#box', data:{ msg:'vue', msg1:1, msg2:false, arr:['can','tom'], jsonObj:{'name':'can','age':25}, phoneList:['iPhome 6','iPhome 7','iPhome 8'], fruits:[ {'name':'apple','price':3.5}, {'name':'banana','price':1.9}, {'name':'orange','price':2.5}, {'name':'grape','price':3.2} ] } });</script>
基础代码链接
3.事件
click 事件
html:
<span>以前的事件</span> <button onclick="btnclick()" >button</button> <hr> <span>vue的事件</span> <br> <p> @写法(简写,推荐使用)</p> <button @click="vclick()">v-button</button>
javascript:
// 以前的按钮事件 function btnclick(){ alert('我是点击事件'); }// 用vue 的方式 var vm = new Vue({ el:'body', methods: { vclick(){ alert('vue click'); } } })
4.基础的综合例子
效果如下:
查看时候:
删除时候:
详细代码看 tabelshow.html
这篇大概写了一下和很普通的例子,后续会继续分享,请继续关注。
阅读全文
0 0
- vue1.x 基础使用(一)
- Vue1.x
- vue1.x 事件对象(二)
- 二三、vue2与vue1的区别(一)
- vue1
- vue1
- Vue1.0系列使用总结
- cocos2d-x基础(一)CCNode
- coco2d-x 3.0基础浅谈(一)
- webpack2.x基础属性讲解(一)
- python 3.X基础(一)
- 使用angularjs1.x构建前台开发框架(一)——构建基础架构
- Tui-x 基础使用
- Cocos2d-x PluginX (一)使用
- Zxing3.x的简单使用(一)
- git基础使用(一)
- git基础使用(一)
- MongoDB基础使用(一)
- Webview--如何让加载进来的页面自适应手机屏幕分辨率
- 对于sort函数更深的理解
- 栈实现迷宫算法
- static用法
- 软考软件设计师
- vue1.x 基础使用(一)
- hdu 6155
- gitBase 提交代码
- 项目管理——产品开发各角色职能及技能要求
- 反射第二步 : 九大内置的Class 实例 : JVM 中预先提供好的实例。
- 快递鸟获取物流信息的接口
- 使用极光推送实现分组发送和服务端集成
- python requests登录知乎
- C/C++开发: 位域计算详解 + 例子