vue入门学习示例
鄙人一直是用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入门学习示例的更多相关文章
- vue入门学习（基础篇）
vue入门学习总结: vue的一个组件包括三部分:template.style.script. vue的数据在data中定义使用. 数据渲染指令:v-text.v-html.{{}}. 隐藏未编译的标 ...
- Vue.js 学习示例
本篇和大家分享的是学习Vuejs的总结和调用webapi的一个小示例:快到年底了争取和大家多分享点东西,希望能对各位有所帮助:本章内容希望大家喜欢,也希望各位多多扫码支持和推荐谢谢: » Vuejs ...
- Vue入门学习总结一：Vue定义
Vue的功能是为视图提供响应的数据绑定及视图组件,Vue是数据驱动式的,不直接修改DOM而是直接操作数据实现对界面进行修改. 首先我们需要在script中定义一个Vue实例,定义方法如下: var v ...
- Vue入门学习
目录 Vue 简介 第一个Vue程序 Vue基本语法 双向绑定 组件 Axios异步通信 计算属性 Slot 自定义事件 第一个Vue-cli程序 webpack学习使用 Vue-Router路由 v ...
- Python 3 + Selenium 3 简单入门学习示例 126邮箱登录
这是一个很多基础演示的书上的例子,但是一般按照这些书上的代码可能都不能成功登录.也许是网易修改了126的页面导致的吧,下面给出最新的能够work的版本 from selenium import web ...
- 学习Vue 入门到实战——学习笔记
闲聊: 自从进了现在的公司,小颖就再没怎么接触vue了,最近不太忙,所以想再学习下vue,就看了看vue相关视频,顺便做个笔记嘻嘻. 视频地址:Vue 入门到实战1.Vue 入门到实战2 学习内容: ...
- 【原创】SpringBoot & SpringCloud 快速入门学习笔记(完整示例)
[原创]SpringBoot & SpringCloud 快速入门学习笔记(完整示例) 1月前在系统的学习SpringBoot和SpringCloud,同时整理了快速入门示例,方便能针对每个知 ...
- Vue学习记录第一篇——Vue入门基础
前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...
- Vue项目中GraphQL入门学习与应用
1.GraphQL是什么,能干什么? 正如官网所说,GraphQL是一种用于API查询的语言.Facebook 的移动应用从 2012 年就开始使用 GraphQL.GraphQL 规范于 2015 ...
随机推荐
- css美化checkbox
- mysql case when & concat & SUBSTRING_INDEX & not & having 使用的小case
1. 代码 SELECT a.id, a.activity_name, ( CASE WHEN a.activity_end_time > now() THEN '参与中' ELSE ( CAS ...
- NodeJS require路径
项目需要用nodejs,感觉nodejs是前端装逼神器了,是通向全栈工程师的必经之路哇,接下来开始踏上学习nodejs的征程.下面是第一个hello,world的程序. 1.server.js文件,这 ...
- Express （Routing、Middleware、托管静态文件、view engine 等等）
1. Express 简介 Express 是基于 Node.js 平台,快速.开放.极简的 web 开发框架,它提供一系列强大的特性,帮助你创建各种 Web 和移动设备应用. Express 不对 ...
- easyui window窗口 不垂直居中
$('#hotelDetailWrap').window({ width: 1040, height: 160, collapsible: false, minimizable: false, max ...
- .Net Core 初体验及总结（内含命令大全）
dotnet 命令目录: dotnet new -创建 dotnet restore -还原 dotnet build -编译 dotnet run -运行 dotnet test -测试 dot ...
- 致 BitClub 矿池，你们为什么要对比特币网络发动交易延展性攻击？
原文:https://medium.com/@bithernet/bitclub-why-are-you-doing-malleability-attack-now-6faa194b2146#.v4y ...
- [acm 1002] 浙大 Fire Net
已转战浙大 题目 http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=2 浙大acm 1002 #include <iostre ...
- Linux Firefox Adobe Flash Player 安装和更新
1.下载 Firefox Adobe Flash Player 使用Linux上的火狐浏览器访问如下的下载网址: https://get.adobe.com/flashplayer/ 选择下载 &qu ...
- Android中的this、Activity、Context等
Android中的this.Activity.Context.Application等虽然有相似之处,但是不能乱用,每一个都有自己的特点.用的时候不能太随意了. 避免context相关的内存泄露,注意 ...