一、vue初识
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue初识</title>
</head>
<body>
<div class="wrapper">
<div class="box1">
<p>box1内容</p>
{{ }}
</div>
<div class="box2">
<p>box2内容</p>
{{ }}
</div>
</div>
<div class="wrapper">
{{ }}
</div>
</body>
<!-- 使用vue:导入 => 创建vue对象 => 挂载到指定页面标签 -->
<script src="js/vue.js"></script>
<script>
new Vue({
el: '.wrapper'
})
</script>
</html>
二、vue对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue对象</title>
</head>
<body>
<div id="app">
{{ msg }}
{{ info }}
</div>
</body>
<script src="js/vue.js"></script>
<script>
var vue = new Vue({
el: '#app',
data: {
msg: '12345',
info: '上山打老虎'
}
});
console.log(vue.$data.msg);
console.log(vue.msg);
</script>
</html>
三、文本指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本指令</title>
</head>
<body>
<div id="app">
{{ msg }}
<p>{{ msg }}</p>
<!-- vue指令:就是标签的全局属性,但是这些属性是以"v-" 开头-->
<p v-text="txt"></p>
<p v-html="hml"></p>
<p>{{ num + 1 }}</p>
<p>{{ num + "12345" }}</p>
<p>{{ num / 5 }}</p>
<p>{{ num + msg }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: "vue的变量",
txt: "vue的text指令",
hml: "<b>vue的html指令</b>",
num: 1000
}
})
</script>
</html>
四、事件指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件指令</title>
</head>
<body>
<div id="app">
<!--
事件指令:v-on:事件名 简写,@事件名
整体语法: v-on:事件名="事件绑定的变量名"
事件绑定的变量名由methods来提供具体的方法实现
-->
<p v-on:click="action1" v-text="msg1"></p>
<p v-on:dblclick="action2" v-text="msg2"></p>
<p @mouseenter="action3" v-text="msg3" style="background: red"></p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg1: '点击事件',
msg2: '双击事件',
msg3: '鼠标悬浮事件',
},
methods: {
action1: function() {
alert('点击事件')
},
action2: function () {
alert('双击事件')
},
action3: function () {
alert('鼠标悬浮事件')
}
}
})
</script>
</html>
五、属性指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性指令</title>
</head>
<body>
<div id="app">
<!--
事件指令: v-bind:属性名 简写 :属性名
v-vind="属性绑定的变量名"
属性名:来设置事件触发的条件 (style | class | 自定义属性)
整体语法: v-bind:属性名="属性绑定的变量名"
属性绑定的变量名由 data 来提供具体的方法实现
-->
<p v-bind:owen="tag">{{ msg }}</p>
<a :href="url"></a>
<a :href="'/static/article' + aid">前往{{ aid }}篇文章</a>
<button @click="btnClick">获取第100篇文章的id</button>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: '属性指令',
tag: 1,
url: '/static/article/1',
aid: 10
},
methods: {
btnClick: function () {
this.aid = 100;
}
}
});
</script>
</html>
六、style属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性指令</title>
</head>
<body>
<div id="app">
<p :style="a"></p>
<p @click="btnClick" :style="{width: '200px', height: h, backgroundColor: 'red'}">变高</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
a: {
width: '200px',
height: '200px',
backgroundColor: 'red'
},
h: '200px'
},
methods: {
btnClick: function () {
this.h = '300px'
}
}
});
</script>
</html>
七、class属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>class属性</title>
<style>
.red {
width: 200px;
height: 200px;
background: red;
}
.yellow {
width: 100px;
height: 100px;
background: yellow;
}
.orange {
width: 100px;
height: 100px;
background: orange;
}
.y {
border-radius: 50%;
}
</style>
</head>
<body>
<di id="app">
<button @click="redAction">变红</button>
<button @click="yellowAction">变黄</button>
<p :class="cname"></p>
<p :class="{abc: def}"></p>
<button @click="orangeAction">切换</button>
<p :class="{orange: is_orange}"></p>
<!-- class: []语法 => 多类名 -->
<p :class="[a,b,c]"></p>
<p :class="[x,{y:z}]"></p>
</di>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
cname: '',
def: false,
is_orange: '',
a: 'aaa',
b: 'bbb',
c: 'ccc',
x: 'red',
z: true
},
methods: {
redAction: function () {
this.cname = 'red'
},
yellowAction: function () {
this.cname = 'yellow'
},
orangeAction: function () {
this.is_orange = !this.is_orange
}
}
})
</script>
</html>
八、表单指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单指令</title>
</head>
<body>
<div id="app">
<!-- 表单指令: v-model -->
<!--
文本指令不需要绑定东西: v-text="变量名"
属性指令需要绑定属性: v-bind:属性名="变量名" => :属性名="变量名"
事件指令需要绑定事件: v-on:事件名="变量名" => @事件名="变量名"
表单指令需要绑定表单元素的value: v-model:value="变量名" => 只对value进行绑定,
-- 所以直接书写 v-model="变量名"
-->
<input type="text" value="初始value" v-model="msg">
<input type="text" value="初始value" v-model="msg">
<p>{{ msg }}</p>
<!--有v-once的标签,内容一段渲染,就不能再改变-->
<p v-once>{{ info }}{{ msg }}</p>
-------------------------------------------------------------------------------------
<!-- v-model针对于表单元素 -->
<form action="" method="get">
<!-- 1、双向绑定:服务于文本输入框 -->
<!-- v-model存储的值为输入框的value值 -->
<div>
<input type="text" name="usr" v-model="in_val">
<input type="password" name="ps" v-model="in_val" >
<textarea name="info" v-model="in_val"></textarea>
</div>
<!-- 2、单选框 -->
<div>
<!-- 单选框是以name进行分组,同组中只能发生单选 -->
<!-- v-model存储的值为单选框的value值 -->
男:<input type="radio" name="sex" value="male" v-model="ra_val">
女:<input type="radio" name="sex" value="female" v-model="ra_val">
<p>{{ ra_val }}</p>
</div>
<!-- 3、单一复选框 -->
<!-- v-model存储的值为true|false -->
<!-- 或者为自定义替换的值 -->
<div>
<input name="sure" type="checkbox" v-model='sin_val' true-value="选中" false-value="未选中" />
{{ sin_val }}
</div>
<!-- 4、多复选框 -->
<!-- v-model存储的值为存储值多复选框value的数组 -->
<div>
<input type="checkbox" value="喜好男的" name="cless" v-model='more_val' />
<input type="checkbox" value="喜好女的" name="cless" v-model='more_val' />
<input type="checkbox" value="不挑" name="cless" v-model='more_val' />
{{ more_val }}
</div>
<input type="submit" value="提交">
</form>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
info: "一次性数据",
msg: "改变后的value",
in_val: '',
ra_val: 'male',
sin_val: '',
more_val: ['喜好女的','不挑']
},
methods: {}
});
</script>
</html>
九、插值表达式符号
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>插值表达式符号</title>
</head>
<body>
<div id="app">
<p>{{{ msg }}}</p>
<p>{{{ msg ]]]</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: '12345'
},
delimiters: ['{{{', ']]]']
});
</script>
</html>
十、computed
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>computed</title>
</head>
<body>
<div id="app">
<p>
<input type="text" v-model="firstName">
</p>
<p>
<input type="text" v-model="lastName">
</p>
<input type="text" v-model="aaa">
<!--姓名 = firstName + " " + lastName-->
<h2>{{ firstName + " " + lastName }}</h2>
<!-- 将姓名替换为 firstName + " " + lastName -->
<!--<h2>{{ fullName() }}</h2>-->
<h2>{{ fullName }}</h2>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
aaa: '',
firstName: '',
lastName: '',
},
computed: {
fullName: function () {
this.aaa;
console.log("监听到内部拥有的变量在改变");
if (this.firstName || this.lastName) {
return this.firstName + " " + this.lastName
}
return "姓名"
}
}
});
</script>
</html>
十一、watch
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>watch</title>
</head>
<body>
<div id="app">
<p>
<input type="text" v-model="fullName">
</p>
<p>
<input type="text" v-model="firstName">
</p>
<p>
<input type="text" v-model="lastName">
</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
fullName: "",
firstName: "",
lastName: "",
},
watch: {
fullName: function () {
console.log("该方法被调用了");
f_l_arr = this.fullName.split(" ");
this.firstName = f_l_arr[0];
this.lastName = f_l_arr[1];
}
}
});
</script>
</html>
十二、条件指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>条件指令</title>
<style>
p {
width: 200px;
height: 200px;
background: orange;
}
[v-cloak] { display: none; }
div {
width: 400px;
height: 100px;
}
.red { background-color: red; }
.yellow { background-color: yellow; }
.green { background-color: green; }
</style>
</head>
<body>
<div id="app" v-cloak>
<!--
条件指令:
v-if
v-show
-->
<button @click="btnClick">切换</button>
<!-- v-if在消失的时候,不会被渲染, 而v-show以display: none;进行渲染 -->
<p v-if="is_open"></p>
<p v-show="is_open"></p>
<hr>
<!-- 事件绑定函数, 可以加括号(), 一旦加()就代表要传入参数, 系统就不再传入事件参数 -->
<!--如果想传入事件参数, 1:不加括号 2.加括号需用$event-->
<button @click="changeColor('red', $event)">红</button>
<button @click="changeColor('yellow')">黄</button>
<button @click="changeColor('green')">绿</button>
<div class="red" v-if="color == 'red'">红体</div>
<div class="yellow" v-else-if="color == 'yellow'">黄体</div>
<div class="green" v-else>绿体</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
is_open: 0,
color: 'red'
},
methods: {
btnClick: function () {
this.is_open = !this.is_open;
},
changeColor: function (color, ev) {
console.log(color);
console.log(ev);
}
}
});
</script>
</html>
十三、循环指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>循环指令</title>
</head>
<body>
<div id="app">
<h3>{{ list[4] }}</h3>
<h3>{{ dic['gender'] }} {{ dic.gender }}</h3>
<hr>
<p v-for="(cless, index) in list">
<span>
<b>{{ index }} : {{ cless }}</b>
</span>
</p>
<!--遍历对象(字典)-->
<p v-for="(value, key, index) in dic">
<span>
<b>{{ index }} - 【{{ key }}】:{{ value }}</b>
</span>
</p>
<!--复杂结构-->
<!--name:Owen age:8-->
<!--name:Egon age:58-->
<!--name:Hou age:7-->
<p v-for="person in pArr">
<span v-for="(v, k) in person" style="margin-right: 30px">
<b>{{ k }}</b> : <i>{{ v }}</i>
</span>
</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
list: ["语文", "数学", "英语", "编程", "吹牛逼"],
dic: {
name: 'Bob',
age: 18,
gender: '哇塞',
},
pArr: [
{
name: "Owen",
age: "8",
},
{
name: "Egon",
age: "58",
},
{
name: "Hou",
age: "7",
},
]
},
});
</script>
</html>
十四、todolist案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>todolist案例</title>
<style>
span {
background: green;
padding: 5px;
color: red;
margin-right: 20px;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="app">
<p>
<input type="text" v-model="txt">
<button @click="addMsg">留言</button>
</p>
<ul>
<!--<li><span>x</span>第二条</li>-->
<!--<li>第一条</li>-->
<li v-for="(msg, index) in msgs">
<span @click="deleteMsg(index)">x</span>
{{ msg }}
</li>
</ul>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
txt: '',
msgs: []
},
methods: {
addMsg: function () {
var txt = this.txt;
if (txt) {
this.msgs.unshift(txt);
this.txt = '';
}
},
deleteMsg: function (index) {
this.msgs.splice(index, 1)
}
}
});
</script>
</html>