Vue 渐进式JavaScript框架 官网：https://cn.vuejs.org/
第一章 - Vue基础
第二章 - 本地应用
第三章 - 网络应用
第四章 - 综合应用
第二章 本地应用(1/12) v-text指令
1、v-text指令的作用是：设置标签的内容(textContent)
2、默认写法会替换全部内容，使用差值表达式{{}}可以替换指定内容
3、内部支持写表达式
<body>
<div id="app">
<h2 v-text="message + '!' "></h2>
<h2> {{ message + "!"}} </h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
message:" 你好 小黑 ",
}
})
</script>
</body>
第二章 本地应用(2/12) v-html指令
1、v-html指令的作用是：设置元素的innerHTML
2、内容中有html结构会被解析为标签
3、v-text指令无论内容是什么，只会解析为文本
4、解析文本使用v-text，需要解析html结构使用v-html
<body>
<div id="app">
<h2 v-text="content + '将a标签打印到网页'"></h2>
<h2 v-html="content + '解析成链接'"></h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
content:"<a href='http://www.baidu.com'>百度</a>"
}
})
</script>
</body>
第二章 本地应用(3/12) v-on指令
1、v-on指令的作用是：为元素绑定事件
2、事件名不需要写on
3、指令可以简写为@
4、绑定的方法定义在methods属性中
5、方法内部通过this关键字可以访问定义在data中的数据
<body>
<div id="app">
<input type="button" value="v-on事件" v-on:click="doIt">
<input type="button" value="v-on简写" @click="doIt">
<input type="button" value="v-on双击" @dblclick="doIt">
<h2 @click="changeMessage"> {{ message }} </h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
message:"测试通过this关键字获取数据"
},
methods:{
doIt:function(){
alert('v-on点击事件');
},
changeMessage:function(){
this.message = "修改后的数据";
}
}
})
</script>
</body>
第二章 本地应用(4/12) 计算器案例
1、创建Vue示例时:el(挂载点)，data(数据)，methods(方法)
2、v-on指令的作用是绑定事件，简写为@
3、方法中通过this关键字获取data中的数据
4、v-text指令的作用是：设置元素的文本值，简写为{{}}
5、v-html指令的作用是：设置元素的innerHTML
<body>
<div id="app">
<button @click="sub">-</button>
<span> {{ num }} </span>
<button @click="add">+</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
num:1
},
methods:{
sub:function(){
if(this.num>0){
this.num--;
}else{
alert('已经小于0了');
}
},
add:function(){
if(this.num<10){
this.num++;
}else{
alert('已经大于10了');
}
}
}
})
</script>
</body>
第二章 本地应用(5/12) v-show指令
1、v-show指令的作用是：根据真假切换元素的显示状态
2、原理是修改元素的display，实现显示隐藏
3、指令后面的内容，最终都会解析为布尔值
4、值为true元素显示，值为false元素隐藏
5、数据改变之后，对应元素的显示状态会同步更新
<body>
<div id="app">
<button @click="changeIsShow">显示隐藏</button>
<div v-show="isShow">显示隐藏</div>
<button @click="sub">num减减 直至隐藏模块</button>
<div v-show="num>18">v-show指令支持表达式</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
isShow:true,
num:25
},
methods:{
changeIsShow:function(){
this.isShow = !this.isShow
},
sub:function(){
this.num--;
}
}
})
</script>
</body>
第二章 本地应用(6/12) v-if指令
1、v-if指令的作用是：根据表达式的真假切换元素的显示状态
2、本质是通过操纵dom元素来切换显示状态
3、表达式的值为true，元素存在于dom树中，为false，从dom树中移除
4、频繁的切换v-show，反之使用v-if，前者到的切换消耗小
<body>
<div id="app">
<input type="button" value="测试v_if" @click="toggleIsShow">
<p v-show="isShow">v-show指令</p>
<p v-if="isShow">v-if指令</p>
<p v-if="num>40">v-if指令内部可以追加判断</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
isShow:false,
num:50
},
methods:{
toggleIsShow:function(){
this.isShow = !this.isShow;
}
}
})
</script>
</body>
第二章 本地应用(7/12) v-bind指令
1、v-bind指令的作用是:为元素绑定属性
2、完整写法是v-bind:属性名
3、简写的话可以直接省略v-bind,只保留:属性名
4、需要动态的增删class建议使用对象的方式
<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>
<style>
.active {
border: 1px solid red;
}
</style>
</head>
<body>
<div id="app">
<img v-bind:src="imgSrc" alt="普通写法"> <br>
<img :src="imgSrc" alt="测试简写" :title="imgTitle"> <br>
<img :src="imgSrc" alt="测试calss" :class="{active:isActive}" @click="changeActive">
</div>
<!-- 开发环境版本，包含了有帮助命令行的警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
imgSrc:"C:\\Users\\Administrator\\Desktop\\Vue学习之路.jpg",
imgTitle:"鼠标放上去显示图片说明",
isActive:false
},
methods:{
changeActive:function(){
this.isActive = !this.isActive;
}
}
})
</script>
</body>
第二章 本地应用(8/12) 图片切换
1、列表数据使用数组保存
2、v-bind指令可以设置元素属性，比如src
3、v-show和v-if都可以切换元素的显示状态，频繁切换用v-show
<body>
<div id="app">
<input type="button" value=" <<<<< " @click="prev" v-show="index !=0 ">
<img :src="imgArr[index]" alt="">
<input type="button" value=" >>>>> " @click="next" v-show ="index < imgArr.length-1">
</div>
<!-- 开发环境版本，包含了有帮助命令行的警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
imgArr:["aaaa.jpg","bbbb.jpg","cccc.jpg","dddd.jpg","eeee.jpg"],
index:0
},
methods:{
prev:function(){
this.index--;
},
next:function(){
this.index++;
}
}
})
</script>
</body>
第二章 本地应用(9/12) v-for指令
1、v-for指令的作用是：根据数据生产列表的结构
2、数组经常和v-for结合使用
3、语法是(item,index) in 数据
4、item和index可以结合其他指令一起使用
5、数组长度的更新会同步到页面上，是响应式的
<body>
<ul id="app">
<input type="button" value="增加数据" @click="add">
<input type="button" value="增加数据" @click="remove">
<li v-for="(item,index) in arr">
item代表数据 index代表索引 ：{{index+1}} {{ item }}
</li>
<h2 v-for="(item,index) in school">
{{ item.class }}
</h2>
</ul>
<!-- 开发环境版本，包含了有帮助命令行的警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
arr:["铁手","追命","无情","冷血"],
school:[
{class:"一年级"},
{class:"二年级"}
]
},
methods:{
add:function(){
this.school.push({class:"三年级"});
},
remove:function(){
this.school.shift();
}
}
})
</script>
</body>
第二章 本地应用(10/12) v-on补充
1、事件绑定的方法写成函数调用的形式，可以传入自定义参数
2、定义方法时需要定义形参来接收传入的实参
3、事件的后面跟上.修饰符可以对事件进行限制
4、.enter可以限制触发的按键为回车
5、事件修饰符有多种（官网Api）
<body>
<div id="app">
<input type="button" value="点击" @click="doIt(123,'老铁666')">
<input type="text" @keyup.enter="sayHi">
</div>
<!-- 开发环境版本，包含了有帮助命令行的警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
methods:{
doIt:function(p1,p2){
console.log(p1+"---"+p2);
},
sayHi:function(){
console.log("按下回车触发");
}
}
})
</script>
</body>
第二章 本地应用(11/12) v-model指令
1、v-model指令的作用是便捷的设置和获取表单元素的值
2、绑定的数据会和表单元素值相关联
3、绑定的数据 ← → 表单元素的值
<body>
<div id="app">
<input type="button" value="设置message信息" @click="setMessage">
<input type="text" v-model="message" @keyup.enter="getMessage">
<p> {{ message }} </p>
</div>
<!-- 开发环境版本，包含了有帮助命令行的警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
message:"v_model双向绑定"
},
methods:{
getMessage:function(){
alert(this.message);
},
setMessage:function(){
this.message="设置message数据";
}
}
})
</script>
</body>
第二章 本地应用(12/12) 小黑记事本案例
1、新增：v-for指令、v-model指令、v-on指令
2、删除：list.splice(index,1) 后面1代表删除一个元素
3、统计：数组的长度
4、清空：清空数组
5、隐藏：使用v-if和v-show隐藏统计和清空模块
<body>
<!-- 主题区域 -->
<section id="app">
<!-- 输入框 -->
<header>
<input type="text" placeholder="请输入任务" v-model="inputValue" @keyup.enter="add">
</header>
<!-- 列表区域 -->
<section>
<ul>
<li v-for="(item , index) in list">
{{ index + 1}}. {{ item }}
<input type="button" value=" X " @click="remove(index)">
</li>
</ul>
</section>
<!-- 统计和清空 -->
<footer>
<span v-if="list.length != 0"> <strong> {{ list.length }} </strong>条信息 </span>
<input type="button" value="清空内容" @click="clear" v-show = "list.length != 0">
</footer>
</section>
<!-- 底部 -->
<footer>
</footer>
<!-- 开发环境版本，包含了有帮助命令行的警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
list:["河北省","河南省","浙江省","陕西省"],
inputValue:"山西省"
},
methods:{
add:function(){
this.list.push(this.inputValue);
},
remove:function(index){
this.list.splice(index,1);
},
clear:function(){
this.list = [];
}
}
})
</script>
</body>