<!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的基本使用(一)的更多相关文章

  1. Vue.js 和 MVVM 小细节

    MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...

  2. wepack+sass+vue 入门教程(三)

    十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...

  3. wepack+sass+vue 入门教程(二)

    六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...

  4. wepack+sass+vue 入门教程(一)

    一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...

  5. Vue + Webpack + Vue-loader 系列教程(2)相关配置篇

    原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ 使用预处理器 在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue- ...

  6. Vue + Webpack + Vue-loader 系列教程(1)功能介绍篇

    原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ Vue-loader 是什么? vue-loader 是一个加载器,能把如下格式的 Vue ...

  7. 关于Vue.js 2.0 的 Vuex 2.0,你需要更新的知识库

    应用结构 实际上,Vuex 在怎么组织你的代码结构上面没有任何限制,相反,它强制规定了一系列高级的原则: 应用级的状态集中放在 store 中. 改变状态的唯一方式是提交mutations,这是个同步 ...

  8. Vue.js 2.0 和 React、Augular等其他框架的全方位对比

    引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那么你就来对了. 客观来说,作为核心团队成员,显然我们会 ...

  9. 窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼?

    引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...

  10. 初探Vue

    Vue.js(读音/vju:/,类似于view),是近来比较火的前端框架,但一直没有怎么具体了解.实现过,就知道个啥的MVVM啦,数据驱动啦,等这些关于Vue的虚概念. 由于最近,小生在公司中,负责开 ...

随机推荐

  1. Qt实现网络播放器

        写了这么多的博客,关于网络的还不算多,经常有人询问一些关于网络传输.制作在线试听及下载音乐.构造及解析数据等的一些问题,今天就在这里一并讲解.   网络操作:     主要涉及:QNetwor ...

  2. 线性表List

    数组array是基本的数据结构,但它的功能有限,线性表list可以认为是扩展了功能的数组.可以自动调整大小.添加和删除元素不需要其他元素移位. 根据指针数量和指向的不同,线性表分为单向链表.双向链表和 ...

  3. 一步一步教你用IntelliJ IDEA 搭建SSM框架(3)——实现用户登录功能

    上面两篇博客已经详细的介绍了在IntelliJ IDEA 搭建SSM框架的整个过程,下面我们就要在搭建好的环境里实现我们想要的功能了.本文完成用户的登录功能,主要包括:用户注册,登录,编辑,退出,注销 ...

  4. VMware克隆CentOS7,解决网络配置问题

    问题: 安装CentOS7 mini版,静态IP配置完毕后,关闭虚机CentOS7-1,克隆虚拟机为CentOS-2.克隆出来的虚拟机使用ifconfig命令,无法发现网卡,只有一个lo设备.虚机无法 ...

  5. Programming In Lua 第四章

    1, 2, 3, 4, 5, 6, 7,

  6. 【Linux】一步一步学Linux——虚拟机简介和系统要求(04)

    目录 00. 目录 01. VMware Workstation Pro15介绍 02. Workstation Pro 的主机系统要求 03. 虚拟机网络连接支持 04. 参考 00. 目录 @ 0 ...

  7. GBDT--原来是这么回事(附代码)

    1. 解释一下GBDT算法的过程 GBDT(Gradient Boosting Decision Tree),全名叫梯度提升决策树,使用的是Boosting的思想. 1.1 Boosting思想 Bo ...

  8. GET,POST,PUT,DELETE,OPTIONS等请求方式简单总结

    之前做的java web项目,基本上只使用get和post的请求方式,但是现在新项目额外增加了put,delete,查了点资料,做个简单的总结. 1.GET-安全且幂等 get请求是用来获取数据的,只 ...

  9. Facebook也炒币吗?Libra币是什么?

    Facebook 在上周发布了加密数字货币,称为 Libra币. 太火爆了,很多人都在关注和讨论,包括一些科技大佬们都很积极的讨论(当然,这里指的是真正的科技大佬,比如 马化腾.王兴等,而不是指哪些割 ...

  10. 对于Spring中AOP,DI,IoC概念的理解

    IOC IoC(inversion of Control),控制反转.就好像敏捷开发和SCRUM一样,不是什么技术,而是一种方法论,一种工程化的思想.使用IoC的思想意味着你将设计好的对象交给容器控制 ...