Vue.js的小例子--随便写的
1.领导安排明天给同事们科普下vue
2.简单写了两个小例子
3.话不多说直接上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.active {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<!--这是我们的View-->
<div id="app">
{{ message }}
</div>
<hr />
<div id="model">
<input type="text" v-model="text" />
<span>{{text}}</span>
</div>
<hr />
<div id="_class">
<div v-bind:class="{ 'active' : isTrue }">1</div>
<div v-bind:class="{ 'active' : getClass }">1</div>
</div>
<hr />
<div id="_function">
<span>{{art}}</span>
<input type="button" v-on:click="getClick" />
<select v-on:change="getChange">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<hr />
<div id="_ifAndFor">
<template v-for="(son, index) in father">
<span v-if="index % 2 == 0">{{son}}</span>
<span v-else-if="index % 3 == 0" style="background-color: green;">{{son}}</span>
</template>
</div>
</hr>
</body>
<script src="js/vue.js"></script>
<script>
// 这是我们的Model
var exampleData = {
message: 'Hello World!'
}
// 创建一个 Vue 实例或 "ViewModel"
// 它连接 View 与 Model
new Vue({
el: '#app',
data: exampleData
})
new Vue({
el: '#model',
data: {
text: ""
}
})
new Vue({
el: '#_class',
data: {
isTrue: false
},
methods: {
getClass: function () {
return !this.isTrue;
}
}
})
new Vue({
el: '#_function',
data: {
art: ""
},
methods: {
getClick: function () {
this.art = "梵高";
},
getChange: function () {
this.art = "达文西";
}
}
})
new Vue({
el: "#_ifAndFor",
data: {
father: []
},
methods: {
},
mounted: function () {
for (var i = 0; i < 10; i++) {
this.father.push('son' + i);
}
}
})
</script>
</html>Vue.js的小例子--随便写的的更多相关文章
- VUE.JS和小程序的共通之处
我是先学习的小程序开发,之后才了解到vue.js.也是一直没有时间去看相关vue.js的知识和内容.现在回顾起来,小程序和vue.js都是前端的内容. 例如小程序中的目录结构物page+app.js+ ...
- 使用vue.js开发小程序
写在前面 刚刚开源的mpvue引起了不少前端er们的注意,下图是一个简单的对比. 话不多说,我们现在感受一下如何使用mpvue开发小程序.(以下内容参照mpvue文档完成). 开发环境 node np ...
- vue.js技巧小计
//删除数组索引方法01 del (index) { this.arr.splice(index ,1); } //删除数组索引方法01 del (index) { this.$delete(this ...
- 收藏的js学习小例子
1.js模拟java里的Map function Map(){ var obj = {} ; this.put = function(key , value){ obj[key] = value ; ...
- vue.js常见面试题及常见命令介绍
Vue.js介绍 Vue.js是JavaScript MVVM(Model-View-ViewModel)库,十分简洁,Vue核心只关注视图层,相对AngularJS提供更加简洁.易于理解的API.V ...
- 用Vue.js开发微信小程序：开源框架mpvue解析
前言 mpvue 是一款使用 Vue.js 开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程 ...
- Vue.js起手式+Vue小作品实战
本文是小羊根据Vue.js文档进行解读的第一篇文章,主要内容涵盖Vue.js的基础部分的知识的,文章顺序基本按照官方文档的顺序,每个知识点现附上代码,然后根据代码给予个人的一些理解,最后还放上在线编辑 ...
- Vue.js下载方式及基本概念
Vue.js 简介 说明及下载 Vue.js使用文档已经写的很完备和详细了,通过以下地址可以查看: https://cn.vuejs.org/v2/guide/ vue.js如果当成一个库来使用,可以 ...
- 前端之Vue.js库的使用
vue.js简介 Vue.js读音 /vjuː/, 类似于 view Vue.js是前端三大新框架:Angular.js.React.js.Vue.js之一,Vue.js目前的使用和关注程度在三大框架 ...
随机推荐
- 深度解析pos机，养卡人必看！
好多人对POS 好像都比较迷茫,这个说这个POS 好,那个说那个POS 好.下面就我对POS 的认知给兄弟们说下.对与不对的各位见谅. 第一.一清机 一清机是指在结算日结算后直接通过支付公司账号转 ...
- Windows(7)上不能启动MySQL服务（位于本地计算机上）错误1067 ：进程意外终止
就这段时间,很多人在抱怨为什么自己的MySQL又打不开问题. 就“Windows(7)上不能启动MySQL服务(位于本地计算机上)错误1067 :进程意外终止”这个问题,我想到了几种方案解决: 一.首 ...
- OutputStream-InputStream-FileOutputStream-FileInputStream-BufferedOutputStream-BufferedInputStream-四种复制方式-单层文件夹复制
字节流两套: java.lang.Object--java.io.OutputStream--java.io.FileOutputStream java.lang.Ob ...
- 【Leetcode】【Medium】Linked List Cycle
Given a linked list, determine if it has a cycle in it. 解题: 判断单链表是否具有环,使用两个指针once和twice遍历链表,once一次走一 ...
- nginx里配置跨域
发布于 881天前 作者 wendal 1404 次浏览 复制 上一个帖子 下一个帖子 标签: nginx 跨域 if ($request_method = OPTIONS ) { add ...
- TensorFlow基础（三）激活函数
(1)激活函数 激活函数(Activation function)并不是指这个函数去激活什么,而是指如何把“激活的神经元的特征”通过函数把特征保留映射出来.对输入信息进行非线性变换. 线性模型的最大特 ...
- Python 输出中文的笔记
import sysreload(sys)sys.setdefaultencoding('utf8') 导入csv乱码: 加入: import codecs csvfile.write(codecs. ...
- Linux实用指令（2）
cat指令 cat 查看文件内容,只读的方式 • 基本语法 cat [选项] 要查看的文件 • 常用选项 -n :显示行号 • 应用实例 注意:cat 只能浏览文件,而不能 ...
- 最长公共子序列问题LCS
最长公共子序列问题 在这里介绍一种在动态规划中类似于板子题的类型 : 最长公共子序列问题.(Link) 首先来看题面:给出1-n的两个排列P1和P2,求它们的最长公共子序列. 我们看到题之后的第一个想 ...
- shrio的rememberMe不起作用
在移植项目.每次重启服务器需要登录.比较麻烦.于是研究下shrio的功能. rememberMe大概可以满足我的需求.但是跟着网上配置了.不起作用...... 于是乎查看源代码拉.java的好处... ...