el:挂载点
- el 是用来设置 Vue 实例挂载（管理）的元素
- Vue 会管理 el 选项命中的元素及其内部的后代元素
- 可以使用其他的选择器，但是建议使用 ID 选择器
- 可以使用其他的双标签，不能使用 HTML 和 BODY
data:数据对象
- Vue 中用到的数据定义在 data 中
- data 中可以写复杂类型的数据
- 渲染复杂类型数据时，遵守 js 的语法即可
<div id="app">
{{ message }}
</div>
var app = new Vue({
el:"#app",
data:{
message:"嘿嘿嘿",
array:[],
obj:{}
}
})
v-text
- v-text指令的作用是：设置标签的内容（textContext）
- 默认写法会替换掉全部内容，使用差值表达式 {{}} 可以替换指定内容
- 内容支持写表达式
<div id="app">
<h2 v-text="message+'!'"></h2>
<h2>北京{{ message + "!"}}</h2>
</div>
var app = new Vue({
el:"#app",
data:{
message:"哈哈哈"
}
})
v-html
- v-html 指令的作用是：设置元素的innerHTML
- 内容中有 HTML 结构会被解析为标签
- v-text 指令无论内容是什么，只会解析为文本
- 解析文本使用 v-text，需要解析HTML 结构使用 v-html
<div id="app">
<p v-html="context"></p>
</div>
var app = new Vue({
el:"#app",
data:{
context:"<a href='#'>嘿嘿嘿</a>"
}
})
v-on
- v-on 指令的作用是：为元素绑定事件
- 事件名不需要写 on
- 指令可以简写为
@ - 绑定的方法定义在 methods 属性中
- 方法内部通过
this关键字可以访问定义在data中的数据
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hello Vue</title>
</head>
<body>
<!-- 2.HTML结构 -->
<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="双击事件" @dblclick="doIt">
<h2 @click="showIt">打印食物</h2>
<h2 @click="eatFood">{{ food }}</h2>
</div>
<!-- 1.开发环境版本，包含了有帮助的命令行警告-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
//3.创建 Vue示例
var app = new Vue({
el:"#app",
data:{
food:"冰淇淋"
},
methods:{
doIt:function(){
alert("Just do it");
},
showIt:function(){
console.log(this.food);
},
eatFood:function(){
this.food += "好好吃！"
}
}
})
</script>
</body>
</html>
v-on 补充
- 实践绑定的方法写成函数调用的形式，可以传入自定义参数
- 定义方法时需要定义形参来接受传入的实参
- 事件的后面跟上 .修饰符 可以对事件进行限制
- .enter 可以限制触发的按键为回车
- 事件修饰符有多种
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hello Vue</title>
</head>
<body>
<div id="app">
<input type="button" value="点击" @click="doIt('老铁',666)">
<input type="text" @keyup.enter="sayHi">
</div>
<!-- 1.开发环境版本，包含了有帮助的命令行警告-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
var app = new Vue({
el:"#app",
methods:{
doIt:function(p1,p2){
console.log("Just do it ！");
console.log(p1);
console.log(p2);
},
sayHi:function(){
alert("吃饭了没");
}
}
})
</script>
</body>
</html>
计数器
实现步骤：
- data 中定义数据：比如 num
- methods 中添加两个方法：比如add（递增），sub（递减）
- 使用 v-text 将 num 设置给 span 标签
- 使用 v-on 将 add，sub 分别绑定给+，-按钮
- 累加的逻辑：小于10累加，否则提示
- 递减的逻辑：大于0递减，否则提示
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hello Vue</title>
</head>
<body>
<!-- 2.HTML结构 -->
<div id="app">
<!-- 计数器功能区域 -->
<div class="input-num">
<button @click="sub"> - </button>
<span>{{ num }}</span>
<button @click="add"> + </button>
</div>
</div>
<!-- 1.开发环境版本，包含了有帮助的命令行警告-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
//3.创建 Vue示例
var app = new Vue({
el:"#app",
data:{
num:1
},
methods:{
add:function(){
if(this.num < 10){
this.num++;
}else{
alert("别点啦，最大啦！");
}
},
sub:function(){
if(this.num > 0){
this.num--;
}else{
alert("别点啦，最小啦！")
}
}
}
})
</script>
</body>
</html>
v-show
- v-show 指令的作用是：根据真假切换元素的显示状态
- 原理是修改元素的display，实现显示隐藏
- 指令后面的内容，最终都会解析为布尔值
- 值为 true 元素显示，值为 false 元素隐藏
- 数据改变之后，对应元素的显示状态会同步更新
<div id="app">
<img src="地址" v-show="true">
<img src="地址" v-show="isShow">
<img src="地址" v-show="age>=18">
</div>
var app = new Vue({
el:"#app",
data:{
isShow:false,
age:16
}
})
v-if
- v-if 指令的作用是：根据表达式的真假切换元素的显示状态
- 本质是通过操纵 DOM 元素来切换显示状态
- 表达式的值为true，元素存在于 DOM 树中，为 false，从 DOM 树中移除
- 频繁的切换 v-show,反之使用 v-if,前者的切换消耗小
<div id="app">
<p v-if="true">我是一个p标签</p>
<p v-if="isShow">我是一个p标签</p>
<p v-if="表达式">我是一个p标签</p>
</div>
var app = new Vue({
el:"#app",
data:{
isShow:false
}
})
v-bind
- v-bind 指令的作用是：为元素绑定属性
- 完整的写法是 v-bind:属性名
- 简写的话可以直接省略 v-bind，只保留：属性名
<div id="app">
<img v-bind:src="imgSrc">
<img v-bind:title="imgtitle+'!!!'">
<img v-bind:class="isActive?'active':''">
<img v-bind:class="{active:isActive}">
</div>
var app = new Vue({
el:"#app",
data:{
imgSrc:"图片地址",
imgTitle:"这是一张图片"
isActive:false
}
})
图片切换
- 定义图片数组
- 添加图片索引
- 绑定src属性
- 图片切换逻辑
- 显示状态切换
<div id="app">
<img :src="imgArr[index]">
<a href="#" @click="prev" v-show="条件">上一张</a>
<a href="#" @click="next" v-show="条件">下一张</a>
</div>
var app = new Vue({
el:"#app",
data:{
imgArr:[],
index:0
},
methods:{
prev:function(){},
next:function(){}
}
})
v-for
- v-for 指令的作用是：根据数据生成列表结构
- 数组经常喝 v-for 结合使用
- 语法是（item,index) in 数据
- item 和 index 可以结合其他指令一起使用
- 数组长度的更新会同步到页面上，是响应式的
<div id="app">
<ul>
<li v-for="{item,index} in arr":title="item">
{{ index }}{{ item }}
</li>
<li v-for="{item,index} in objArr">
{{ item.name}}
</li>
</ul>
</div>
var app = new Vue({
el:"#app",
data:{
arr:[1,2,3,4,5],
objArr:[
{name:"jack"}
{name:"rose"}
]
}
})