1.什么是vue.js
vue.js是一款数据驱动型的js框架。何为数据驱动型?html视图层定义模板,vue定义数据。html和vue数据,通过标签id关联。

2.vue.js引入
<script src="https://unpkg.com/vue/dist/vue.js"></script>

3.使用示例
1)声明式渲染

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
{{message}}
</div>

var app=new Vue({
    el:'#app',
    data:{
        message:'Hello Vue!'
    }
})

运行结果:

2)条件判断

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app-3">
  <p v-if="seen">Now you see me</p>
</div>

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

运行结果:

3)循环

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app-4">
    <ol>
        <li v-for="todo in todos">
            {{ todo.text }}
        </li>
    </ol>
</div>

var app4 = new Vue({
    el: '#app-4',
    data: {
        todos: [
          { text: 'Learn JavaScript' },
          { text: 'Learn Vue' },
          { text: 'Build something awesome' }
        ]
    }
})

运行结果:

4)客户端交互

vue.js和浏览器可实现双向通信,即浏览器中绑定值改变后,js中会同时改变,反之亦然。

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

运行结果:

4.组件
组件可以理解为在js中定义了一个html模板和一个vue.js,前台html可以直接使用这个模板,同时会被vue.js渲染。
需要注意的是,组件必须要有vue.js数据渲染才能显示。
如下例所示:

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app-7">
  <ol>
    <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
  </ol>
</div>

Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { text: 'Vegetables' },
      { text: 'Cheese' },
      { text: 'Whatever else humans are supposed to eat' }
    ]
  }
})

运行结果:

我们在模板中增加了一个“props”字段,来接收数据,在html页面中将这个字段绑定到vue.js中的数据。
完成数据绑定。

5.使用场景

个人觉得适合数据量大,前端html页面模块重复复杂的情况。

vue.js使用详解的更多相关文章

  1. Vue.js项目详解

    还是以Blog项目来讲解,最近我本人利用闲暇时间,以博客作为参考学习一些新的技术并尝试之前没有尝试过的思路来玩玩. 技术看似枯燥,但是带有一个目的来学,你会发现还是蛮有趣的. 主要实践的就是前后端分离 ...

  2. Vue.js 插件开发详解

    前言 随着 Vue.js 越来越火,Vue.js 的相关插件也在不断的被贡献出来,数不胜数.比如官方推荐的 vue-router.vuex 等,都是非常优秀的插件.但是我们更多的人还只停留在使用的阶段 ...

  3. Vue.js用法详解(一)更新中~

      前  言 前段时间为了一个数据查询的项目自学了Vue,感觉这款框架还是很不错的,今天就整理整理这个框架如何使用,希望对正在学这个框架的小伙伴有所帮助~ 首先,我们先来了解一下Vue: Vue.js ...

  4. Vue.js路由详解

    有时候,我们在用vue的时候会有这样的需求,比如一个管理系统,点了左边的菜单栏,右边跳转到一个新的页面中,而且刷新的时候还会停留在原来打开的页面. 又或者,一个页面中几个不同的画面来回点击切换,这两种 ...

  5. main.js index.html与app.vue三者关系详解

    main.js index.html与app.vue三者关系详解 2019年01月23日 11:12:15 Pecodo 阅读数 186   main.js与index.html是nodejs的项目启 ...

  6. vue 文件目录结构详解

    vue 文件目录结构详解 本篇文章主要介绍了vue 文件目录结构详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 项目简介 基于 vue.js 的前端开发环境,用于前后 ...

  7. vue 源码详解(一):原型对象和全局 `API`的设计

    vue 源码详解(一):原型对象和全局 API的设计 1. 从 new Vue() 开始 我们在实际的项目中使用 Vue 的时候 , 一般都是在 main.js 中通过 new Vue({el : ' ...

  8. vue 源码详解(二): 组件生命周期初始化、事件系统初始化

    vue 源码详解(二): 组件生命周期初始化.事件系统初始化 上一篇文章 生成 Vue 实例前的准备工作 讲解了实例化前的准备工作, 接下来我们继续看, 我们调用 new Vue() 的时候, 其内部 ...

  9. js对象详解(JavaScript对象深度剖析,深度理解js对象)

    js对象详解(JavaScript对象深度剖析,深度理解js对象) 这算是酝酿很久的一篇文章了. JavaScript作为一个基于对象(没有类的概念)的语言,从入门到精通到放弃一直会被对象这个问题围绕 ...

随机推荐

  1. 火狐浏览器Firefox上DownThemAll插件

    DownThemAll插件支持断点续传.多线程下载,可以大幅度提高下载速度. 在Windows平台上,要下载大量的文件,迅雷自然是首选:但在非Windows平台上,只要安装一个火狐浏览器,再安装Dow ...

  2. 原!!mybatis如何直接 执行传入的任意sql语句 并按照顺序取出查询的结果集

    需求: 1.直接执行前端传来的任何sql语句,parameterType="String", 2.对于任何sql语句,其返回值类型无法用resultMap在xml文件里配置或者返回 ...

  3. Android之打log

    Android之打log 1.在代码中加上自己的log 2,模块编译mm -B或者./mk mm/mmm packages/apps/Contacts/ 3编译成功后install或者push生成的a ...

  4. ERWin 7.2下载安装及注册机

    ERWin 7.2下载安装及注册机   ERWin 7.2 下载地址: ftp://ftp.ca.com/CAproducts/erwin/ServicePacks/AFEDM72-b1644.exe ...

  5. jquery的一些属性选择器

    td:contains(Henry)选择td里面所有class为Henry的元素 .siblings()选择相同dom层次的所有其他元素,例如 <ul> <li>第一个< ...

  6. bootstrap系列学习(一)

    最近的一个项目中,正好使用到bootstrap布局前台页面,随便记录一下,个人遇到的一些问题. 一,jquery 版本 使用bootstrap3.0,刚开始没有 按照官网上教程,用了习惯的jquery ...

  7. 51nod1693 水群

    题目链接:51nod1693 水群 题解参考大神的博客:http://www.cnblogs.com/fighting-to-the-end/p/5874763.html 这题时限0.4秒,真的够狠的 ...

  8. 点击空白处隐藏div-阻止事件冒泡

    $(" body").click(function(){ $("#div").hide(); }); $("button").click(f ...

  9. MySQL:日期函数、时间函数总结

    MySQL 获得当前日期时间 函数 获得当前日期+时间(date + time)函数:now() mysql> select now(); +---------------------+ | n ...

  10. GUI用户界面编程

    Java的GUI编程(Graphic User Interface,图形用户接口),是在它的抽象窗口工具箱(Abstract Window Toolkit,AWT)上实现的,java.awt是AWT的 ...