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 ...
随机推荐
- [Java反射基础二]获取类的信息
本文接上文“Class类的使用”,以编写一个用来获取类的信息(成员函数.成员变量.构造函数)的工具类来讲解"反射之获取类的信息" 1.获取成员函数信息 /** * 获取成员函数信息 ...
- C 堆内存管理
在Win32 程序中每个进程都占有4GB的虚拟地址空间,这4G的地址空间内部又被分为代码段,全局变量段堆段和栈段,栈内存由函数使用,用来存储函数内部的局部变量,而堆是由程序员自己申请与释放的,系统在管 ...
- 类中调用界面ActiveX控件报错当前线程不在单线程单元中因此无法实例化 ActiveX 控件的解决办法
解决办法是Form类中定义一个静态的ActiveX对象,在formload中将界面上的ActiveX对象赋值给新定义的对象,类中访问该静态对象即可. public static AxClientDri ...
- webstorm添加自定义代码块
widnow下使用alt+ctrl+s 调出setting面板 mac下使用command+,(逗号)调出Preferences面板 搜索live template选中js,在javascrpt 模板 ...
- Qt判断鼠标在控件上
QT判断鼠标是否在某子窗口控件上方 需要注意的是,子窗口获取geometry,是相对于父窗口的相对位置,QCursor::pos()获取的是鼠标绝对位置,要不将父窗口的相对位置进行换算,要不将鼠标的绝 ...
- 深入理解并发编程之----synchronized实现原理
版权声明:本文为博主原创文章,请尊重原创,未经博主允许禁止转载,保留追究权 https://blog.csdn.net/javazejian/article/details/72828483 [版权申 ...
- Fastdfs 部署干货
tracker server and client:192.168.1.42 storage server:192.168.1.46 storage server:192.168.1.53 安装: 安 ...
- WCF服务上应用protobuf z
protobuf是google提供的一个开源序列化框架,类似于XML,JSON这样 的数据表示语言,其最大的特点是基于二进制,因此比传统的XML表示高效短小得多.虽然是二进制数据格式,但并没有因此变得 ...
- Sandworm Attack小结
这个漏洞刚出来时就分析过,当时大致弄明白了原理,但对很多细节和原理还是一知半解.后来开始找工作……今天终于有时间来把欠的这部分功课补上. 这个漏洞网上的各种中英文分析已经很多了,因此这里我只根据自己的 ...
- ABAP类的文档生成工具
本文介绍的工具原理和JavaDoc类似,位于software component BBPCRM 1. 在ABAP类里新建一个名为CLASS_DOCU的私有方法. 然后把所有的注释写在这个方法源代码的前 ...