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-model</title>
<script src="Vue.js"></script>
</head>
<body >
<div id="app">
<a v-bind:href="url">链接1</a>
<a :href="url">链接2</a> //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-on</title>
<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-show</title>
<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-for</title>
<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>