清明小长假之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和端口号打开项目 ...
随机推荐
- 论如何入门地使用vscode
微软大法好啊 这货更像是个gedit 以下内容只适合Oiers使用 本文档只适合新手引导的阶段使用 下载 这个是链接 可见这东西是和Emacs一样跨系统的 不知道为什么下载速度贼快 配置 还记得我们用 ...
- SDWebImage实现原理（怎么实现图片缓存器）
入口 setImageWithURL:placeholderImage:options: 会先把 placeholderImage 显示,然后 SDWebImageManager 根据 URL 开始处 ...
- cookie不能删除
cookie不仅仅包含一个键值对,还包含域 domain 路径path, 一般domain是请求的地址 www.baidu.com/news.html 那domain就是www.baidu.com ...
- Python 3基础教程3-数学运算
本文来介绍下Python中的常见数学运算,其实和其他语言一样,加减乘除语法差不多,这里注意下Python中指数的表示方法. # 这里介绍 常见的数学运算 # 加法print(5 + 8) # 减法pr ...
- Canvas 剪切图片
/** * 剪切图像 */ function initDemo8(){ var canvas = document.getElementById("demo8"); if (!ca ...
- pin
sjhh@123456 Michael zhang zhangxiaocong_2011@yeah.net
- php中变量的详细介绍
变量的含义: 用于存储信息的容器,在程序运行期间,可以变化的量 变量的命名规则: 1.变量以$符开始 2.变量名只能以字母或下划线开始 3.变量名只能是字母,下划线,数字,不能有特殊字符:逗号,句号, ...
- mysql安装目录、配置文件存放位置
linux系统下,如何知道mysql使用的配置文件到底是哪个呢?linux自带的mysql的安装目录又是什么呢?数据存放在什么目录下? 1.linux系统自带的mysql,其安装目录及数据目录查看方法 ...
- reinterpret_cast and const_cast
reinterpret_cast reinterpret意为“重新解释” reinterpret_cast是C++中与C风格类型转换最接近的类型转换运算符.它让程序员能够将一种对象类型转换为另一种,不 ...
- SSM之秒杀系统
利用idea搭建SSM框架,主要利用Maven仓库下载相应的jar包,以下是相关的pom.xml <project xmlns="http://maven.apache.org/POM ...