近期项目的前端页面准备引入Vue.js，看了网上一些简介，及它和JQuery的对比，发现对于新入门的前端开发来说，Vue 其实也是比较适用的一个框架，其实用性不比JQuery差，感觉还挺有意思，于是研究了

一下其基本用法，下面是整理出来的学习例子(有官网上的，也有自己消化以后整理的)，希望对大家有参考价值。

<html>

<head>

    <title>Vue test</title>

</head>

<body>

<div id="app">

  <p>{{ message }}</p>

</div>

<div id="app-2">

  <span v-bind:title="message">

    Hover your mouse over me for a few seconds to see my dynamically bound title!

  </span>

</div>

<div id="app-3">

  <p v-if="seen">Now you see me</p>

</div>

<div id="app-4">

  <ol>

    <li v-for="todo in todos">

      {{ todo.text }}

    </li>

  </ol>

</div>

<div id="app-4_2">

  <ul>

    <li v-for="todo in todos">

      {{ todo }}

    </li>

  </ul>

</div>

<div id="app-5">

    <p>{{ message }}</p>

    <button v-on:click='reverseMessage'>reverse button</button>

</div>

<div id="app-6">

    <p>{{ message }}</p>

    <input v-model='message'>

</div>

<div id="app-7">

  <ol>

    <!-- Now we provide each todo-item with the todo object    -->

    <!-- it's representing, so that its content can be dynamic -->

    <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>

  </ol>

</div>

<div id="app-7_2">

    <ul>

        <todo-text v-for="item in textInfoList" v-bind:todo="item"></todo-text>

    </ul>

</div>

<script src="./vue.min.js"></script>

<script>

// 静态数据绑定

var app = new Vue({

  el: '#app',

  data: {

    message: 'Hello Vue!'

  }

})

// 动态属性值绑定

var app2 = new Vue({

  el: '#app-2',

  data: {

    message: 'You loaded this page on ' + new Date()

  }

})

// 控制标签是否显示

var app3 = new Vue({

    el: '#app-3',

    data: {

        seen: true

    }

})

// 遍历对象数组

var app4 = new Vue({

  el: '#app-4',

  data: {

    todos: [

      { text: 'Learn JavaScript' },

      { text: 'Learn Vue' },

      { text: 'Build something awesome' }

    ]

  }

})

// 直接遍历数组

var app4_2 = new Vue({

  el: '#app-4_2',

  data: {

    todos: [

      'Learn JavaScript',

      'Learn Vue',

      'Build something awesome'

    ]

  }

})

// 绑定一个逆排字符串的函数

var app5 = new Vue({

    el: '#app-5',

    data: {

        message: 'Hello Vue.js.'

    },

    methods: {

        reverseMessage: function() {

            this.message = this.message.split('').reverse().join('')

        }

    }

})

// 同步用户输入

var app6 = new Vue({

    el: '#app-6',

    data: {

        message: 'test text input.'

    }

})

// 动态绑定数据到模板中的变量

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' }

    ]

  }

})

// 注意参数名 todo 及其类型 ['todo'] 都不能变

Vue.component('todo-text', {

  props: ['todo'],

  template: '<li>{{ todo.line }} - {{ todo.text }}</li>'

})

var app7_2 = new Vue({

  el: '#app-7_2',

  data: {

      textInfoList: [

          {

              line: 'line one.' ,

              text: 'textInfo'

          },

          {

              line: 'line two.' ,

              text: 'textInfo'

          },

          {

              line: 'line three.' ,

              text: 'textInfo'

          }

      ]

  }

})

</script>

</body>

</html>

