vue1.x 基础使用（一）

pkhope 发布于2019-08-01 17:25 / 293人阅读

摘要：最近项目进度慢下来了，花点时间总结一下。文章会从到的一些说明以及使用，也会文章中的代码共享出来。详细请关注后续。后面陆续会换到其他的一些工具，如，等。也会介绍一些常用的工具。如下一代的语法编译器，的路由，的交互。

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

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

如果你想把配置写在json里面，在下载第三方包时候加 --save
如：

bower install bootstrap --save

这样

2.vue 基础使用

html部分：

{{msg}}

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}}
        
        or
        
            {{value}}  下标为 {{$index}}
           


data(){
      phoneList:["iPhome 6","iPhome 7","iPhome 8"],
}

基础部分的

基础代码链接

3.事件 click 事件

html:

以前的事件

vue的事件

@写法(简写，推荐使用)

javascript:

    // 以前的按钮事件
    function btnclick(){
        alert("我是点击事件");
    }


// 用vue 的方式
    var vm = new Vue({
        el:"body",
        methods: {
            vclick(){
                alert("vue click");
            }
        }
    })

4.基础的综合例子

效果如下：

查看时候：

删除时候：

详细代码看 tabelshow.html

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

云服务器 GPU云服务器使用基础实验一云服务器的基本使用云基础基础数据

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/51129.html

vue1.x 基础使用（一）

摘要：最近项目进度慢下来了，花点时间总结一下。文章会从到的一些说明以及使用，也会文章中的代码共享出来。详细请关注后续。后面陆续会换到其他的一些工具，如，等。也会介绍一些常用的工具。如下一代的语法编译器，的路由，的交互。最近项目进度慢下来了，花点时间总结一下。文章会从vue1.x 到2.x的一些说明以及使用，也会文章中的代码共享出来。详细请关注后续。简介：感慨是会用到一些第三方的模块下载工...

xuexiangjys 2019-08-21 12:00 评论0 收藏0
vue1.x 事件对象（二）

摘要：事件句柄的新特性之一是能够使事件触发浏览器中的行为，比如当用户点击某个元素时启动一段。下面是一个属性列表，可将之插入标签以定义事件的行为。键盘事件的代码链接其他基础使用一本文主要简述了event 对象，顺便复习了一下事件句柄　(Event Handlers)，键盘的一些属性，以及最容易遇到的事件冒泡，同样的阻止事件冒泡，在vue 下是怎样解决的，vue 提供了那些方便去阻止事件冒泡。...

Enlightenment 2019-08-21 12:04 评论0 收藏0
vue1.x 事件对象（二）

摘要：事件句柄的新特性之一是能够使事件触发浏览器中的行为，比如当用户点击某个元素时启动一段。下面是一个属性列表，可将之插入标签以定义事件的行为。键盘事件的代码链接其他基础使用一本文主要简述了event 对象，顺便复习了一下事件句柄　(Event Handlers)，键盘的一些属性，以及最容易遇到的事件冒泡，同样的阻止事件冒泡，在vue 下是怎样解决的，vue 提供了那些方便去阻止事件冒泡。...

JasinYip 2019-08-01 17:27 评论0 收藏0
用Vue2.x重写github-explorer

摘要：温馨提示这个项目主要是用来学习的，所以我会不断建分支重写，下一个分支是。更加温馨的提示已经将运用在了大型的项目中，反响一流，下一步是转，希望喜欢的同学坚定信念啊。 github-explorer Rebuild with Vue 2.0 源码地址1.x版本Live DemoReact版 Demo 简介之前看到了一个很有意思的项目，是一位大牛写的github-explorer。他用的是...

keithyau 2019-08-22 11:02 评论0 收藏0