vue1 x 基础使用(一)

最近项目进度慢下来了,花点时间总结一下。文章会从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 这个文件夹下

简单引用方式和以往一样:

    
复制代码

javascript 部分:

var vm = new Vue({
      el:'body',//
      data(){
          msg:'hello'
      }
})
复制代码

array 部分

 {{arr}}

data(){
  ...
 arr:['can','tom'],
  ...
}
复制代码

json 部分

{{ jsonObj | json }}

data(){
  ...
 jsonObj:{'name':'can','age':25},
  ...
}
复制代码

v-for 部分

        for 循环使用
        
  • "phome in phoneList ">{{phome}}
or
  • "value in phoneList ">{{value}} 下标为 {{$index}}
data(){ phoneList:['iPhome 6','iPhome 7','iPhome 8'], } 复制代码

###基础部分的


                    
                    

你可能感兴趣的:(前端,json,javascript)