vue
vue
概述
mvvm模式
为什么要用vue.js
为什么要使用mvvm
View
Model
ViewModel
第一个vue程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
{{msg}}
</div>
<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var ver=new Vue({
el: "#app", //element绑定元素
data: { //数据是键值对
msg: "hello vue!"
}
})
</script>
</body>
</html>
v-bind
实例
<!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">
<span v-bind:title="msg">
鼠标悬停于此处可以看到提示信息！
</span>
</div>
<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var ver=new Vue({
el: "#app", //element绑定元素
data: { //数据是键值对
msg: "hello vue!"
}
})
</script>
</body>
</html>
vue指令
vue基本语法
el挂载点
data数据对象
vue指令
v-text
示例
v-html
示例
v-if
案例1
<!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">
<p v-if="flag">正确</p>
<p v-else>错误</p>
</div>
<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var ver=new Vue({
el: "#app",
data: {
flag: true
}
})
</script>
</body>
</html>
案例2
<!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">
<p v-if="type==='A'">A</p>
<p v-else-if="type==='B'">B</p>
<p v-else-if="type==='C'">C</p>
<p v-else>D</p>
</div>
<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var ver=new Vue({
el: "#app",
data: {
type: 'C'
}
})
</script>
</body>
</html>
v-for
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h3 v-for="(item,index) in msg">
{{item}}--{{index}}
</h3>
</div>
<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var ver=new Vue({
el: "#app",
data: {
msg: [
{name: 'tom'},
{age: 12},
{sno: '123456'}
]
}
})
</script>
</body>
</html>
v-on(事件处理)
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="sayhi">click me</button>
</div>
<script>
var app=new Vue({
el: '#app',
data: {
msg: 'hello zhiyong!'
},
methods: {
sayhi: function (event) {
alert(this.msg)
}
}
});
</script>
</body>
</html>
v-show
示例
v-bind
知识点
v-bind示例
数据双向绑定
概述
示例
input表单
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input type="text" v-model="msg">
{{msg}}
</div>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script>
var app=new Vue({
el: '#app',
data: {
msg: 'hello vue!'
}
});
</script>
</body>
</html>
单选框
下拉框
组件（模板）
概述
网络通信
Axios
概念
为什么要使用Axios
示例
计算属性
概述
示例
注意
插槽
概述
示例
想要实现的效果
第一个vue-cli项目
什么是vue-cli
需要的环境
安装vue-cli
创建vue程序
初始化并运行
vue-router
概述
安装
vue:实战快速上手
创建工程
路由嵌套
浙公网安备 33010602011771号