web前端——Vue.js基础学习的更多相关文章

  1. web前端——Vue.js基础学习之class与样式绑定

    打着巩固 css 知识的旗号开始了对 vue 样式绑定的研究,相比前一篇的 demo,本次内容多了各种样式在里面,变得稍微花哨了些,话不多说,直接上代码吧: <html> <head ...

  2. Web前端-Vue.js必备框架（五）

    Web前端-Vue.js必备框架(五) 页面组件,商品列表组件,详情组件,购物车清单组件,结算页组件,订单详情组件,订单列表组件. vue-router 路由 vuex 组件集中管理 webpack ...

  3. Web前端-Vue.js必备框架（四）

    Web前端-Vue.js必备框架(四) 计算属性: <div id="aaa"> {{ message.split('').reverse().join('') }} ...

  4. Web前端-Vue.js必备框架（三）

    Web前端-Vue.js必备框架(三) vue是一款渐进式javascript框架,由evan you开发.vue成为前端开发的必备之一. vue的好处轻量级,渐进式框架,响应式更新机制. 开发环境, ...

  5. Web前端-Vue.js必备框架（二）

    Web前端-Vue.js必备框架(二) vue调式工具vue-devtools 过滤器:vue.js允许你自定义过滤器,可被用作一些常见的文本格式化. mustache插值和v-bind表达式. vu ...

  6. Web前端-Vue.js必备框架（一）

    Web前端-Vue.js必备框架(一) <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  7. 两万字Vue.js基础学习笔记

    Vue.js学习笔记 目录 Vue.js学习笔记 ES6语法 1.不一样的变量声明:const和let 2.模板字符串 3.箭头函数(Arrow Functions) 4. 函数的参数默认值 5.Sp ...

  8. Web - 前端 Vue.js （1）

    Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使 ...

  9. 两万字Vue.js基础学习笔记（二）

    Vue.js学习笔记(二) 4.模块化开发 ES6模块化的导入和导出 我们使用export指令导出了模块对外提供的接口,下面我们就可以通过import命令来加载对应的这个模块了 首先,我们需要在HTM ...

随机推荐

  1. KVM之virsh管理虚拟机硬盘配置

    新建raw格式虚拟盘 [root@ubuntu ~]# qemu-img create -f raw /data/raw/disk02.raw 5G Formatting '/data/raw/dis ...

  2. B树Java代码实现以及测试

    B树定义 B 树又叫平衡多路查找树.一棵m阶的B 树 (m叉树)的特性如下: 根节点至少有两个孩子 每个非根节点至少有M/2(上取整)个孩子,至多有M个孩子. 每个非根节点至少有M/2-1(上取整)个 ...

  3. How to find Oracle EBS Weblogic Server Admin Port and URL

    How to find Oracle EBS Weblogic Server Admin Port and URL   Weblogic admin portMethod 1 Open the App ...

  4. spider _其他库的简单操作与方法

    PHP : 网络IO java : 代码笨重,代码量很大 C/C++ :虽然效率高,但是代码成型很慢 1 通用网络爬虫(搜索引擎引用,需要遵守robots协议) 1 搜索引擎如何获取一个新网站的 UR ...

  5. Python更改pip源

    Python更改pip源 pip源有以下 新版ubuntu要求使用https源,要注意.清华:https://pypi.tuna.tsinghua.edu.cn/simple阿里云:http://mi ...

  6. 0008SpringBoot中的spring.config.location对于运维的用处

    在工作过程中,若项目已经打好包,application.properties中的配置文件已经不能修改,但是还是需要修改一些参数或者新增一些参数的情况下怎么办? 可以单独再定义一个配置文件,比如定义名称 ...

  7. ubuntu 服务器添加新磁盘

    原文 Linux系统扩容根目录磁盘空间的操作方法 这篇文章主要介绍了Linux系统扩容根目录磁盘空间的操作方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下 一.使用背景 Linux根目录磁 ...

  8. 「数据结构与算法（Python）」（一）

    算法的提出 算法的概念 算法是计算机处理信息的本质,因为计算机程序本质上是一个算法来告诉计算机确切的步骤来执行一个指定的任务.一般地,当算法在处理信息时,会从输入设备或数据的存储地址读取数据,把结果写 ...

  9. maven 安装第三方jar到本地 出现 The goal you specified requires a project to execute but there is no POM in this directory 错误

    原因是因为操作系统的差异导致,把所有参数加上引号即可. 如下所示: mvn install:install-file "-Dfile=cobra.jar" "-Dgrou ...

  10. 编译安装PTLib和H.323 Plus Core

    下载PTLib和H.323 Plus Core,官方网站很容易下载:http://www.h323plus.org/source/. 我下载这两个库后存放到目录/home/ynq/h323plus下, ...