記事ディレクトリ
Vue の基本的な使用方法に慣れるために、いくつかの単純な小さなケースを使用します。
こんにちはビュー
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HelloVue</title>
</head>
<body>
<!--
Staticfile CDN（国内） : https://cdn.staticfile.org/vue/2.2.2/vue.min.js
unpkg：https://unpkg.com/[email protected]/dist/vue.min.js。
cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js
-->
<div>
<h1>{
{info}}</h1>
</div>
<!--引入Vue框架文件-->
<!--
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
-->
<script src="vue.min.js"></script>
<script>
let v = new Vue({
el:"div",
data:{
info:"Hello VUE!"
}
});
setTimeout(function (){
v.info="值改变了";
}, 3000)
</script>
</body>
</html>
Vue テキスト ディレクティブ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>VUE指令</title>
</head>
<body>
<div>
<!--插值, 不依赖于标签,即使没有标签也能和变量进行绑定-->
{
{info}}
<p>{
{info}}</p>
<!--让元素的文本内容和变量进行绑定-->
<p v-text="info"></p>
<!--让元素的标签内容和变量进行绑定-->
<p v-html="info"></p>
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
let v = new Vue({
el:"div",
data:{
info:"文本相关<b>加粗</b>"
}
})
</script>
</body>
</html>
Vue プロパティ バインディング
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性绑定</title>
</head>
<body>
<div>
<a v-bind:href="url">超链接1</a>
<!--省略v-bind是简写-->
<a :href="url">超链接2</a>
<img :src="imgUrl" alt="" width="150px">
<input type="text" :value="info">
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
let v = new Vue({
el:"div",
data:{
url:"http://www.baidu.com",
imgUrl:"../touxiang.png",
info:"测试文本内容"
}
})
setTimeout(function (){
v.url = "http://www.youku.com";
v.imgUrl = "b.jpg";
v.info = "值改变了";
}, 3000);
</script>
</body>
</html>
Vue 双方向バインディング
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双向绑定</title>
</head>
<body>
<div>
<input type="text" v-model="info">
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
let v = new Vue({
el:"div",
data:{
info:"双向绑定"
}
})
setTimeout(function () {
alert("用户输入的是:"+v.info)
},3000);
</script>
</body>
</html>
Vue イベント バインディング
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件绑定</title>
</head>
<body>
<div>
<input type="text" v-model="info">
<!--v-on:事件名="方法名" 事件绑定-->
<input type="button" value="按钮1" v-on:click="f">
<!--简写-->
<input type="button" value="按钮2" @click="f()">
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
let v = new Vue({
el:"div",
data:{
info:""
},
methods:{
f(){
alert(v.info)
}
}
})
</script>
</body>
</html>
Vueは数字を推測します
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue猜数字</title>
</head>
<body>
<div>
<input type="text" v-model="num" placeholder="请输入1-100之间的整数">
<input type="button" value="猜一猜" @click="diy()">
<div>
结果: {
{result}}
</div>
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
//生成1-100的整数
let x = parseInt(Math.random()*100)+1;
let v = new Vue({
el:"body>div",
data:{
result:"还未点击",
num:""
},
methods:{
diy(){
//判断用户输入的值和x的关系
if (v.num > x){
v.result="猜大了";
}else if (v.num < x){
v.result = "猜小了";
}else{
v.result="恭喜你猜对了!"
}
}
}
})
</script>
</body>
</html>
Vue シンプル電卓
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue计算器</title>
</head>
<body>
<div>
<input type="text" v-model="n1">
<input type="text" v-model="n2">
<input type="button" value="加" @click="f(1)">
<input type="button" value="减" @click="f(2)">
<input type="button" value="乘" @click="f(3)">
<input type="button" value="除" @click="f(4)">
<div>结果: {
{result}}</div>
</div>
<!--引入Vue框架-->
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
let v = new Vue({
el:"body>div",
data:{
result:"",
n1:"",
n2:""
},
methods:{
f(x){
switch (x){
case 1://加
v.result = v.n1*1 + v.n2*1;
break;
case 2://减
v.result = v.n1*1 - v.n2*1;
break;
case 3://乘
v.result = (v.n1*1) * (v.n2*1);
break;
case 4://除
v.result = (v.n1*1) / (v.n2*1);
break;
}
}
}
})
</script>
</body>
</html>
Vue シンプル電卓 アップグレード版
<head>
<meta charset="UTF-8">
<title>Vue计算器升级版</title>
</head>
<body>
<div>
<input type="text" v-model="n1">
<input type="text" v-model="n2">
<input type="button" value="加" @click="f('+')">
<input type="button" value="减" @click="f('-')">
<input type="button" value="乘" @click="f('*')">
<input type="button" value="除" @click="f('/')">
<div>结果: {
{result}}</div>
</div>
<!--引入Vue框架-->
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
let v = new Vue({
el:"body>div",
data:{
result:"",
n1:"",
n2:""
},
methods:{
f(x){
//eval("5-2") 此方法可以将字符串以JS代码的形式执行
v.result = eval(v.n1 + x + v.n2);
}
}
})
</script>
</body>
</html>
ビューループスルー
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue循环遍历</title>
</head>
<body>
<div>
<ul>
<!--v-for循环遍历指令,遍历的过程中生成当前元素-->
<li v-for="name in arr">{
{name}}</li>
</ul>
<p v-for="name in arr">{
{name}}</p>
<h1 v-for="name in arr">{
{name}}</h1>
<p v-for="p in persons">名字:{
{p.name}}, 年龄:{
{p.age}}, 类型:{
{p.type}}</p>
<table border="1">
<caption>英雄列表</caption>
<tr>
<th>名字</th>
<th>年龄</th>
<th>类型</th>
</tr>
<tr v-for="p in persons">
<td>{
{p.name}}</td>
<td>{
{p.age}}</td>
<td>{
{p.type}}</td>
</tr>
</table>
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
let v = new Vue({
el:"div",
data:{
arr:["刘备","关羽","诸葛亮","孙尚香","刘禅"],
persons:[{
name:"刘备", age:"50", type:"战士"},
{
name:"孙尚香", age:"20", type:"射手"},
{
name:"诸葛亮", age:"30", type:"法师"}]
},
methods:{
}
})
</script>
</body>
</html>
Vue 従業員リストの演習
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>员工列表练习</title>
</head>
<body>
<div>
<input type="text" placeholder="姓名" v-model="emp.name">
<input type="text" placeholder="工资" v-model="emp.salary">
<input type="text" placeholder="工作" v-model="emp.job">
<input type="button" value="添加" @click="f()">
<table border="1">
<caption>员工列表</caption>
<tr>
<th>姓名</th>
<th>工资</th>
<th>工作</th>
</tr>
<tr v-for="p in arr">
<td>{
{p.name}}</td>
<td>{
{p.salary}}</td>
<td>{
{p.job}}</td>
</tr>
</table>
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
let v = new Vue({
el:"div",
data:{
arr:[{
name:"张三",salary:3000,job:"销售"},
{
name:"李四",salary:4000,job:"人事"},
{
name:"王五",salary:10000,job:"程序员"}],
emp:{
name:"",
salary:"",
job:""
}
},
methods:{
f(){
//push()是JavaScript中数组里面的添加方法
// v.arr.push(v.emp); //用这种方式是对原对象的引用,值会随着文本框的内容改变
/*
v.arr.push({name:"赵六",salary:10000,job:"程序员"})
JSON.parse(JSON.stringify(v.emp))创建了一个新的对象添加到数组中
此时emp对象的值发生改变和数组中的新对象是无关的,
这种复制出来的和原对象无关的方式称为深拷贝(有引用关系的是浅拷贝)
*/
v.arr.push(JSON.parse(JSON.stringify(v.emp)));
}
}
})
</script>
</body>
</html>
ビューの小さな演習
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>综合练习</title>
</head>
<body>
<div>
<table border="1">
<caption>个人信息</caption>
<tr>
<td>照片</td>
<td><img :src="person.url" width="150" alt=""></td>
</tr>
<tr>
<td>名字</td>
<td>{
{person.name}}</td>
</tr>
<tr>
<td>年龄</td>
<td>{
{person.age}}</td>
</tr>
<tr>
<td>好友</td>
<td>
<ul>
<li v-for="name in person.friend">{
{name}}</li>
</ul>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center">
<input type="button" value="请求数据" @click="f()">
</td>
</tr>
</table>
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
let v = new Vue({
el:"table",
data:{
person:{
name:"xxx",age:"xxx",
url:"../touxiang.png",
friend:[]
}
},
methods:{
f(){
v.person = {
name:"女生",age:"18",
url:"../touxiang2.png",
friend: ["Lucy","Mike","John"]
}
}
}
})
</script>
</body>
</html>
Vue 表示 非表示 関連
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>显示隐藏相关</title>
</head>
<body>
<div>
<!--v-if让元素是否显示和变量建立关系,如果变量值为false 则删除元素-->
<h1 v-if="isVisible">刘德华</h1>
<!--和上面v-if的显示状态取反-->
<h1 v-else>张三</h1>
<!--v-show让元素是否显示和变量建立关系,如果变量值为false 则隐藏元素(如果需要频繁切换显示状态)-->
<h1 v-show="isVisible">张学友</h1>
<h1>郭富城</h1>
</div>
<!--引入Vue框架-->
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
let v = new Vue({
el:"body>div",
data:{
isVisible:true
// isVisible:true
},
methods:{
}
})
</script>
</body>
</html>