鄙人一直是用angular框架的，所以顺便比较了一下。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>vue实践</title>

     <script src="http://cdn.bootcss.com/vue/2.2.6/vue.min.js"></script>

 </head>

 <body>

     <div id="app">

         <span>{{message}}</span><br>

         <input type="text" v-model="mes"><br>

         <test-prop :prop-val="mes"></test-prop><br>

         <span>{{reverseMes}}</span><br>

         <button v-on:click="plus()">点击+click事件</button><br>

         <button @click="del()">点击-click事件</button><br>

         <div id="mount-point"></div>

     </div>

     <script>

         var vue = new Vue({

             el:'#app',

             data:{//data类似angualar的$scope,可以接收数据或函数,任何字段或函数需要先定义才能使用

                 message:'hello world~',

                 mes:'初始值',

                 i:0

             },

             components: {//components类似angular的指令，驼峰命名在html中用‘-’表示，可单向动态传值

                 'test-prop':{

                     props:['propVal'],

                     template: '<div>{{propVal}}</div>'

                 }

             },

             computed:{//computed类似angular的自定义过滤器的函数，函数名可直接在html 中显示，用‘{{}}’，不能用v-bind？

                 reverseMes: function(){

                     return this.mes.split('').reverse().join('')

                 }

             },

             methods:{//创建方法函数

                 plus:function(){

                     this.message = this.message + '-----'+this.i;

                     this.i += 1;

                 },

                 del:function(){

                     var index = this.message.lastIndexOf('-----');

                     this.message = this.message.slice(0,index);

                     this.i -= 1;

                 }

             },

             watch:{//watch类似angular的$watch，方法中传入两个值（新值，旧值）

                 mes:function (newV, oldV) {

                     console.log(newV+'-------'+oldV);

                 }

             }

         });

         var newMount = Vue.extend({//创建一个子类

             template:'<p>my name is {{lastName}}{{firstName}} . my english name is {{alias}}</p>',

             data: function(){//这里data必须是函数

                 return {

                     firstName:'Shaoli',

                     lastName:'Hong',

                     alias:'Souleigh'

                 }

             }

         });

         new newMount().$mount('#mount-point');//$mount类似angular的bootstrap手动启动app，手动地挂载一个未挂载的实例

     </script>

 </body>

 </html>

vue入门学习示例的更多相关文章

  1. vue入门学习（基础篇）

    vue入门学习总结: vue的一个组件包括三部分:template.style.script. vue的数据在data中定义使用. 数据渲染指令:v-text.v-html.{{}}. 隐藏未编译的标 ...

  2. Vue.js 学习示例

    本篇和大家分享的是学习Vuejs的总结和调用webapi的一个小示例:快到年底了争取和大家多分享点东西,希望能对各位有所帮助:本章内容希望大家喜欢,也希望各位多多扫码支持和推荐谢谢: » Vuejs ...

  3. Vue入门学习总结一：Vue定义

    Vue的功能是为视图提供响应的数据绑定及视图组件,Vue是数据驱动式的,不直接修改DOM而是直接操作数据实现对界面进行修改. 首先我们需要在script中定义一个Vue实例,定义方法如下: var v ...

  4. Vue入门学习

    目录 Vue 简介 第一个Vue程序 Vue基本语法 双向绑定 组件 Axios异步通信 计算属性 Slot 自定义事件 第一个Vue-cli程序 webpack学习使用 Vue-Router路由 v ...

  5. Python 3 + Selenium 3 简单入门学习示例 126邮箱登录

    这是一个很多基础演示的书上的例子,但是一般按照这些书上的代码可能都不能成功登录.也许是网易修改了126的页面导致的吧,下面给出最新的能够work的版本 from selenium import web ...

  6. 学习Vue 入门到实战——学习笔记

    闲聊: 自从进了现在的公司,小颖就再没怎么接触vue了,最近不太忙,所以想再学习下vue,就看了看vue相关视频,顺便做个笔记嘻嘻. 视频地址:Vue 入门到实战1.Vue 入门到实战2 学习内容: ...

  7. 【原创】SpringBoot & SpringCloud 快速入门学习笔记(完整示例)

    [原创]SpringBoot & SpringCloud 快速入门学习笔记(完整示例) 1月前在系统的学习SpringBoot和SpringCloud,同时整理了快速入门示例,方便能针对每个知 ...

  8. Vue学习记录第一篇——Vue入门基础

    前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...

  9. Vue项目中GraphQL入门学习与应用

    1.GraphQL是什么,能干什么? 正如官网所说,GraphQL是一种用于API查询的语言.Facebook 的移动应用从 2012 年就开始使用 GraphQL.GraphQL 规范于 2015 ...

随机推荐

  1. 警告: The web application [ROOT] appears to have started a thread named [Thread-48] but has failed to stop it. This is very likely to create a memory leak. Stack trace of thread:

    1. 问题描述 tomcat跑web项目(其中依赖java项目) 出现大量上述警告 项目起不来 关键字 memory leak 内存泄漏 2. 解决方案 难道是程序写的有问题? 最终 将tomcat ...

  2. 【转】46 个非常有用的 PHP 代码片段

    1. 发送 SMS 在开发 Web 或者移动应用的时候,经常会遇到需要发送 SMS 给用户,或者因为登录原因,或者是为了发送信息.下面的 PHP 代码就实现了发送 SMS 的功能. 为了使用任何的语言 ...

  3. Java的异常处理throw和throws的区别

    区别一:              throw 是语句抛出一个异常:throws 是方法抛出一个异常:              throw语法:throw <异常对象>          ...

  4. C++基础--class的大小

    在这里列出了空类,类有函数,值,没有函数的大小,注意Class也是默认字节对齐 #include <stdio.h> class x { }; class cx { public: cx( ...

  5. scrum心得和团队作业

    一.学习scrum心得 敏捷的介绍 最近上课我们了解到了敏捷,很多人开始谈论敏捷开发.研究敏捷开发,那么究竟什么才是敏捷开发呢? 简单的说,敏捷开发是一种以人为核心.迭代.循序渐进的开发方法.在敏捷开 ...

  6. html 颜色在线取色器

    推荐一个链接 还不错 http://www.atool.org/colorpicker.php

  7. SQL Server ->> Sparse File(稀疏文件)

    Sparse File(稀疏文件)不是SQL Server的特性.它属于Windows的NTFS文件系统的一个特性.如果某个大文件中的数据包含着大量“0数据”(这个应该从二进制上看),这样的文件就可以 ...

  8. c# 命名空间之System.IO（继承关系）

    System.IO 命名空间包含允许:读写文件.数据流的类型以及提供基本文件和目录支持的类型. 在这个命名空间中主要的类有: 字节流:Stream.BufferedStream.MemoryStrea ...

  9. eclipse通过maven进行打包并且对hdfs上的文件进行wordcount

    在eclipse中配置自己的maven仓库 1.安装maven(用于管理仓库,jar包的管理) -1.解压maven安装包 -2.把maven添加到环境变量/etc/profile -3.添加mave ...

  10. Native广告月入万刀的全部细节！

    一步一步跑Native原生广告: 第一步:跑native前期的准备工作 第二步:阅读大神的Native文档(100多页,英文,建议找一个支持在线翻译功能的app来阅读) 第三步:阅读我的几十条经验总结 ...