Vue的基本使用(一)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
</head>
<body>
<div id="app">
<h2>{{ msg }}</h2>
<h2>{{ 1+1 }}</h2>
<h2>{{ {"name":"日天"} }}</h2>
<h3>{{ person.name }}</h3>
<h2>{{ 1>2? "真的":"假的" }}</h2>
<p>{{ msg2.split("").reverse().join("") }}</p>
<div>{{ text }}</div>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
msg:"呵呵",
person:{
name:"dasabi"
},
msg2:"hello vue",
text:"<h2>ritian</h2>"
}
})
</script>
</body>
</html>
1. v-text和v-html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-text和v-html</title>
</head>
<body>
<div id="app">
{{ msg }}
<div v-text="msg"></div>
<hr>
<div v-html="msg"></div>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:"#app",
data(){
//data中是一个函数,函数中return一个对象,可以是空对象,但不能不return
return {msg:"<h2>ritian</h2>"}
}
})
</script>
</body>
</html>
2. v-if和v-show
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-if和v-show</title>
<style>
.box{
width: 200px;
height: 200px;
background-color: red;
} .box2{
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div id="app">
{{ add(1,2) }}
<button v-on:click = "handlerClick">隐藏</button>
<div class="box" v-show = "isShow"></div>
<div class="box2" v-if = "isShow"></div>
<div v-if = "Math.random() > 0.5">有了</div>
<div v-else>没了</div>
</div> <script src="vue.js"></script>
<script>
new Vue({
el:"#app",
data() {
return {
msg:"<h2>ritian</h2>",
num:1,
isShow:true
}
},
methods:{
add(x,y){
console.log(this.num);
return x + y;
},
handlerClick(){
console.log(this);
this.isShow = !this.isShow;
}
}
}) </script>
</body>
</html>
3. v-bind和v-on
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>v-bind和v-on</title> <style>
.box{
width: 200px;
height: 200px;
background-color: red;
}
.active{
background-color: green;
}
</style>
</head>
<body>
<div id="app">
<!-- v-bind 标签中的所有属性 img标签sr alt, a标签的href title id class -->
<button v-on:click = "handlerChange">切换颜色</button>
<img v-bind:src="imgSrc" v-bind:alt="msg">
<div class="box" v-bind:class = "{active:isActive}"></div>
</div>
<script src="./vue/dist/vue.js"></script>
<script>
// v-bind和v-on的简便写法: v-bind为:,v-on为@
new Vue({
el:"#app",
data(){
return {
imgSrc:"./img/1.jpg",
msg:"美女",
isActive:true
}
},
methods:{
handlerChange(){
this.Active = !this.isActive;
this.isActive = false;
},
handlerLeave(){
this.isActive = true;
}
}
})
</script>
</body>
</html>
4. v-for
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 200px;
height: 200px;
background-color: red;
}
.avtive{
background-color: green;
}
</style>
</head>
<body>
<div id="app">
<ul v-if = "data.status === 'ok'">
<li v-for = "(item,index) in data.users" :key = "item.id" >
<h3>{{ item.id }} -----------{{ item.name }} ----------{{ item.age }}</h3>
</li>
</ul>
<div v-for = "(value,key) in peron">{{ key }} --------{{ value }}</div>
</div>
<script src="./vue/dist/vue.js"></script>
<script>
new Vue({
el:"#app",
data(){
return {
data:{
status:"ok",
users:[
{id:1,name:"aaa",age:10},
{id:2,name:"bbb",age:20},
{id:3,name:"ccc",age:30},
]
},
person:{
name:"ddd"
}
}
},
methods:{}
})
</script>
</body>
</html>
5. vue中使用ajax
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue-ajax</title>
<style>
span.active {
color: red;
}
</style>
</head> <body>
<div id="app">
<div>
<span @click="handlerClick(index,category.id)" v-for="(category,index) in categoryList" :key="category.id"
:class="{active:currentIndex == index}">{{ category.name }}</span> </div>
</div> <script src="vue/dist/vue.js"></script>
<script src="vue/dist/jquery.js"></script>
<script>
let vm = new Vue({
el: "#app",
data() {
return {
categoryList: [],
currentIndex: 0
}
},
methods: {
handlerClick(i, id) {
this.currentIndex = i;
$.ajax({
url: `https://www.luffycity.com/api/v1/courses/?sub_category=${id}`,
type: "get",
success: (data) => {
var data = data.data;
console.log(data);
}
})
}
},
created() {
$.ajax({
url: "https://www.luffycity.com/api/v1/course_sub/category/list/",
type: "get",
success: (data) => {
if (data.error_no === 0) {
var data = data.data;
let obj = {
id: 0,
name: "全部",
category: 0
};
this.categoryList = data;
this.categoryList.unshift(obj)
}
},
error: function (err) {
console.log(err)
}
})
}
})
</script>
</body>
</html>
6. 音乐播放器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>音乐播放器</title>
<style>
ul li.active {
background-color: #f0ad4e;
}
</style>
</head>
<body>
<div id="music">
<!-- @ended 播放完成会自动调用该方法 -->
<audio :src="musicData[currentIndex].songSrc" controls autoplay @ended = "nextHandler"></audio>
<ul>
<li @click = "songHandler(index)" v-for = "(item,index) in musicData" :key = "item.id" :class = "{active:index === currentIndex}">
<h2>歌手: {{ item.author }}</h2>
<p>歌名: {{ item.name }}</p>
</li>
<button @click = "prevHandler">上一首</button>
<button @click = "nextHandler">下一首</button>
<button @click = "suiji">随机播放</button>
<button @click = "xunhuan">单曲循环</button> </ul>
</div> <script src="vue/dist/vue.js"></script>
<script>
var musicData = [
{
id: 1,
name: "于荣光-少林英雄",
author: "于荣光",
songSrc: "./static/于荣光 - 少林英雄.mp3"
},
{
id: 2,
name: "Joel Adams - Please Dont Go",
author: "Joel Adams",
songSrc: "./static/Joel Adams - Please Dont Go.mp3"
},
{
id: 3,
name: "MKJ - Time",
author: "MKJ",
songSrc: "./static/MKJ - Time.mp3"
},
{
id: 4,
name: "Russ - Psycho (Pt. 2)",
author: "Russ",
songSrc: "./static/Russ - Psycho (Pt. 2).mp3"
},
];
new Vue({
el: "#music",
data() {
return {
musicData: [],
currentIndex: 0
}
},
methods: {
songHandler(i) {
this.currentIndex = i;
},
nextHandler() {
this.currentIndex++;
},
prevHandler() {
this.currentIndex--;
},
suiji(){
this.currentIndex = Math.ceil(Math.random()*5);
},
xunhuan(){
this.currentIndex = this.currentIndex
}
},
created() {
this.musicData = musicData
}
})
</script>
</body>
</html>
7. 计算属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算属性</title>
</head>
<body>
<div id="app">
<p>{{ msg }}</p>
<p>{{ myMsg }}</p>
<button @click = "clickHandler">修改</button>
</div> <script src="./vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el:"#app",
data(){
return {
msg:"alex",
age:18
}
},
created(){
setInterval(() => { })
},
methods:{
clickHandler(){
this.msg = "wusir";
this.age = 20;
},
},
computed:{
myMsg:function () {
return `我的名字叫${this.msg},年龄是${this.age}`;
}
}
})
</script>
</body>
</html>
Vue的基本使用(一)的更多相关文章
- Vue.js 和 MVVM 小细节
MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...
- wepack+sass+vue 入门教程（三）
十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...
- wepack+sass+vue 入门教程（二）
六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...
- wepack+sass+vue 入门教程（一）
一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...
- Vue + Webpack + Vue-loader 系列教程（2）相关配置篇
原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ 使用预处理器 在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue- ...
- Vue + Webpack + Vue-loader 系列教程（1）功能介绍篇
原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ Vue-loader 是什么? vue-loader 是一个加载器,能把如下格式的 Vue ...
- 关于Vue.js 2.0 的 Vuex 2.0，你需要更新的知识库
应用结构 实际上,Vuex 在怎么组织你的代码结构上面没有任何限制,相反,它强制规定了一系列高级的原则: 应用级的状态集中放在 store 中. 改变状态的唯一方式是提交mutations,这是个同步 ...
- Vue.js 2.0 和 React、Augular等其他框架的全方位对比
引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那么你就来对了. 客观来说,作为核心团队成员,显然我们会 ...
- 窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼？
引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...
- 初探Vue
Vue.js(读音/vju:/,类似于view),是近来比较火的前端框架,但一直没有怎么具体了解.实现过,就知道个啥的MVVM啦,数据驱动啦,等这些关于Vue的虚概念. 由于最近,小生在公司中,负责开 ...
随机推荐
- Js判断当前浏览者的操作系统
function validataOS(){ var userAgent = navigator.userAgent; if(userAgent.indexOf('Window')>0){ re ...
- hive Metastore contains multiple versions
凌晨接到hive作业异常,hive版本为1.2.1,hadoop版本apache 2.7.1,元数据存储在mysql中,异常信息如下: Logging initialized using config ...
- 搭建Elk集群搭建 ES-filebeat-logstrash-kibana
一 .基础环境 软件 版本 作用 Linux/Win Server2012 CentOs/Win Server2012 服务器环境 JDK 1.8.0_151 运行环境依赖 Elasticsearch ...
- 多线程与高并发(三)synchronized关键字
上一篇中学习了线程安全相关的知识,知道了线程安全问题主要来自JMM的设计,集中在主内存和线程的工作内存而导致的内存可见性问题,及重排序导致的问题.上一篇也提到共享数据会出现可见性和竞争现象,如果多线程 ...
- 【React】react学习笔记03-React组件对象的三大属性-state
今天晚上学习了React中state的使用,特做此记录,对于学习的方式,博主仍然推荐直接复制完整代码,对着注释观察现象!: 上文中,我列举了两种React自定义组件的声明,这里我拿方式二进行举例: / ...
- java获取Timestamp类型的当前系统时间
java获取取得Timestamp类型的当前系统时间 java获取取得Timestamp类型的当前系统时间 格式:2010-11-04 16:19:42 方法1: Timestamp d = new ...
- Apache配置URL重定向
Apache配置URL重定向 修改/etc/httpd/conf/httpd.conf文件的内容 <Directory "/var/www"> AllowOverrid ...
- mongoshell 执行JavaScript文件获取数据库实例基本信息
由于MongoDB没有关系型数据中强大的数据字典.因此,如果需要汇总统计一些内部信息,包括数据量,基本元信息,集群架构,状态信息.则需要自己写脚本统计.为日后工作方便,本人在此将一些统计信息通过Jav ...
- 2. 2.1查找命令——linux基础增强，Linux命令学习
2.1.查找命令 grep命令 grep 命令是一种强大的文本搜索工具,它能使用正则表达式搜索文本,并 把匹配的行打印出来. 格式: grep [option] pattern [file] 可使用 ...
- 在windowx的Hyper-v 安装CentOS系统
博客写的很少,一方面是因为我觉得目前很多博客都是相互抄袭,或者有很多部分都是重复的内容.而我自己再去写同样的内容的画,有点浪费时间. 所以,如果我要写,我希望是写一些与众不同,或者重复率比较低的内容, ...