1、el
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<!--
Vue实例挂载(el)的标签
使用构造函数创建一个vue对象:
这个对象作用与哪一个html标签,是通过el属性来挂载的,常用的有id和class挂载方式:
id挂载:el:"#id"
class挂载:el:".class"
Vue中的数据(data)详解
Vue实例的数据保存在配置属性data中, data自身也是一个对象.
通过Vue实例直接访问和修改data对象中的数据,及时同步的页面上
-->
<div id="myDiv1">
{{msg}}
</div>
<div class="myDiv2">
{{msg}}
<hr />
{{user.name}}今年{{user.age}}性别{{user.sex}}
</div>
<script>
new Vue({
el: "#myDiv1",
data: {msg: "我是id挂载方式"}
})
var x = new Vue({
el: ".myDiv2",
data: {
msg: "我是类加载器方式",
user: {
name: "隔壁老王",
age: "20",
sex: "男"
},
},
})
x.user.name="王哈哈";
</script>
</body>
</html>
2.数值双向绑定
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<!--
v-model="msg":双向绑定数据
v-on:click="clickMe"添加点击事件
-->
<div class="myDiv">
<input type="text" v-model="mssage" v-on:click="click" v->
</div>
<script>
new Vue({
el:".myDiv",
data:{
mssage:"王哈哈"
},
methods:{
click(){
alert(this.mssage);
}
}
})
</script>
</body>
</html>
3.js表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--简单表达式 -->
<h1>{{5+5}}</h1>
<!-- +:运算,字符串连接 -->
<h1>{{5+"v5"}}</h1>
<h1>{{5+"5"}}</h1>
<h1>{{"5"+"5"}}</h1>
<!-- -:减法 -->
<h1>{{"5"-"5"}}</h1>
<h1>{{5-"5"}}</h1>
<h1>{{5*5}}</h1>
<!-- *:乘 -->
<h1>{{"5"*"5"}}</h1>
<h1>{{5*"5"}}</h1>
<!-- / 除-->
<h1>{{"5"/5}}</h1>
<h1>{{"5"/"5"}}</h1>
<h1>{{5/5}}</h1>
</div>
<script>
var app = new Vue({
el:"#app"
});
</script>
</body>
</html>
4.三目表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{show?"正确":"错误"}}
</div>
<script>
var app = new Vue({
el:"#app",
data:{
show:true,
}
});
</script>
</body>
</html>
5.字符串操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<!--
直接使用字符串字面值作为字符串对象
使用data中的字符串对象
-->
<div id="app">
{{"王哈哈"}}<br/>
{{"王哈哈".length}}<br/>
{{message.length}}<br/>
{{message.substring(1,5)}}<br/>
{{message.substring(2,6).toUpperCase()}}<br/>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
message:"王哈哈abc"
}
});
</script>
</body>
</html>
6.对象操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<!--
对象操作
在表达式中可以使用data中定义的对象的各种用法.像使用js对象中的方法和属性一样
-->
<div id="app">
<!--有toString格式所以会自动默认toString格式-->
{{user}}<br/>
<!--转换为json格式-->
{{JSON.stringify(user)}}<br/>
{{user.toString()}}<br/>
{{user.name}}<br/>
{{user.age}}<br/>
{{user.getAge()}}<br/>
</div>
<script>
var user1 = {
name: "王哈哈",
age: 20,
getAge: function () {
return this.age;
},
toString: function () {
return "姓名:" + this.name + ",年龄:" + this.age;
}
};
var app = new Vue({
el: "#app",
data: {
user: user1
}
});
</script>
</body>
</html>
7.数组操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<!--
数组操作
在表达式中可以使用JavaScript数组中的任何语法来操作数组.
-->
<div id="app">
{{hobbys}}<br/>
{{hobbys[0]}}<br/>
{{hobbys.length}}<br/>
{{hobbys.toString()}}<br/>
{{hobbys.join("------")}}<br/>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
hobbys: ["打游戏", "打篮球", '踢足球', "打排球"]
}
});
</script>
</body>
</html>
8.v-text指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<!--
v-text指令
语法:
<标签名 v-text="表达式"></标签名>
作用:
通过data中的数据更新标签标签中的textContent属性的值.(标签中的文本内容)
注意事项:
如果值是html的值,会作为普通的文本使用。
标签中的属性值必须是data中的一个属性.
-->
<div id="app">
<span v-text="message"></span><br/>
<span v-text="user.username"></span><br/>
<span v-text="message2"></span><br/>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
message: "<h1>哈哈哈</h1>",
message2: "哈哈哈",
user: {
username: "王哈哈"
},
}
});
</script>
</body>
</html>
9.v-html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<!--
v-html指令(重点)
语法:
<标签名 v-html="表达式"></标签名>
作用:
通过data中的数据更新标签标签中的innerHTML属性的值.(标签中的HTML内容)
注意事项:
如果值是html的值,不会作为普通的文本使用,要识别html标签。
{{表达式}} 可以插入的标签的内容中
v-text和v-html更改标签中的所有内容
-->
<div id="app">
<div v-html="message1"></div>
<div v-html="message2"></div>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
message1: "<h1>哈哈哈</h1>",
message2: "哈哈哈"
}
});
</script>
</body>
</html>
10.v-for指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<!--
v-for指令(重点)
语法:
<标签 v-for="元素 in 数据源"></标签>
数据源: 数组,
元素: 数组中的一个元素,
数据源: 对象
元素: 对象中的一个属性名
<标签 v-for="(元素,索引|键) in 数据源"></标签>
当数据源是数组时, ()的第二个参数值索引
当数据源是对象时, ()的第二个参数值键
<标签 v-for="(元素,键,索引) in 对象"></标签>
作用:
基于数据源多次循环达到多次渲染当前元素.
-->
<div id="app">
<h1>循环数组</h1>
<ul>
<li v-for="hobby in hobbys">{{hobby}}</li>
</ul>
<h1>遍历对象</h1>
<ul>
<li v-for="value in student">{{value}}</li>
</ul>
<h1>索引循环数组</h1>
<ul>
<li v-for="(index,hobby) in hobbys">{{index}}--{{hobby}}</li>
</ul>
<h1>键值对遍历对象</h1>
<ul>
<li v-for="(index,key,value) in student">{{index}}---{{key}}--{{value}}</li>
</ul>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
hobbys : ["打游戏","打篮球","踢足球","打排球"],
student : {
name: "王哈哈",
age: 20,
sex: "男",
},
}
});
</script>
</body>
</html>
11.v-bind指令
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<!--
v-bind指令(重点)
将data中的数据绑定到标签上,作为标签的属性.
语法:
为一个标签属性绑定一个值
<标签 v-bind:标签属性名字="表达式"></标签>
<img v-bind:src=”msg”>
简写形式:
<标签 :标签属性名字="表达式"></标签>
为一个标签绑定一个对象作为该标签的多个属性
<标签 v-bind="对象"></标签>
注意事项
将一个对象键和值作为标签的属性的名字和值时, 在v-bind后不需要指定属性的名字
-->
<div id="app">
<img v-bind:src="image" v-bind:title = "title"/>
<!--简写方式-->
<img :src="image" :title = "title"/>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
image: "1.gif",
title:"<h1>王哈哈</h1>",
}
});
</script>
</body>
</html>
12.v-model指令
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<!--
v-model 指令(重点)
语法:
<标签 v-model="表达式"></标签>
在表单控件上创建双向绑定
表单的值被修改时, 基于dom监听机制, 就会自动修改data中的数据中,
当data中的数据被修改时,基于数据绑定机制, 自动会把新的内容自动更新到value属性上. 页面视图也发生了改变. 双向绑定
注意事项:
如果单行文本的表单元素被绑定一个数据时, 该表单的默认值不是value属性决定而是有data中的数据决定.
绑定在复选框上数据必须是一个数组, 当绑定的数据和复选框的value值一致时会自动选中-回显
v-model只作用于以下表单:
input select textarea
data中的值是Value的属性值
-->
<div id="app">
<h1>绑定到type=text的input表单元素</h1>
姓名:<input type="text" v-model="inputValue"><br/>
data中的值:{{inputValue}}
<h1>绑定到type=checkbox的input表单元素</h1>
打篮球:<input type="checkbox" v-model="checkboxValue" value="打篮球"><br/>
踢足球:<input type="checkbox" v-model="checkboxValue" value="踢足球"><br/>
data中的值:{{checkboxValue}}
<h1>绑定到type=radio的input表单元素</h1>
打篮球:<input type="radio" v-model="radioValue" value="打篮球"><br/>
踢足球:<input type="radio" v-model="radioValue" value="踢足球"><br/>
data中的值:{{radioValue}}
<h1>绑定到textarea的元素</h1>
个人简介:<textarea v-model="textareaValue"></textarea><br/>
data中的值:{{textareaValue}}
<h1>绑定到单选的select的元素</h1>
技能:<select v-model="skill">
<option value="java">java</option>
<option value="php">php</option>
<option value="python">python</option>
</select><br/>
data中的值:{{skill}}
</div>
<script>
var app = new Vue({
el: "#app",
data: {
inputValue: "初始化的值",
checkboxValue: ["踢足球"],
radioValue: "打篮球",
textareaValue: "王哈哈!!!",
skill: "php",
}
});
</script>
</body>
</html>
13.v-show指令
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<!--
v-show指令
语法:
<标签名 v-show="表达式"></标签名>
作用:
根据表达式之真假值,切换元素的 display CSS 属性。当条件变化时该指令触发过渡效果。
当v-show的值为假时, 会在标签的css中添加 display: none :
注意事项:
当表达式中的值是false时, 该标签仅仅是被隐藏了,而没有被从页面上删除
标签的值会自动转换为boolean类型的值
-->
<div id="app">
<div v-show="show">1</div>
<div v-show="score>=90">优秀</div>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
"show":true,
"score":90,
}
});
</script>
</body>
</html>
14.v-if指令
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<!--
v-if指令
语法:
<标签名 v-if="表达式"></标签名>
作用:
根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。
注意事项:
当表达式中的值是false时, 是从页面上删除.
标签的值会自动转换为boolean类型的值
v-if指令将页面中的样式删除掉
-->
<div id="app">
<div v-if="show">你看到我了!</div>
<div v-if="hidden">你看不到我了!</div>
<div v-if="score>=90">优秀</div>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
"show":false,
"hidden":false,
"score":89,
}
});
</script>
</body>
</html>
15.v-else指令
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<!--
v-else指令
语法:
<标签名 v-if="表达式"></标签名>
<标签名 v-else></标签名>
作用:
当v-if表达式不成立时, v-else执行.
注意事项:
该指令必须也v-if搭配起来使用.
v-else是一个单独的属性, 该属性是不要赋值的.
-->
<div id="app">
<div v-if="a">王哈哈!!!</div>
<div v-else>王嘻嘻!!!</div>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
a: true
}
});
</script>
</body>
</html>
16.v-else-if指令
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<!--
v-else-if指令
语法:
<标签名 v-if="表达式"></标签名>
<标签名 v-else-if="表达式"></标签名>
<标签名 v-else-if="表达式"></标签名>
<标签名 v-else></标签名>
-->
<div id="app">
<div v-if="score>=90">优秀!!</div>
<div v-else-if="score>=60">良好!!</div>
<div v-else="score<60">不及格!!</div>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
score:100
}
});
</script>
</body>
</html>