vue1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
msg:'welcome vue'
}
});
};
</script>
</head>
<body>
<div id="box1">
<input type="text" v-model="msg">
<input type="text" v-model="msg"> <!-- js里面的没有动态改变,双向数据绑定 -->
<br>
{{msg}}
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'body', //选择器
data:{
msg:'welcome vue'
}
});
};
</script>
</head>
<body>
<div>
<input type="text" v-model="msg">
<input type="text" v-model="msg">
<br>
{{msg}}
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'body',
data:{
msg:'welcome vue',
msg2:12,
msg3:true,
arr:['apple','banana','orange','pear'],
json:{a:'apple',b:'banana',c:'orange'}
}
});
};
</script>
</head>
<body>
<input type="text" v-model="msg">
<input type="text" v-model="msg">
<br>
{{msg}}
<br>
{{msg2}}
<br>
{{msg3}} <br>
{{arr}} //apple,banana,orange,pear
<br>
{{json}} //[object Object]
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
arr:['apple','banana','orange','pear'],
json:{a:'apple',b:'banana',c:'orange'}
}
});
};
</script>
</head>
<body>
<div id="box">
<ul>
<li v-for="value in arr"> 循环li
{{value}} {{$index}} apple 0
banana 1
orange 2
pear 3
</li>
</ul>
<hr>
<ul>
<li v-for="value in json">
{{value}} {{$index}} {{$key}}
apple 0 a
banana 1 b
orange 2 c
</li>
</ul> <hr>
<ul>
<li v-for="(k,v) in json">
{{k}} {{v}} {{$index}} {{$key}}
a apple 0 a
b banana 1 b
c orange 2 c
</li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{ //数据
arr:['apple','banana','orange','pear'],
json:{a:'apple',b:'banana',c:'orange'}
},
methods:{
add:function(){
this.arr.push('tomato');//数据更新模版自动更新
},
show:function(){
alert(1);
}
}
});
};
</script>
</head>
<body>
<div id="box">
<input type="button" value="按钮1" v-on:click="show()">
<input type="button" value="按钮2" v-on:dblclick="add()">
<input type="button" value="按钮3" v-on:mouseover="add()">
<br>
<ul>
<li v-for="value in arr">
{{value}}
</li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{ //数据
arr:['apple','banana','orange','pear'],
json:{a:'apple',b:'banana',c:'orange'},
a:true
},
methods:{
add:function(){
this.arr.push('tomato');
}
}
});
};
</script>
</head>
<body>
<div id="box">
<div style="width:100px; height:100px; background: red" v-show="false">
</div> <input type="button" value="按钮" v-on:click="a=!a">
<div style="width:100px; height:100px; background: red" v-show="a"> </div>
</div>
</body>
</html>
vue1的更多相关文章
- 使用vue1.0+es6+vue-cli+webpack+iview-ui+jQuery 撸一套高质量的后台管理系统
首先按照vue.js官网的指令安装: 1.本地安装好node.js 2.根据官方命令行工具 详情 这样一个官方的脚手架工具就已经搭建好了:但是有一点需要注意的是由于现在按照官方的搭建方法是搭建vue2 ...
- vue1升级到vue2的问题
router 不能用map方法了,需要改router的结构改为 routers= [ { // 当没有匹配路由时默认返回的首页 path:'/index', compone ...
- vue1.0和vue2.0的区别(一)
今天我们来说一说vue1.0和vue2.0的主要变化有哪些 一.在每个组件模板,不在支持片段代码 VUE1.0是: <template> <h3>我是组件</h3> ...
- vue1.0和vue2.0的区别(二)
这篇我们继续之前的vue1.0和vue2.0的区别(一)继续说 四.循环 学过vue的同学应该知道vue1.0是不能添加重复数据的,否则它会报错,想让它重复添加也不是不可以,不过需要定义别的东西 而v ...
- vue1与vue2的路由 以及vue2项目大概了解
vue1的路由 1.设置根组件 Vue.extend() 2.设置局部组件 Vue.extend({template:"/home"}) 3.实例化路由 var route ...
- vue1.0中$index一直报错的解决办法
原文链接:https://www.cnblogs.com/liqiong-web/p/8144925.html 看学习视频,因为年份比较早了,其实vue早已迭代到vue2.0了,遇到一些问题: v-f ...
- vue2与vue1的区别
在前面的学习过程中我们已经对vue1有了一定的了解,下面我们来学习一下vue2,看一下vue1与vue2有什么区别. 区别1: 在vue2中使用v-for指令时它可以添加重复的内容,就像可以添加相同的 ...
- vue1.0与vue2.0对于v-for的使用的区别
vue1.0与vue2.0对于v-for的使用的区别: 1,vue1.0中有$index,而vue2.0将$index移除. 2,vue1.0中(index,item) in list 而vue2.变 ...
- vue1.0＋vue2.0实现选项卡
通常我们写tab选项卡的时候,一般都是用jq等去操作dom,给同级元素移除active类,然后,给被点击元素添加active类,用vue实现也是同样的原理,都是操作active类. 我们都知道用vue ...
- vue使用中遇到的，以及vue1.0到vue2.0新手踩的坑
最近再写一个vue的项目,视频中用的是vue1.0,但是现在vue已经2.0,所以踩了很多坑,先记录下来.理解有误再来修改. 路由问题 之前的路由是写在app.vue里边,而2.0的路由直接有个rou ...
随机推荐
- Leaflet学习笔记（一）
一.简介 Leaflet是一个主要适用于移动端交互地图的领先的开源javascript库.虽然js库只有38KB左右,但是却能满足大部分开发者的所有功能需求. Leaflet拥有着简单,高效和实用的设 ...
- 6.boostTCP通信
客户端 #include <boost/asio.hpp> #include <iostream> #include <stdlib.h> using namesp ...
- <Sicily>Brackets Matching
一.题目描述 Let us define a regular brackets sequence in the following way: Empty sequence is a regular s ...
- js中字符串下划线转为驼峰
function camelCase(string){ // Support: IE9-11+ return string.replace( /-([a-z])/g, function( all, l ...
- MVC5 + EF6 入门完整教程(转载)--01
MVC5 + EF6 入门完整教程 第0课 从0开始 ASP.NET MVC开发模式和传统的WebForm开发模式相比,增加了很多"约定". 直接讲这些 "约定&qu ...
- Android studio树形
原创作品,允许转载,转载时请务必声明作者信息和本声明. http://www.cnblogs.com/zhu520/p/8349553.html 这个是上网找了好久才弄出来的,我把我上网找的总结也写 ...
- 【SRM 717 div2 B】LexmaxReplace
Problem Statement Alice has a string s of lowercase letters. The string is written on a wall. Alice ...
- Spring学习详解（1）——Spring入门详解
一:spring的基本用法: 1,关于spring容器: spring容器是Spring的核心,该 容器负责管理spring中的java组件, ApplicationContext ctx = ne ...
- HTML学习----------DAY2第四节
HTML 文档是由 HTML 元素定义的. HTML 元素 HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码. 注释:开始标签常被称为开放标签(opening ...
- HDU 5391-Zball in Tina Town(数论)
题目地址:pid=5391">HDU 5391 题意: Tina Town 是一个善良友好的地方,这里的每个人都互相关心.Tina有一个球,它的名字叫zball. zball非常奇妙, ...