鄙人一直是用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. Iphone各个型号机型的详细参数，尺寸和dpr以及像素

    1.iPhone尺寸规格 2.单位inch(英吋) 1 inch = 2.54cm = 25.4mm 3.iPhone手机宽高 上表中的宽高(width/height)为手机的物理尺寸,包括显示屏和边 ...

  2. 日常捕获的野生知识 - javascript 与 类

    javascript 并不提供类这样方便实用的面向对象类型,今天学习到了,直接上代码: <!DOCTYPE html> <html lang="en"> & ...

  3. VC++ 6.0如何创建与调用动态链接库

    原文:http://blog.csdn.net/wanghaihao_1/article/details/51098451 1.静态链接库与动态链接库区别: 静态链接库:lib中的指令被直接包含在最终 ...

  4. 微信证书 javax.net.ssl.SSLException: java.lang.RuntimeException: Unexpected error: java.security.InvalidAlgorithmParameterException: the trustAnchors parameter must be non-empty

    这几天在做微信退款接口,按照api写完之后,在本地测试了下没有问题,于是交给测试让他们在测试环境开测.他们说退款没有成功,感觉去查日志,发现后台报了 javax.net.ssl.SSLExceptio ...

  5. Oracle基础之Merge into

    Merge into语句是Oracle9i新增的语法,用来合并UPDATE和INSERT语句. 通过MERGE语句,根据一张表或多表联合查询的连接条件对另外一张表进行查询,连接条件匹配上的进行UPDA ...

  6. Android学习——Service（二）

    今天来介绍Service的第二种使用方式,Bind方式 Bind方式启动服务 Bind方式和Start方式启动很类似,都是通过Intent来启动,不同的是,Bind方式需要传入三个参数,如下: Int ...

  7. c# 修改winform中app.config的配置值

    public bool ChangeConfig(string AppKey,string AppValue) { bool result = true; try { XmlDocument xDoc ...

  8. DevExpress 中 GridControl 的数据源DataTable 内容改变后 重新绑定

    1.datatable dt=new datatable(); 2.dt 内容改变 dt.columns.add("col1"); dt.columns.add("col ...

  9. MVC中用NPOI导出Excel相关问题

    情形1:可以直接带参数 前端页面: @.ActionLink("导出Excel", "DownLoadExcel", new { 参数名= '参数值' }, n ...

  10. 使用jQuery操作input的value值

    表单控件是我们的重中之重,因为一旦牵扯到数据交互,离不开form表单的使用,比如用户的注册登录功能等 那么通过上节知识点我们了解到,我们在使用jquery方法操作表单控件的方法: $(selector ...