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 ...
随机推荐
- PHP 八种基本的数据类型
四种标量类型: boolean (布尔型) integer (整型) float (浮点型, 也称作 double) string (字符串) 两种复合类型: array (数组) object (对 ...
- FLASK日志记录
from flask import Flask from flask_restful import Resource, Api import logging app = Flask(__name__) ...
- JS之原型式的继承
创建一个Person的构造器 function Person(first, last, age, gender, interests) { this.name = { first, last }; t ...
- git自动更新网站代码
1.实现过程在linux上安装git服务.创建源版本库.从源版本库克隆得到网站目录,然后利用git中的hooks机制,在git push推送代码到源版本库的时候,触发编写的shell脚本,更新网站目录 ...
- java unsupported major.minor version 51.0 解决
1.概述 出现如题所述异常 是因为jdk高版本 编译后的class文件 运行在低版本的jre环境下(如jdk7编译 运行在jdk6环境下) 2. 解决方案 在eclipse等ide中重新编译 指定编译 ...
- Django—Model
Django 模型是与数据库相关的,与数据库相关的代码一般写在 models.py 中,Django 支持 Sqlite3.MySQL.PostgreSQL 等数据库,只需要在 settings.py ...
- Android 录音getMaxAmplitude()
这个方法是用来获取在前一次调用此方法之后录音中出现的最大振幅,文档解释如下: Returns the maximum absolute amplitude that was sampled since ...
- arcgis 线段合并
对于上面这种这种有一个字段相同的 线段,使用 使用后生成的矢量如下
- CI框架， 参数验证
/** * 统一API参数检验方法 * * 调用示例 check_param(array('money' => array('required', 'integer', 'greater_tha ...
- 根据ip抓 包
tcpdump -i any -s 0 host 101.81.134.53 -c 1000 -w ./zhj.cap