vue: 代码小记
1.事件派发：子控件->父控件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head> <body>
<div id="app">
<div>message : {{ message | json }}</div>
<input type="hidden" v-model="message | json" />
<child-component></child-component>
</div> <template id="child-component">
<input type="text" v-model="msg" />
<button @click="notify">添加事件</button>
</template>
</body>
<script src="jquery.js"></script>
<script src="vue.js"></script>
<script> var app = new Vue({
el:"#app",
data:{
message:[]
},
components:{
'child-component':{
template:'#child-component',
data:function(){
return {
msg:''
}
},
methods:{
notify:function(){
if($.trim(this.msg)){
// 派发事件
this.$dispatch('child-msg', this.msg, 222);
this.msg = '';
}
}
}
}
},
// 事件
events:{
'child-msg':function(msg, data2){
this.message.push(msg);
console.log(this.message);
console.log(data2);
}
}
}); </script>
</html>
2.事件广播：父控件->子控件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head> <body>
<div id="app">
<input type="text" v-model="msg" />
<child-component></child-component>
<button @click="notify">广播事件</button>
</div> <template id="child-component">
<ul>
<li v-for="item in messages">
录入内容：{{ item }}
</li>
</ul>
</template>
</body>
<script src="jquery.js"></script>
<script src="vue.js"></script>
<script> // 注册组件
Vue.component('child-component', {
template:'#child-component',
data:function(){
return {
messages:[]
}
},
events:{
'parent-msg':function(msg, data2){
console.log(data2);
this.messages.push(msg);
}
}
}); var app = new Vue({
el:'#app',
data:{
msg:''
},
methods:{
notify:function(){
if($.trim(this.msg)){ // console.log(this.msg);
// 广播
this.$broadcast('parent-msg', this.msg, 333);
this.msg = '';
}
}
}
}); </script>
</html>
3.ajax
function AjaxHelper() {
this.ajax = function(url, type, dataType, data, callback) {
$.ajax({
url: url,
type: type,
dataType: dataType,
data: data,
success: callback,
error: function(xhr, errorType, error) {
// alert('Ajax request error, errorType: ' + errorType + ', error: ' + error)
console.log('Ajax request error, errorType: ' + errorType + ', error: ' + error);
}
})
}
}
AjaxHelper.prototype.get = function(url, data, callback) {
this.ajax(url, 'GET', 'json', data, callback)
}
AjaxHelper.prototype.post = function(url, data, callback) {
this.ajax(url, 'POST', 'json', data, callback)
}
AjaxHelper.prototype.put = function(url, data, callback) {
this.ajax(url, 'PUT', 'json', data, callback)
}
AjaxHelper.prototype.delete = function(url, data, callback) {
this.ajax(url, 'DELETE', 'json', data, callback)
}
AjaxHelper.prototype.jsonp = function(url, data, callback) {
this.ajax(url, 'GET', 'jsonp', data, callback)
}
AjaxHelper.prototype.constructor = AjaxHelper
server.php
<?php
$op = $_REQUEST;
if(empty($op)){
$op = 'people';
}
else{
$op = $_REQUEST['op'];
}
$data = array();
if($op == 'people'){
$people = array(
array('name'=>'keenleung', 'age'=>25),
array('name'=>'keenleung2', 'age'=>26),
);
$data = $people;
}
echo json_encode(array(
'status' => 'success',
'data' => $data
));
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
template, simple-table{
display: none;
}
</style>
</head> <body>
<div id="app">
<simple-table></simple-table>
</div> <template id="simple-table">
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr v-for="row in rows">
<td>{{ row.name }}</td>
<td>{{ row.age }}</td>
</tr>
</table>
</template>
</body>
<script src="jquery.js"></script>
<script src="vue.js"></script>
<script src="ajax-helper.js"></script>
<script> var ajaxHelper = new AjaxHelper(); var app = new Vue({
el:'#app',
components:{
'simple-table':{
template:'#simple-table',
data:function(){
return {
rows:[],
// 本地服务器
url:'http://www.mysites.com/vue/server.php',
}
},
methods:{
getRows:function(){
var vm = this;
callback = function(data){
// console.log(data); // 设置值
vm.$set('rows', data.data); // 获取值
console.log(vm.$get('rows'));
} ajaxHelper.get(vm.url, null, callback);
}
},
// 执行方法
ready:function(){
this.getRows();
}
}
}
});
</script>
</html>
vue: 代码小记的更多相关文章
- 团队协作统一vue代码风格，vscode做vue项目时的一些配置
1. 安装Vetur 扩展 主要是用于让vscode能识别vue文件,对vue代码进行高丽处理,并且它内置了一些代码格式化的设置 2. 安装ESLint 如果你的项目已经开启了eslint规范, 再有 ...
- vscode vue代码提示错误
在用vscode编写vue代码时,因为安装的有vetur插件,所以当代码中有v-for语法时,会提示 [vue-language-server] 'v-for' directives require ...
- 小白学习VUE第一篇文章---如何看懂网上搜索到的VUE代码或文章---使用VUE的三种模式：
小白学习VUE第一篇文章---如何看懂网上搜索到的VUE代码或文章---使用VUE的三种模式: 直接引用VUE; 将vue.js下载到本地后本目录下使用; 安装Node环境下使用; ant-desig ...
- Vue代码分割懒加载的实现方法
什么是懒加载 懒加载也叫延迟加载,即在需要的时候进行加载,随用随载. 为什么需要懒加载 在单页应用中,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多 ...
- vue进阶：vs code添加vue代码片段
如何设置? 选择或创建 配置代码 如何使用? 一.如何设置? 进入vs code主界面-->使用快捷键“ctrl + shift + p”: 如果你是使用Preferences:Configur ...
- 解决Vue刷新一瞬间出现样式未加载完或者出现Vue代码问题
解决Vue刷新一瞬间出现样式未加载完或者出现Vue代码问题: <style> [v-cloak]{ display: none; } </style> <div id=& ...
- vscode+eslint自动格式化vue代码的方法
前言 使用vscode开发vue项目的时候,为了编码格式的统一化,使用eslint规范进行格式化.此时通过eslint插件可以实现对vue代码的自动格式化. 使用方式 在vscode的插件模块处,搜索 ...
- <tangmuchw>之新手vue项目小记--新建.vue文件，运行项目，出现error：This dependency was not found...
错误码: This dependency was not found: * !!vue-style-loader!css-loader?{"minimize":false,&quo ...
- vscode中vue代码颜色插件
vue提示插件[Vscode] 编者寄语:vscode的确是前端开发中很好的工具,安装颜色插件,从视觉上是美的享受.曾经的我遇到了vscode代码全是灰色,黑色的困惑,后来整理找到方法,整 ...
随机推荐
- pip软件包安装 + Anaconda软件库安装 教程
PIP软件包安装(适用于Ubuntu和Windows10): 下载pip的安装包,官网链接如下:https://pypi.python.org/pypi/pip 我选择了Source源的安装方式,单击 ...
- sqlmap 1.3.2.16 帮助信息
Usage: sqlmap.py [options] 选项: -h, --help 显示基本帮助信息并退出 -hh 显示高级帮助消息并退出 --version 显示程序的版本号并退出 -v VERBO ...
- P3353 在你窗外闪耀的星星
飞逝的的时光不会模糊我对你的记忆.难以相信从我第一次见到你以来已经过去了3年.我仍然还生动地记得,3年前,在美丽的集美中学,从我看到你微笑着走出教室,你将头向后仰,柔和的晚霞照耀着你玫瑰色的脸颊.我明 ...
- 大数据技术 - MapReduce 作业的运行机制
前几章我们介绍了 Hadoop 的 MapReduce 和 HDFS 两大组件,内容比较基础,看完后可以写简单的 MR 应用程序,也能够用命令行或 Java API 操作 HDFS.但要对 Hadoo ...
- Xamarin Essentials教程数据处理传输数据
Xamarin Essentials教程数据处理传输数据 在移动应用程序中,除了常规的数据处理,还涉及数据存储.数据传输.版本数据多个方面.Xamarin.Essentials组件提供了多个数据处理相 ...
- Ue4管线中的灯光信息
http://www.tomlooman.com/disneyfaciliershadow/ 看了这篇Blog我有了一个惊喜的发现: float4 GetPerPixelLightAttenuatio ...
- BZOJ.5338.[TJOI2018]xor(可持久化Trie)
BZOJ LOJ 洛谷 惊了,18年了还有省选出模板题吗= = 做这题就是练模板的,我就知道我忘的差不多了 询问一就用以DFS序为前缀得到的可持久化Trie做,询问二很经典的树上差分. 注意求询问二的 ...
- BZOJ.4513.[SDOI2016]储能表(数位DP)
BZOJ 洛谷 切了一道简单的数位DP,终于有些没白做题的感觉了...(然而mjt更强没做过这类的题也切了orz) 看部分分,如果\(k=0\),就是求\(\sum_{i=0}^n\sum_{j=0} ...
- BZOJ.5249.[九省联考2018]iiidx(贪心 线段树)
BZOJ LOJ 洛谷 \(d_i\)不同就不用说了,建出树来\(DFS\)一遍. 对于\(d_i\)不同的情况: Solution 1: xxy tql! 考虑如何把这些数依次填到树里. 首先对于已 ...
- 2017-9-17-Windows Live Writer常用快捷键
Window Live Writer常用的快捷键: 将当前文章发布到博客:CTRL+SHIFT+P 打开新文章: CTRL+N 将草稿保存到计算机上: CTRL+S 切换到"普通" ...