清明小长假之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和端口号打开项目 ...
随机推荐
- 您的手机上未安装应用程序 android 点击快捷方式提示未安装程序的解决
最近APP出现一个很奇怪的问题,在Android 4.4.2和android 4.4.3系统上点击应用的快捷方式,打不开应用,而且会提示未安装程序. 确认了应用的MainActivity中设置了and ...
- Parameter 'limit' not found. Available parameters are [arg1, arg0, pa
mybatis代码报错,这是因为mapper识别不了limit,需要替换成 LIMIT #{arg0},#{arg1}
- Windows系统搭建Mysql Cluster集群
简单介绍一下MySQL集群涉及的三种节点: 管理节点(也可以称管理服务器)是整个集群环境的核心,类似于集群中起调度作用的枢纽,由它来负责管理其它节点(数据节点和SQL节点)的开启.关闭或重启某 ...
- JQuery方法总结
JQuery方法总结 Dom: Attribute:(属性) $("p").addClass(css中定义的样式类型); 给某个元素添加样式 $("img"). ...
- Android学习记录（8）—Activity的四种加载模式及有关Activity横竖屏切换的问题
Activity有四种加载模式:standard(默认), singleTop, singleTask和 singleInstance.以下逐一举例说明他们的区别: standard:Activity ...
- 剑指Offer - 九度1351 - 数组中只出现一次的数字
剑指Offer - 九度1351 - 数组中只出现一次的数字2013-11-23 01:23 题目描述: 一个整型数组里除了两个数字之外,其他的数字都出现了两次.请写程序找出这两个只出现一次的数字. ...
- 每天一个Linux命令（2）：shutdown命令
shutdown命令是系统关机命令.shutdown指令可以关闭所有程序,并依用户的需要,进行重新开机或关机的动作. 语法 shutdown(选项)(参数) 选项 -c:取消已经在进行的 shutdo ...
- shell之echo and printf
#!/bin/sh _________echo___________#read name #echo "$name It is a test" #read命令从标准的输入中读取一行 ...
- Python 黑魔法（持续收录）
Python 黑魔法(持续收录) zip 对矩阵进行转置 a = [[1, 2, 3], [4, 5, 6]] print(list(map(list, zip(*a)))) zip 反转字典 a = ...
- 虚函数&&虚继承
如果说没有虚函数的虚继承只是一个噩梦的话,那么这里就是真正的炼狱.这个C++中最复杂的继承层次在VS上的实现其实我没有完全理解,摸爬滚打了一番也算得出了微软的实现方法吧,至于一些刁钻的实现方式我也想不 ...