目录
一：vue概念
二： 怎么使用vue.js
三：入门小demo
四： Vue常用指令
1. v-text指令：
2. v-html指令
3. v-on指令
4.v-show指令
5. v-if 指令
6. v-bind指令
7. v-for指令
一：vue概念
VUE 是iOS和Android平台上的一款手机视频拍摄与美化工具，允许用户通过简单的操作实现视频的拍摄、导入视频的剪辑、表现力的细调、改变滤镜、加贴纸和背景音乐等功能，轻松在手机上拍出电影大片的质感，实时记录与分享
二： 怎么使用vue.js
1）在html页面使用script引入vue.js的库即可使用。
2）使用Npm管理依赖，使用webpack打包工具对vue.js应用打包。
大型应用推荐此方案。
3）Vue-CLI脚手架
使用 vue.js官方提供的CLI脚本架很方便去创建vue.js工程雏形。
小案例：Vue.js实现hello world
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!--插值表达式，绑定vue中的data数据-->
{{message}}
</div>
<script src="vue.min.js"></script>
<script>
//1、创建一个vue对象
new Vue({
el: '#app',//2、绑定vue作用的范围
data: {//3、定义页面中显示的模型数据
message: 'hello vue!'
}
})
</script>
</body>
</html>
三：入门小demo
首先创建一个目录，把vue的库vue.min.js放到该目录下，然后创建一个HTML页面:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue.js测试程序</title>
<script src="vue.min.js"></script><!--导入vue.js类库-->
</head>
<body>
<!--body体里面的内容是MVVM中view视图部分的内容-->
<div id="app">
{{name}}
</div>
</body>
<script>
//script里面编写MVVM中model和viewmodel中的内容
var VM = new Vue({
el:'#app',//vm接管了app区域的管理
data:{//model数据
name:'好好学习,天天向上!'
}
})
</script>
</html>
四： Vue常用指令
根据官网的介绍，指令是带有v-前缀的特殊属性。通过指令来操作DOM元素
1. v-text指令：
作用：获取data数据，设置标签的内容。
注意：默认写法会替换全部内容，使用插值表达式{{}}可以替换指定内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- v-text 获取data数据,设置标签内容,会覆盖之前的内容体-->
<h2 v-text="msg">天天好心情</h2>
<!-- 使用插值表达式，不会覆盖 -->
<h2>阿红:{{msg}}</h2>
<!-- 拼接字符串 -->
<h2 v-text="msg+1"></h2>
<h2 v-text="msg+'abc' "></h2>
</div>
</body>
<script>
var obj = new Vue({
el: "#app",
data: {
"msg": "学习vue的第一天！"
}
});
</script>
</html>
2. v-html指令
作用：设置元素的innerHTML（可以向元素中写入新的标签）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 普通获取文本 -->
<h2>{{msg}}</h2>
<h2 v-html="msg"></h2>
<!-- 设置元素的innerHTML -->
<!-- v-text只能获取该值 -->
<h2 v-text="url"></h2>
<!-- v-html内联html标签 -->
<h2 v-html="url"></h2>
</div>
</body>
<script>
var obj = new Vue({
el: "#app",
data:{
"msg": "java程序员",
"url": "<a href='https://www.baidu'>百度一下</a>",
} ,
})
</script>
</html>
3. v-on指令
作用：为元素绑定事件，比如：v-on:click，可以简写为@click=“方法名”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 使用v-on 绑定click点击事件 -->
<input type="button" value="点击按钮" v-on:click="show1" />
<!--简写方式： 使用@符号也可以绑定 -->
<input type="button" value="点击按钮2" @click="show2" />
<!-- 双击事件 -->
<input type="button" value="双击事件" @dblclick="show3" />
<h2>{{food}}</h2>
</div>
</body>
<script>
var obj = new Vue({
el:"#app",
data: {
"food": "麻婆豆腐",
},
methods: {
show1:function() {
alert("今天不学习，明天变垃圾！");
},
show2:function(){
alert("天天好心情");
},
show3:function(){
console.log(this.food);
this.food += "真好吃";
},
},
});
</script>
</html>
4.v-show指令
作用：v-show指令，根据真假值，切换元素的显示状态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app" >
<input type="button" value="切换" @click="change" />
<img v-show="flag" src="../img/car.gif">
</div>
</body>
<script>
var obj = new Vue({
el: "#app",
data: {
flag: true,
},
methods:{
change:function(){
this.flag = !this.flag;
},
}
});
</script>
</html>
5. v-if 指令
作用：根据表达式的真假，切换元素的显示和隐藏（操纵dom元素）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="切换" v-on:click="changeShow" />
<img v-if="isShow" src="../img/car.gif"/>
</div>
</body>
<script>
var obj = new Vue({
el: "#app",
data: {
isShow: true,
},
methods:{
changeShow: function(){
this.isShow = !this.isShow;
},
}
});
</script>
</html>
6. v-bind指令
作用：设置元素的属性（比如：src,title,class）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js" ></script>
</head>
<body>
<div id="app">
<img src="../img/lagou.jpg" />
<!-- 使用v-bind设置src属性值 -->
<img v-bind:src="imgSrc" alt="" />
<!-- 简写 设置title -->
<img :src="imgSrc" :title="imgTitle" />
<!-- 设置class -->
<div :style="{fontSize: size + 'px'}">v-bind指令</div>
</div>
</body>
<script>
var obj = new Vue({
el: "#app",
data: {
imgSrc: "../img/lagou.jpg",
imgTitle: "我好看吗",
size: 50,
},
});
</script>
</html>
7. v-for指令
作用：根据数据生成列表结构，相当于java里的for循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="增加人员信息" v-on:click="add" />
<input type="button" value="删除人员信息" v-on:click="remove" />
<h2 v-for="item in city">城市:{{item}}</h2>
<h2 v-for="(item,index) in city">序号:{{index}} 城市:{{item}}</h2>
<ul>
<li v-for="(item,index) in people">{{index}}编号：{{item.num}}姓名：{{item.name}}年龄：{{item.age}}</li>
</ul>
</div>
</body>
<script>
var obj = new Vue({
el: "#app",
data: {
city: ["上海", "北京", "贵州"],
people: [
{ num: "007", name: "小李飞刀", age: "22" },
{ num: "003", name: "马艳三", age: "18" },
{ num: "010", name: "王菲", age: "33" },
],
},
methods: {
add:function(){
//push 添加
this.people.push({ num: "001", name: "马云", age: "52" })
},
remove:function(){
this.people.shift();//从第一个元素开始删除
}
}
});
</script>
</html>
更多推荐
Vue基础知识总结 1：菜鸟入门
发布评论