脚本宝典收集整理的这篇文章主要介绍了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 这个文件夹下

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

    <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

这篇大概写了一下和很普通的例子，后续会继续分享，请继续关注。

脚本宝典总结

以上是脚本宝典为你收集整理的vue1.x 基础使用（一）全部内容，希望文章能够帮你解决vue1.x 基础使用（一）所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。