近期项目的前端页面准备引入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. vulnhub攻略

    https://www.vulnhub.com/entry/21ltr-scene-1,3/ 这个靶机国内https://www.cnblogs.com/hack404/p/11423228.html ...

  2. [LeetCode] 22. 括号生成 ☆☆☆(回溯)

    描述 给出 n 代表生成括号的对数,请你写出一个函数,使其能够生成所有可能的并且有效的括号组合. 例如,给出 n = 3,生成结果为: [ "((()))", "(()( ...

  3. storm连接http需要的jar包

    将httpclient-4.5.6.jar  httpcore-4.4.10.jar这两个jar包拷贝到storm安装目录下的lib目录下 如果是集群的话,需要拷贝到集群中的每台机器上

  4. 3.Hbase数据模型

    3.1.Hbase数据模型: 概念视图: 物理视图 Hbase数据在存储系统中是以列族来体现的[Column Family],任何时候可以随意的添加一列到已经存在的列族中 空的单元格在表中不做存储也不 ...

  5. PAT1046

    题目链接 https://pintia.cn/problem-sets/994805260223102976/problems/994805277847568384 题解 题目有几个点需要注意: 甲和 ...

  6. [ 转载 ] vue.js面试题一

    转载自:https://www.cnblogs.com/aimeeblogs/p/9501490.html 如有侵权 联系删除 Vue.js面试题整理 一.什么是MVVM? MVVM是Model-Vi ...

  7. Spring入门篇——AOP基本概念

    1.什么是AOP及实现方式 什么是AOP AOP:Aspect Oriented Programming的缩写,意为:面向切面编程,通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术 主要 ...

  8. 基于 es6 的 javascript 实用方法

    一.求数字数组的平均数 - 使用 数组的 reduce() 方法将每个值添加到累加器,初始值为0,总和除以数组长度. const average = arr => arr.reduce((acc ...

  9. 洛谷P1339 热浪【最短路】

    题目:https://www.luogu.org/problemnew/show/P1339 题意:给定一张图,问起点到终点的最短路. 思路:dijkstra板子题. 很久没有写最短路了.总结一下di ...

  10. C#百度api 根据经纬度获取地址

    public string GetAddress(string lat, string lng) { try { string res = ""; string url = @&q ...