Vue学习-01.基础数据绑定
1. html 页面代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<div>
名字<input type="text" v-model="name">
<span v-show="name">你的名字是: {{name}}</span>
</div>
<div>
年龄<input type="text" v-model="age">
<span v-show="age">你的年龄是: {{age}}</span>
</div>
<div>
性别<input type="text" v-model="sex">
<span v-show="sex" >你的性别是: {{sex}}</span>
</div>
</div>
<script src="../lib/vue.js"></script>
<script src="js/01.js"></script>
</body>
</html>
2. js代码
var app = new Vue({
el: '#app' , //作用在id为app 的组件
data: {
name: null,
age: null,
sex: null
}
});
3. 效果图
Vue学习-02.v-for指令(数据迭代)
1. html 页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2>v-for迭代指令</h2>
<ul>
<li v-for="food in foodList">{{food.name}}:¥{{food.discount ? food.price * food.discount : food.price}}</li>
</ul>
</div>
<script src="../lib/vue.js"></script>
<script src="js/01.js"></script>
</body>
</html>
2.js 代码
var app = new Vue({
el: '#app' , //作用在id为app 的组件
data: {
foodList: [
{
name: '葱',
price: 10,
discount: .2,
},
{
name: '姜',
price: 12,
discount: .5,
},
{
name: '蒜',
price: 5
}
]
}
});
3. 效果图
Vue学习-03.v-bind指令(属性)
1. html 页面
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2>v-bind</h2>
<!--v-bind可以省略-->
<a v-bind:href="url">点我</a>
<a :href="url" :class="">点我</a>
</div>
<script src="../lib/vue.js"></script>
<script src="js/01.js"></script>
</body>
</html>
2. js 内容
var app = new Vue({
el: '#app' , //作用在id为app 的组件
data: {
url: "http://www.baidu.com"
}
});
3. 效果
点击跳转百度
Vue学习-04.v-on指令(事件)
1. html 页面
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2>v-on</h2>
<!--mouseenter 获取焦点-->
<!--mouseleave 失去焦点-->
<button v-on="{mouseenter: onEnter, mouseleave: onOut}" v-on:click="onClick(1)">点我</button>
<!--submit.prevent 无刷新提交表单-->
<!--v-on: 可以替换为 @-->
<form @submit.prevent="onSubmit()" @keyup.enter="onKeyUp">
<input type="text">
<input type="submit" value="提交">
</form>
</div>
<script src="../lib/vue.js"></script>
<script src="js/01.js"></script>
</body>
</html>
2. js 内容
var app = new Vue({
el: '#app' , //作用在id为app 的组件
data: { //定义数据
},
methods:{ //定义方法
onClick: function (data) {
console.log("click"+data);
},
onEnter: function () {
console.log("enter")
},
onOut:function () {
console.log("out")
},
onSubmit:function () {
console.log("out")
},
onKeyUp:function () {
console.log("表单提交")
}
}
});
3. 效果图
Vue学习-05.v-model指令及其修饰符(重点)
1. html 页面
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2>v-model</h2>
<!--v-model.lazy 失去焦点时更新-->
<!--v-model.trim 去前后空格-->
名称:<input type="text" v-model.trim="name">
<pre>名称是:{{name}}</pre>
<!--v-model.number 自动转换为number 类型-->
价格:<input type="text" v-model.number="price">
<pre>价格是:{{price}}</pre>
</div>
<script src="../lib/vue.js"></script>
<script src="js/01.js"></script>
</body>
</html>
2. js 内容
var app = new Vue({
el: '#app' , //作用在id为app 的组件
data: { //定义数据
name: "洋葱",
price: null,
},
});
3. 效果图
Vue学习-06. v-model在其他元素及类型上的用法
1. html 页面
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2>v-model</h2>
<!--单选框-->
<div>
<label>
男<input type="radio" v-model="sex" value="male">
</label>
<label>
女<input type="radio" v-model="sex" value="female">
</label>
<br>
性别是{{sex}}
</div>
<br>
<!--多选框-->
<div>
<label>
科目一<input type="checkbox" v-model="project" value="one">
</label>
<label>
科目二<input type="checkbox" v-model="project" value="two">
</label>
<br>
科目是{{project}}
</div>
<!--文本框 textarea 与 imput text 无区别-->
<!-- 下拉列表 -->
<br>
<div>
<div>你来自哪里? {{from}}</div>
<select v-model="from">
<option value="1">北京</option>
<option value="2">上海</option>
</select>
</div>
<br>
<div>
<div>你要去哪里? {{go}}</div>
<select v-model="go" multiple="multiple">
<option value="1">北京</option>
<option value="2">上海</option>
</select>
</div>
</div>
<script src="../lib/vue.js"></script>
<script src="js/01.js"></script>
</body>
</html>
2. js 内容
var app = new Vue({
el: '#app' , //作用在id为app 的组件
data: { //定义数据
sex: "female",
project: ["two"],
from: 2,
go: []
},
});
3. 效果图
Vue学习-07.控制流指令
1. html 页面
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<div v-if="role == 'admin' || role=='super_admin'">
管理员你好
</div>
<div v-else-if="role == 'hr'">
hr你好,代查看简历列表:<br> ...
</div>
<div v-else>
你没有权限访问此页面
</div>
</div>
<script src="../lib/vue.js"></script>
<script src="js/01.js"></script>
</body>
</html>
2. js 内容
var app = new Vue({
el: '#app' , //作用在id为app 的组件
data: { //定义数据
role: "super_admin", //改变参数有不同效果
},
});
Vue学习-08.计算属性
1. html 页面
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<table border="1">
<thead>
<th>学科</th>
<th>分数</th>
</thead>
<tbody>
<tr>
<td>数学</td>
<td><input v-model.number="math"></td>
</tr>
<tr>
<td>物理</td>
<td><input v-model.number="physics"></td>
</tr>
<tr>
<td>英语</td>
<td><input v-model.number="english"></td>
</tr>
<tr>
<td>总分</td>
<td>{{sum}}</td>
</tr>
<tr>
<td>平均分</td>
<td>{{avg}}</td>
</tr>
</tbody>
</table>
</div>
<script src="../lib/vue.js"></script>
<script src="js/01.js"></script>
</body>
</html>
2. js 内容
var app = new Vue({
el: '#app' , //作用在id为app 的组件
data: { //定义数据
math: 79,
physics: 98,
english: 88,
},
computed: { //计算属性
sum: function () {
return this.math + this.physics + this.english;
},
avg:function () {
return Math.round(this.sum / 3);
}
}
});
3. 效果图
Vue学习-09.全局及局部组件
1. html 页面
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="seg1">
<alert></alert>
</div>
<div id="seg2">
<alert></alert>
</div>
<script src="../lib/vue.js"></script>
<script src="js/01.js"></script>
</body>
</html>
2. js 内容
var alert_component = {
template: '<button @click="on_click">弹弹弹</button>',
methods: {
on_click: function () {
alert("弹弹弹")
}
}
}
new Vue({
el: "#seg1",
components : {
alert: alert_component,
}
})
3. 效果图
Vue学习-10.配置组件
1. html 页面
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.liked{
background-color: cyan;
}
</style>
</head>
<body>
<div id="app">
<like></like>
</div>
<template id="like-component-tpl">
<button :class="{liked: liked}" @click="toggle_like()">
~\(≧▽≦)/~{{like_count}}
</button>
</template>
<script src="../lib/vue.js"></script>
<script src="js/01.js"></script>
</body>
</html>
2. js 内容
var like_component = {
template: '#like-component-tpl', //模板对应id
data: function () {
return{
like_count: 10,
liked: false,
}
},
methods:{
toggle_like: function () {
if(!this.liked)
this.like_count ++;
else
this.like_count --;
this.liked = !this.liked;
}
}
}
new Vue({
el: "#app",
components : {
like: like_component,
}
})
3. 效果图
Vue学习-11.父子通信
1. html 页面
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<user username="www"></user>
</div>
<script src="../lib/vue.js"></script>
<script src="js/01.js"></script>
</body>
</html>
2. js 内容
var user_component = {
template: '<a :href="\'/user/\'+ username">{{username}}</a>',
props: ['username'],
methods: {
}
}
new Vue({
el: "#app",
components : {
user: user_component,
}
})
3. 效果图
Vue学习-12.子父通信
1. html 页面
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<balance></balance>
</div>
<script src="../lib/vue.js"></script>
<script src="js/01.js"></script>
</body>
</html>
2. js 内容
Vue.component('balance', {
template: '<div><show @show-balance="show_balance"></show>' +
'<div v-if="show">您的余额$33</div>' +
'</div>',
methods:{
show_balance: function (data) {
//打印传递的数据
console.log(data);
this.show = true;
}
},
data: function () {
return{
show : false,
}
}
});
Vue.component('show', {
template: '<button @click="on_click()">显示余额</button>',
methods: {
on_click: function () {
//自定义触发事件
this.$emit('show-balance', {a:1,b:2});
}
}
});
new Vue({
el: "#app",
})