清明小长假之VUE.JS学习测试码
我们放了四天假，刚好借此机会，系统的了解一下VUE.JS。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="demo.css" />
</head>
<body>
<div id="app">
<p>123</p>
</div>
<template id="tpl">
<div>
<p>This is a tmp from template tag. </p>
<span>Hello {{name}}</span>
<span v-once="name">{{name}}</span>
<div v-bind:id="'id-' + id">
your nkow
</div>
<img v-bind:src="avatar"/>
<button v-on:click.stop="alert">alert</button>
{{firstName}}
{{lastName}}
{{fullName}}
{{price}}
<my-component title="myTitle" content="myContent"></my-component>
</div>
</template>
</body>
<script src="http://cdn.bootcss.com/vue/2.2.4/vue.min.js"></script>
<script>
var Myconponent = Vue.component('my-component', {
props: ['title', 'content'],
data: function() {
return {
desc: '123'
}
},
template: '<div>\
<h1>title: {{title}}</h1> \
<p>content: {{content}}</p> \
<p>desc: {{desc}}</p> \
</div>'
})
var data = {id : 1,
index: 0,
name: 'Vue',
avatar: 'http://www.baidu.com/',
count: [1, 2, 3, 4, 5],
names: ['Vue1.0', 'Vue2.0'],
firstName: "Gavin",
lastName: "CLY",
cents: 100,
items: [
{name: 'Vue1.0', version: '1,0'},
{name: 'Vue1.1', version: '1.0'}
]};
var vm = new Vue({
el: "#app",
template: "#tpl",
data: data,
beforeCreate: function() {
console.log("beforeCreate");
},
computed: {
fullName: function() {
return this.firstName + " " + this.lastName;
},
price: {
set: function(newValue) {
this.cents = newValue * 100;
},
get: function() {
return (this.cents/100);
}
}
},
methods: {
alert: function() {
alert(this.id);
}
}
})
</script>
</html>
清明小长假之VUE.JS学习测试码的更多相关文章
- Vue.js学习笔记（2）vue-router
vue中vue-router的使用:
- Vue.js学习 Item8 -- 方法与事件处理器
方法处理器 可以用 v-on 指令监听 DOM 事件: <div id="example"> <button v-on:click="greet&quo ...
- vue.js 学习笔记3——TypeScript
目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...
- vue.js学习资料
vue.js学习VuejsAPI教程 https://vuejs.org.cn/guide/Vuejs自己的构建工具 http://www.jianshu.com/p/f8e21d87a572如何用v ...
- Vue.js学习笔记：在元素 和 template 中使用 v-if 指令
f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...
- vue.js学习之better-scroll封装的轮播图初始化失败
vue.js学习之better-scroll封装的轮播图初始化失败 问题一:slider组件初始化失败 原因:页面异步获取数据很慢,导致slider初始化之后,数据还未获取到,导致图片还未加载 解决方 ...
- vue.js学习之 跨域请求代理与axios传参
vue.js学习之 跨域请求代理与axios传参 一:跨域请求代理 1:打开config/index.js module.exports{ dev: { } } 在这里面找到proxyTable{}, ...
- vue.js学习之 打包为生产环境后，页面为白色
vue.js学习之 打包为生产环境后,页面为白色 一:配置问题 当我们将项目打包为生产环境后,在dist文件夹下打开index.html,会发现页面为白色. 1:打开config>index.j ...
- vue.js学习之 如何在手机上查看vue-cli构建的项目
vue.js学习之 如何在手机上查看vue-cli构建的项目 一:找到config文件夹下的index.js文件,打开后,将host的值改为你本地的ip,保存后重启项目 二:输入ip和端口号打开项目 ...
随机推荐
- win7重装后恢复grub和ubuntu14
没有光盘和优盘启动盘,可以在win7下安装easybcd,添加一个启动选项为linux grub2,启动后进入ubutnu,执行如下: sudo -i //取得root权限 fdisk -l ...
- 《Cracking the Coding Interview》——第18章：难题——题目8
2014-04-29 03:10 题目:给定一个长字符串S和一个词典T,进行多模式匹配,统计S中T单词出现的总个数. 解法:这是要考察面试者能不能写个AC自动机吗?对面试题来说太难了吧?我不会,所以只 ...
- 《Cracking the Coding Interview》——第17章：普通题——题目11
2014-04-29 00:00 题目:给定一个rand5()函数,能够返回0~4间的随机整数.要求实现rand7(),返回0~6之间的随机整数.该函数产生随机数必须概率相等. 解法:自己想了半天没想 ...
- python学习笔记-基础
1.大小写敏感 2. print (n,f,s1,s2,s3,s4,sep='\n') -- 换行输出 seq='\n' print ('n=%d'%n,'f=%f'%f,'s1=%s'%s1,' ...
- android系统联系人分组特效实现(2)---字母表快速滚动
要实现这种功能,只需要在 android系统联系人分组特效实现(1)---分组导航和挤压动画 的基础上再加上一个自定义控件即可完成. 1.新建项目,继续新建一个java类,BladeView,用 ...
- JVM垃圾回收机制GC
1. 垃圾回收的意义 在C++中,对象所占的内存在程序结束运行之前一直被占用,在明确释放之前不能分配给其它对象:而在Java中,当没有对象引用指向原先分配给某个对象的内存时,该内存便成为垃圾.JVM的 ...
- 如何修改root密码
默认情况下,每次登录ubuntu都会生成一个随机的root密码,如果想要修改, sudo passwd 然后输入密码,这个密码就作为root用户的密码
- Codeforces Round #388 (Div. 2) 749E(巧妙的概率dp思想)
题目大意 给定一个1到n的排列,然后随机选取一个区间,让这个区间内的数随机改变顺序,问这样的一次操作后,该排列的逆序数的期望是多少 首先,一个随机的长度为len的排列的逆序数是(len)*(len-1 ...
- 2017 多校4 Matching In Multiplication(二分图)
Matching In Multiplication 题解: 首先如果一个点的度数为1,那么它的匹配方案是固定的,继而我们可以去掉这一对点.通过拓扑我们可以不断去掉所有度数为1的点. 那么剩下的图中左 ...
- uoj185 [ZJOI2016]小星星 【dp + 容斥】
题目链接 uoj185 题解 设\(f[i][j]\)表示\(i\)为根的子树,\(i\)号点对应图上\(j\)号点时的方案数 显然这样\(dp\)会使一些节点使用同一个节点,此时总的节点数就不满\( ...