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 ...
随机推荐
- mysql load data infile auto increment id
1. 问题描述 当使用load data infile 向表中插入数据 而主键id是 auto_increment 时 ,执行 load data 不会报错 但插入也不成功 2. 问题解决 2.1 方 ...
- 关于display:inline-block布局导致错位问题分析
移动端设计稿需求是这样的,如下图: 未知的几个头像从左至右并行居中排列. 一般可能直接使用float,但是设计图要求头像排列始终是居中的,于是想到要让它们成为行内元素,然后可使用的方法有flex bo ...
- Windows API 编程-----Windows NT 环境下禁止任务切换
函数原型: BOOL WINAPI SystemParametersInfo( _In_ UINT uiAction, _In_ UINT uiParam, _Inout_ PVOID pvParam ...
- 零零碎碎的java知识：static属性、普通属性、static代码块、普通代码块、构造函数
本文中结论仅经本机测试,不保证在别的环境下成立.如果有什么不成立的地方务必告诉我_(:_」∠)_ java的内存是动态分配的,其机制和c/c++相当不一样……emmm在此不表. static: ·st ...
- arcgis server10.1 gp GetResultMapServiceLayer
根据10.1文档 silverlight 里面提供了新的_geoprocessorTask.GetResultMapServiceLayer方法 研究了一下得知 原来的GetResultImageLa ...
- c++ inline 的位置不当导致的 无法解析的外部符号
这几天编写代码碰到 无法解析的外部符号 visual studio. 在类中 inline 修饰符应该放在类函数定义的时候而不是声明的地方 即 // test.h 头文件 class A { publ ...
- LeetCode-Largest Rectangle in Histogram O(n) 详析-ZZ
http://www.cnblogs.com/felixfang/p/3676193.html Largest Rectangle in Histogram Given n non-negative ...
- excel操作方法
excel分列: http://jingyan.baidu.com/article/54b6b9c0d53f622d593b4772.html excel分列: http://jingyan.baid ...
- Qt::FocusPolicy的使用
http://blog.csdn.net/imxiangzi/article/details/50742813
- Hadoop学习---Ubuntu中hadoop完全分布式安装教程
软件版本 Hadoop版本号:hadoop-2.6.0-cdh5.7.0: VMWare版本号:VMware 9或10 Linux系统:CentOS 6.4-6.5 或Ubuntu版本号:ubuntu ...