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的虚概念. 由于最近,小生在公司中,负责开 ...
随机推荐
- QT Udp组播（穿透）
http://blog.csdn.net/victoryknight/article/details/7814243 主题 UDPQt路由器 局域网内的两台机器如果隔有路由器,那么这两台机器之间不 ...
- LFS Linux From Scratch 笔记（经验非教程）
做了一个自己的DIY Linux系统.从编译每一行代码,建立每一个文件系统结构开始. 创造自己的GNU/Linux系统,不同于任何发行版.按照的教程是来自 linuxfromscratch.org 来 ...
- ABP开发框架前后端开发系列---（10）Web API调用类的简化处理
在较早期的随笔<ABP开发框架前后端开发系列---(5)Web API调用类在Winform项目中的使用>已经介绍了Web API调用类的封装处理,虽然这些调用类我们可以使用代码生成工具快 ...
- python trojan development 2nd —— use python to send mail and listen to the key board then combine them
请勿用于非法用途!!!!!本人概不负责!!!原创作品,转载说明出处!!!!! from pynput.keyboard import Key,Listener import logging impor ...
- 短视频技术详解：Android端的短视频开发技术
在 <如何快速实现移动端短视频功能?>中,我们主要介绍了当前短视频的大热趋势以及开发一个短视频应用所涉及到的功能和业务.在本篇文章中,我们主要谈一谈短视频在Android端上的具体实现技术 ...
- Java 泛型学习总结
前言 Java 5 添加了泛型,提供了编译时类型安全检测机制,该机制允许程序员在编译时检测到非法的类型. 泛型的本质是参数化类型,可以为以前处理通用对象的类和方法,指定具体的对象类型.听起来有点抽象, ...
- Java8新特性——lambda表达式.（案例：词频统计）
需求:读入一个文本文件,确定所有单词的使用频率并从高到低排序,打印出所有单词及其频率的排序列表 先用传统方法解: package cn._1.wordfrequency; import java.ut ...
- Redis 学习笔记（篇四）：整数集合和压缩列表
整数集合 Redis 中当一个集合(set)中只包含整数,并且元素不多时,底层使用整数集合实现,否则使用字典实现. 那么: 为什么会出现整数集合呢?都使用字典存储不行吗? 整数集合在 Redis 中的 ...
- React躬行记（6）——事件
React在原生事件的基础上,重新设计了一套跨浏览器的合成事件(SyntheticEvent),在事件传播.注册方式.事件对象等多个方面都做了特别的处理. 一.注册事件 合成事件采用声明式的注册方式, ...
- Quartz每次调度时被执行两次
[关键字:重复执行.重复调用.每次执行两次.执行2次] 前言: 先说一下,项目背景.由于组内某成员在用Maven搭建项目时不规范,导致项目的名称与实际访问项目名称不一致.在部署项目时,必需要配一下虚拟 ...