近期项目的前端页面准备引入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. 苹果发布app，上传ipa，不显示问题

    用Xcode或者leader上传ipa,提示是上传成功,但是在网页上不显示构建版本.如下图: 那么,你先点击“活动”,进去后,如果显示你的app正在审核,那么表示上传成功,等待:如果“活动”中不显示你 ...

  2. Mongodb 的ORM框架 Morphia 注解 之 @Reference

    public class BlogEntry { private String title; private Date publishDate; private String body; privat ...

  3. Python asyncio 模块

    Python 3.4 asyncio是Python 3.4版本引入的标准库,直接内置了对异步IO的支持. asyncio的编程模型就是一个消息循环.我们从asyncio模块中直接获取一个EventLo ...

  4. sqlserver 拼接字符串

    SELECT CAST(USER_ID AS VARCHAR) + ',' FROM dbo.AUTH_USER FOR XML PATH('');

  5. 多域名解析到同一网站C的php重定向代码

    在index.php最前面加上以下代码: <?php if(strpos($_SERVER['HTTP_HOST'],'afish.cnblogs.com')===false){ #header ...

  6. Nginx中ngx_http_auth_basic_moudel和ngx_http_stub_status_module模块

    ngx_http_auth_basic_module实现基于⽤用户的访问控制,使⽤用basic机制进⾏行行⽤用户认证指令:5.1 auth_basicSyntax: auth_basic string ...

  7. linux实操_硬盘

    1.硬盘分区 硬盘说明: 查看分区和挂载情况 语法: lsblk -f lsblk 2.增加硬盘 (1)虚拟机添加硬盘 (2)分区 fdisk /dev/sdb (3)格式化 mkfs -text4 ...

  8. Windows服务操作

    资料 https://docs.microsoft.com/zh-cn/dotnet/api/system.serviceprocess.servicecontroller?redirectedfro ...

  9. 【51nod 1340】地铁环线

    题目 有一个地铁环线,环线中有N个站台,标号为0,1,2,...,N-1.这个环线是单行线,一共由N条有向边构成,即从0到1,1到2,..k到k+1,...,N-2到N-1,N-1到0各有一条边.定义 ...

  10. 项目：JS实现简易计算器案例

    组件化网页开发下的: 步骤一:让页面动起来的JavaScript深入讲解  的 项目:JS实现简易计算器案例