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 ...
随机推荐
- 程序员学炒股(6) 让我们来看一下7月份A股的表现
有了前几天的数据准备,那让我们看一下7月份的股市是牛市还是熊市呢? 牛市和熊市主要就看股票的涨跌分布情况,虽然我们看大盘数据,但是不过中石油占的A股市值太大了,并且中石油95%的股票都是大股东控制的相 ...
- css3之背景定位
属性: background-position: left top || left bottom || right top || right bottom || center center || 像素 ...
- mui.ajax()和asp.net sql服务器数据交互【1】
简单的ajax和asp.net的交互,例如遍历数据,前端显示复杂内容没有添加代码,可自行研究!非常适合懂那么一点点的我们! 实现步骤: 1.APP前端HTML: <div class=" ...
- css模仿百度首页
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- CSS居中问题：块级元素和行级元素在水平方向以及垂直方向的居中问题
元素的居中问题是每个初学者碰到的第一个大问题,在此我总结了下各种块级 行级 水平 垂直 的居中方法,并尽量给出代码实例. 首先请先明白块级元素和行级元素的区别 块级元素 块级元素水平居中 1:marg ...
- Linux 下载百度网盘大文件
Linux 下没有百度网盘客户端,用浏览器下载速度慢得急死人 鼠标移到链接处, 右键, 然后复制链接 接着在终端里输入 axel -n 50 -o filename.ext “粘贴链接到此处” axe ...
- eclipse 出现 jar包找不到 问题记录
同事在下载maven私服项目的时候,自动更新失败.maven 一直提示 parent 更新失败但是其他的项目都是正常的,这就奇怪了. 最后 仔细查询后,发现是 同事在下载项目时候,项目是分clien ...
- javax.swing.JComponent 调用顺序
网上截取的,感觉挺有用,记录下来. http://bbs.csdn.net/topics/310041707 java swing 感觉好复杂啊…………一点都不想用但是作业要用到 >_<; ...
- Oracle中用户和方案的区别
从定义中我们可以看出方案(Schema)为数据库对象的集合,为了区分各个集合,我们需要给这个集合起个名字,这些名字就是我们在企业管理器的方案下看到的许多类似用户名的节点,这些类似用户名的节点其实就是一 ...
- 工作总结：mvc分层架构
pojo:plain ordinary java object 简单无规则java对象,我个人觉得它和其他不是一个层面上的东西,VO和PO应该都属于它 po:persistant object 持久对 ...