鄙人一直是用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. [算法练习]Two Sum

    题目说明: Given an array of integers, return indices of the two numbers such that they add up to a speci ...

  2. Javascript之DOM的三大节点及部分用法

    DOM有三种节点:元素节点.属性节点.文本节点. 一.用nodeType可以检测节点的类型 节点类型 nodeType属性值 元素节点 1 属性节点 2 文本节点 3 这样方便在js中对各个节点进行操 ...

  3. 1 如何使用pb文件保存和恢复模型进行迁移学习（学习Tensorflow 实战google深度学习框架）

    学习过程是Tensorflow 实战google深度学习框架一书的第六章的迁移学习环节. 具体见我提出的问题:https://www.tensorflowers.cn/t/5314 参考https:/ ...

  4. 使用github参与到开源项目的维护

    参与到开源项目的维护工作一般分两种,一种是由项目建立者拉入到贡献者列表中,拥有对项目的读写权限,而普通用户对项目仅有读取权限,另一种是fork项目到自己仓库,然后把修改后的内容发送给项目管理者者请求合 ...

  5. ES6/ES2015常用知识点和概念

    越来越多的开源库开始使用ES2015来构建代码了,大家知道ES6=ES2015,ES6在2015年被ECMAScript标准化组织approve,各大浏览器厂商要完全支持ES6的强大功能还须一些时日, ...

  6. 基于bootstrap的单选（radio）或者多选（checkbox）的选择框组

    完成的效果如下图所示: html代码如下: <!-- 两行组 --> <div class="box"> <ul class="list-g ...

  7. js 获取URL中参数

    function getQueryString() { var result = location.search.match(new RegExp("[\?\&][^\?\& ...

  8. linux下安装及配置jenkins

    jenkins常用的有两种安装方式: 1.直接下载war包jenkins.war,下载地址https://jenkins.io/download 直接下载 1.1.可以把war包直接部署到servle ...

  9. 高精度定时器实现 z

    1背景Permalink .NET Framework 提供了四种定时器,然而其精度都不高(一般情况下 15ms 左右),难以满足一些场景下的需求. 在进行媒体播放.绘制动画.性能分析以及和硬件交互时 ...

  10. Exchange 2016系统要求

    一.支持的共存方案 下表列出了一些支持 Exchange 2016 与 Exchange 早期版本共存的应用场景. Exchange 2016与Exchange Server早期版本共存 Exchan ...