美文网首页
vue.js学习(1)

vue.js学习(1)

作者: 于晓鱼 | 来源:发表于2017-04-05 13:19 被阅读0次

1.安装vue

# 最新稳定版
$ npm install vue

补充:vue-cli

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖,走你
$cdmy-project
$ npm install
$ npm run dev

2.介绍vue
下面是官方文档(中文)的说明:

Vue.js(读音 /vjuː/, 类似于 **view**) 是一套构建用户界面的 **渐进式框架**。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用[单文件组件](https://vuefe.cn/v2/guide/single-file-components.html)和 [Vue 生态系统支持的库](https://github.com/vuejs/awesome-vue#libraries--plugins)开发的复杂单页应用。Vue.js 的目标是通过尽可能简单的 API 实现**响应的数据绑定**和**组合的视图组件**。

估计对于有的初学者同学来说,看到这个说明就已经懵了,不要紧,在后面的学习中会逐渐理解里面的每个概念。目前,只需知道两点就够了:

(1)vue很强大,基本能够满足你能想到的所有需求,你想不到的很多需要,它也能够满足。
(2)vue很简单易用,哪怕是前端初学者,也能很快的上手使用。
如果你坚持学习并使用着vue,相信后面的日子里,你会对于这两点的体会越来越深。

最简单的vue实例

下面这个是官方给出的一个vue入门实例

<div id="app">
  {{ message }}
</div>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

千万不要小看这个简简单单的实例,从这个实例里我们能理解到很多vue的理念和思想。
在我理解看来,或许更改把上面的代码上下顺序调过来,把js写在前面,html写在后面或许更能体现vue的思想。什么意思呢?这就回到了前面的官方说明了。

vue的核心库只关注图层。
vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

你会发现vue对视图上的数据使用不要更简单粗暴,如果你想往页面里传入数据,你需要做的,仅仅是在vue的data里定义一下就可以了,不需要再做任何其他的操作,视图就能直接拿来用!我想,什么叫做只关注图层,这就叫只关注图层,它能让你用难以想象的简单方式来实现页面的数据绑定。
同时,这种绑定是动态的,什么意思?就是只要你js中data里的message值发生变化,页面也会自动更新这个值,同样不需要你做任何操作。
可能上面的说法对一些人来说还是有些抽象,没关系,等到你真正应用到了它,你就会感受到它的神奇之处。
条件与循环

有了vue,你可以直接在html里面写循环和条件判断。同样这个只针对初学者同学,可能有一定angular基础的同学对这个早已经见怪不怪了。

下面是个条件判断简单例子

<div id="app">
  <p v-if="display">显示</p>
</div>
var app = new Vue({
  el: '#app',
  data: {
    display: true
  }
})

如果data里的display为true,页面上"显示"两个字就能显现出来,如果display为false,页面上则看不到"显示",相信不难理解。至于它是怎么实现这个效果的,暂时不在这里解释。当然有兴趣的同学可以自己写个简单案例试一试,很容易就能知道了。

下面是个循环的简单例子

<div id="app">
  <ol>
    <li v-for="student in students">
      {{ student }}
    </li>
  </ol>
</div>
var app = new Vue({
  el: '#app',
  data: {
    students: [
     '小明',
     '小华',
     '小军',
    ]
  }
})

页面上的效果是:

1.小明
2.小华
3.小军

这个应该也不难理解,不再多说。
处理用户输入

vue里面用v-on绑定监听事件,如下面的例子:

<div id="app">
  <p>{{ student }}</p>
  <button v-on:click="changeStudent">把小明改为小军</button>
</div>
var app = new Vue({
  el: '#app',
  data: {
    student: '小明'
  },
  methods: {
    changeStudent: function () {
      this.message = '小军'
    }
  }
![Uploading 4050018-56daea433a61af49_389470.png . . .]

})

实例很简单,就不多说了。出来的页面效果是:

4050018-56daea433a61af49.png

点击一下按钮,小明就会变成小军。

Vue 也提供了 v-model 指令,它使得在表单输入和应用状态中做双向数据绑定变得非常轻巧。如下例子:

<div id="app">
  <p>{{ message }}</p>
  <input v-model="message">
</div>
var app= new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

出来的页面效果是:

4050018-f232741914f9a832.png

你在输入框输入什么,页面能够实时的显示出来。它的原理可以解释为这样:
当绑定v-model之后,vue就开始监听页面上对应输入框的value的变化,一旦输入框的value发生改变,vue就获取这个value值,并把它赋值给data里的message,当message发生变化的时候,页面回自动更新它所绑定的元素。
小结

vue的基础介绍就是这么多,总结起来vue有如下特点:

(1)对视图的处理十分强大,用户只需要关注数据的运算逻辑就可以,无需关注视图层的变化,vue自会帮你处理好。
(2)极大改善了视图本身的数据处理方式,极大提高了含有多用户交互页面的编写效率。
最后,如果你读到了这里,谢谢你的阅读,下面一句话共勉:
前端路漫漫,保持激情,保持年轻!

参考资料
vue中文文档

相关文章

  • 1.“hellow Vue.js” 2.git软件 3.

    1.hellow Vue.js 显示“hellow Vue.js world” 代码 2.git软件 学习了gi...

  • vue.js学习(1)

    1.安装vue 补充:vue-cli 2.介绍vue下面是官方文档(中文)的说明: 估计对于有的初学者同学来说,看...

  • vue 加elemmentui 引入式

    1.ElementUI是基于Vue.js的,所以先下载Vue.js学习阶段选择开发版本。下载vue2.下载elem...

  • Vue.js学习笔记(1)

    使用脚手架创建第一个vue工程 项目文件结构 build:项目构建(webpack)相关代码 config:配置目...

  • vue.js组件学习1

    一.组件介绍 1.什么是组件 在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下...

  • Vue.js学习笔记(1)

    安装 兼容性 Vue.js 不支持 IE8 及其以下版本。Vue.js 支持所有兼容 ECMAScript 5 的...

  • Vue.js学习笔记(1)

    Vue.js入门(一) 目前我司的后端主要是用PHP来写,发现我们后端的html+js没有采用组件的方式来做,导致...

  • Vue.js学习笔记(1)

    © fengyu学习 个人非常喜爱前端开发,最近突然想好好研究一下,前端知名的js框架。 摆在面前的选择有很多,A...

  • 1、Vue.js起步学习

    Vue.js的官网定义:渐进式JavaScript框架 前端三个框架:Augular React VueMVVM...

  • Vue.js学习No.1

    欢迎关注我的公众号公众号 学习的内容如下 1、MVC 和 MVVM的区别 2、Vue中的基本代码的结构 3、插值表...

网友评论

      本文标题:vue.js学习(1)

      本文链接:https://www.haomeiwen.com/subject/mbmtattx.html