Vue快速入门
vue
.js文件准备好
新建js文件复制
vue快速入门
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue快速入门title>
<script src="Vue.js">script>
head>
<body >
<div id="app">
<input type="text" v-model="message">
{{message}}//差值表达式 内容可以是:变量 三元运算符 函数调用 算术运算
div>
body>
<script>
new Vue(
{
el:"#app",
data:{
message:"hello"
}
}
)
script>
html>
Vue指令 v-bind和v-model
<html lang="en" >
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue指令 v-bind和v-modeltitle>
<script src="Vue.js">script>
head>
<body >
<div id="app">
<a v-bind:href="url">链接1a>
<a :href="url">链接2a> //v-bind 为HTML标签绑定属性值，如href css 可以省略
<input type="text" v-model="url"> //v-model在表单元素上创建双向数据绑定 绑定的url必须要在数据模型中定义
div>
body>
<script>
new Vue(
{
el:"#app",
data:{
url:'https://www.baidu.com'
}
}
)
script>
html>
vue指令 v-on
<html lang="en" >
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue指令 v-ontitle>
<script src="Vue.js">script>
head>
<body >
<div id="app">
<input type="button" value="点我" v-on:click="handle()">
<input type="button" value="点我" @click="handle()">
div>
body>
<script>
new Vue(
{
el:"#app",
data:{
},
methods:{
handle:function () {
alert("莫挨老子")
}
}
}
)
script>
html>
vue指令v-if v-show
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue指令v-if v-showtitle>
<script src="Vue.js">script>
head>
<body >
//v-if 条件性的渲染某种元素，条件成立则渲染
//v-show 根据条件渲染元素，只是display属性值不同
<div id="app">
年龄<input type="text" v-model="age">是:
<span v-if="age<=18">小鲜肉span>
<span v-else-if="age>18 && age<35">老腊肉span>
<span v-else>半截入土span>
<br><br><br>
年龄<input type="text" v-model="age">是:
<span v-show="age<=18">小鲜肉span>
<span v-show="age>18 && age<35">老腊肉span>
<span v-show=" age>=35">半截入土span>
div>
body>
<script>
new Vue(
{
el:"#app",//vue接管区域
data:{
age:20,
}
}
)
script>
html>
vue指令 v-for
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue指令 v-fortitle>
<script src="Vue.js">script>
head>
<body >
<div id="app">
<div v-for="(array,index) in arrays">{{index+1}}:{{array}}div>
div>
body>
<script>
new Vue(
{
el:"#app",//vue接管区域
data:{
arrays:["牛","鬼",'蛇','神','魔']
}
}
)
script>
html>
vue表格的渲染
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue表格的渲染title>
<script src="Vue.js">script>
head>
<body >
<div id="app">
<table border="1" cellspacing="0" width="60%">
<tr>
<th>编号th>
<th>姓名th>
<th>年龄th>
<th>性别th>
<th>成绩th>
<th>等级th>
tr>
<tr align="center" v-for="(user,index) in users">
<td>{{index+1}}td>
<td>{{user.name}}td>
<td>{{user.age}}td>
<td>
<span v-if="user.gender=== 1">男span>
<span v-if="user.gender=== 2">女span>
td>
<td>{{user.score}}td>
<td>
<span v-if="user.score>=85">优秀span>
<span v-else-if="user.score>=60">及格span>
<span style="color: red" v-else>不及格span>
td>
tr>
table>
div>
body>
<script>
new Vue(
{
el:"#app",//vue接管区域
data:{
users:[{
name:"Tom",
age:20,
gender:1,
score:78
},{
name:"Rose",
age:18,
gender:2,
score:86
},{
name:"Jerry",
age:26,
gender:1,
score:90
},{
name:"Tony",
age:30,
gender:1,
score:52
}]
}
}
)
script>
html>