1.什么是框架？
①概述
②前端框架
③后端框架
2.什么是 Vue.js？
https://v2.cn.vuejs.org/
https://v2.cn.vuejs.org/
3.Vue.js 优点
①体积小 压缩后 33K
②更高的运行效率
③双向数据绑定,简化 Dom 操作
④生态丰富、学习成本低
4.vue安装
①方式 1:直接用 <script> 引入
②方式 2:命令行工具 (CLI)
③ 第一个 Vue 程序
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 导入vue.js -->
<script src="js/v2.6.10/vue.min.js"></script>
</head>
<body>
<!-- 创建一个标签 -->
<div id="app">
{{ message }},{{ name }}<!-- {{ }} 差值表达式，可以获取data中定义的数据-->
<input v-model="name"/>
</div>
<script>
/*
创建一个vue对象
*/
var app = new Vue({
el: '#app',//绑定挂载点，可以使用其他的选择器，建议使用id选择器，不能使用body,html与vue对象绑定
data: {//定义数据，可以定义多个
message: 'Hello Vue!',
name:"jim"
}
})
</script>
</body>
</html>
5.Vue 指令
①差值表达式
②v-text
③v-html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 导入vue.js -->
<script src="js/v2.6.10/vue.min.js"></script>
</head>
<body>
<!-- 创建一个标签 -->
<!-- {{ message }} ，v-text="message" 不能解析内容中的html标签
v-html="message" 可以解析内容中html标签
-->
<div id="app">
<!-- ①{{ }} 差值表达式 插入一个值不影响标签中的其他内容-->
<p>{{ message }} aaaa</p>
<!-- ②v-html 会覆盖标签中的其他内容 -->
<p v-html="message">aaaa</p>
<!-- ③v-text 会覆盖标签中的其他内容-->
<p v-text="message">aaaa</p>
</div>
<script>
/*
创建一个vue对象
*/
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>④v-on
⑤v-model
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 导入vue.js -->
<script src="js/v2.6.10/vue.min.js"></script>
</head>
<body>
<!-- 创建一个标签 -->
<div id="app">
<input type="button" value="按钮" v-on:click="test1(1)"/>
<input type="button" value="按钮" @click="test2(2)"/>
<input v-model="name"/>
<p>{{message}}</p>
<p>{{name}}</p>
</div>
<script>
/*
创建一个vue对象
*/
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
name:""
},
methods:{//在vue中声明函数
test1(a){
this.message = this.message.split("").reverse().join("");
},
test2(a){
this.name = "tom";
}
}
})
</script>
</body>
</html>⑥v-show
⑦v-if
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
img{
width: 100px;
height: 100px;
}
</style>
<!-- 导入vue.js -->
<script src="js/v2.6.10/vue.min.js"></script>
</head>
<body>
<!-- 创建一个标签 -->
<!--
v-show ="布尔值" true-"显示" false-"隐藏" 控制标签display属性，隐藏显示标签的，效率高
v-if = "布尔值" true-"显示" false-"隐藏" 会在隐藏时，删除了标签，显示时重新创建标签，效率低
v-if 可以和 v-else 联合使用，两个必须紧挨着
-->
<div id="app">
<img v-show="isShow" src="img/1.jpg"/>
<img v-show="age>18" src="img/2.jpg"/>
<img v-if="isShow" src="img/1.jpg"/>
<img v-if="age>18" src="img/2.jpg"/>
<img v-else src="img/1.jpg"/>
<input type="button" @click="oper()" value="操作"/>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
isShow:true,
age:15
},
methods:{//在vue中声明函数
oper(){
this.isShow = !this.isShow;
this.age = 15;
}
}
})
</script>
</body>
</html>⑧v-bind
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
img{
width: 200px;
height: 200px;
}
.active{
color:red;
background-color:aqua;
}
</style>
<!-- 导入vue.js -->
<script src="js/v2.6.10/vue.min.js"></script>
</head>
<body>
<!--
需求：标签的属性值可以动态修改
v-bind:属性名="变量名" 一旦为属性添加v-bind值就是一个在data中定义的变量了
还可以简写为:属性名
-->
<div id="app">
<img v-bind:src="imgurl[index]" :title="array[index]"/>
<div v-bind:class="{active:isActive}">wwww</div>
<input type="button" @click="oper()" value="操作"/>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
imgurl:["img/1.jpg","img/2.jpg"],
array:["苹果手机","华为手机"],
index:0,
isActive:true
},
methods:{
oper(){
this.index++;
this.isActive = !this.isActive
}
}
})
</script>
</body>
</html>⑨v-for
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 导入vue.js -->
<script src="js/v2.6.10/vue.min.js"></script>
</head>
<body>
<!-- 创建一个标签 -->
<div id="app">
<ul>
<li v-for="user in users">
姓名:{{user.name}}
年龄:{{user.age}}
性别:{{user.gender}}
</li>
</ul>
{{student.name}} {{student.age}}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
users:[//数组，模拟从后端响应回来的数据
{name:"jim",age:20,gender:"男"},
{name:"jYY",age:19,gender:"男"},
{name:"jkk",age:15,gender:"女"}
],
student:{name:"张三",age:20}
}
})
</script>
</body>
</html>
⑩Vue 实例生命周期
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 导入vue.js -->
<script src="js/v2.6.10/vue.min.js"></script>
</head>
<body>
<!-- 创建一个标签 -->
<div id="app">
</div>
<script>
var app = new Vue({
el: '#app',
data: {
users:[
]
},
beforeCreate(){
console.log("beforeCreate")
},
created(){
console.log("created")
},
beforeMount(){
console.log("beforeMount")
},
mounted(){//vue对象创建成功且与标签绑定后执行，这是我们常用的，再次自动的与后端交互
console.log("created")
}
})
</script>
</body>
</html>
