目录
1、什么是Vue.js
Vue (读音 /vjuː /，类似于 view) 是一套用于构建用户界面的渐进式框架。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合，Vue.js 是前端的主流框架之一，和 Angular.js、React.js 一起，并成为前端三大主流框架！
2、Vue的优点
-
体积小：压缩后33K
-
高效率：基于虚拟dom，一种可以预先通过JavaScript进行各种计算，把最终的DOM操作计算出来并优化的技术，最后在计算完毕才真正将DOM操作提交。
-
双向数据绑定,简化Dom操作：通过MVVM思想实现数据的双向绑定，让开发者不用再操作dom对象,把更多的精力投入到业务逻辑上
-
生态丰富,学习成本低
3、Vue的安装
直接用<script>引入
下载 Vue.js 并导入 <script src="js/v2.6.10/vue.min.js"></script> 文件
4、Vue程序
- 导入开发版本的Vue.js
- 创建Vue实例对象，设置el属性和data属性
- 使用简洁的模板语法把数据渲染到页面上
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="v2.6.10/vue.min.js"></script>
</head>
<body>
<!-- 创建一个标签
{{message}} 插入一个值,不影响标签中的其他内容 -->
<!-- v-html="message”，v-text="message”会覆斋标签中其他内容
{{message}},v-text="message”不能解析内容中html频签
v-html="message”可以解析内容中html标签-->
<div id="app">
<p>{{message}} aaaaa</p>
<p v-html="message">bbbbb</p>
<p v-text="message">aaaa</p>
</div>
<script>
// 创建一个vue对象
var app=new Vue({
el:'#app',
data:{
message: '<b>hello Vue!</b>'
}
})
</script>
</body>
</html>5、Vue指令
| Vue指令 | 作用 |
| v-text | 设置标签的文本内容。 默认写法会替换全部内容,使用差值表达式可以提高指定内容。 |
| v-html | 设置元素的innerHTML 内容中有html结构会被解析为标签 |
| v-on | 元素绑定事件 事件名不需要写on指令可以写成@ 绑定的方法定义在methods属性中,可以传入自定义参数 |
| v-model | 便捷的设置和获取表单元素的值. 绑定的数据会和表单的数据值相关联。 绑定的数据<--->表单元素的值 ，双向的数据绑定。 |
| v-show | 根据真假切换元素的显示状态。 原理是修改元素的display,实现显示隐藏。 指令后面的内容,最终都会解释为布尔值。 值为true元素显示,值为false元素隐藏。 数据改变之后,对应元素的显示状态会同步更新 |
| v-if | 根据表达式的真假切换元素的显示状态。 本质通过操作dom元素来切换。 显示状态表达式的值为true，元素存在于dom中，为false，从dom中移出。 频繁的切换v-show，反之使用v-if，前者的切换消耗小。 |
| v-bind | 为元素绑定数据属性。 完整写法是v-bind:属性名(:属性名) |
| v-for | 根据数据生成列表结构。 数据经常和v-for结合。 使用语法是(item,index)in 数据,item和index可以结合其他指令一起使用。 数据长度的更新会同步到页面上是响应式的。 为循环绑定一个key值：key="值" 尽可能唯一。 |
代码演示：
v-html ， v-text
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="v2.6.10/vue.min.js"></script>
</head>
<body>
<!-- 创建一个标签
{{message}} 插入一个值,不影响标签中的其他内容 -->
<!-- v-html="message”，v-text="message”会覆斋标签中其他内容
{{message}},v-text="message”不能解析内容中html频签
v-html="message”可以解析内容中html标签-->
<div id="app">
<p>{{message}} aaaaa</p>
<p v-html="message">bbbbb</p>
<p v-text="message">aaaa</p>
</div>
<script>
// 创建一个vue对象
var app=new Vue({
el:'#app',
data:{
message: '<b>hello Vue!</b>'
}
})
</script>
</body>
</html>v-on/@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="v2.6.10/vue.min.js"></script>
</head>
<!-- v-on为标签添加事件 -->
<body>
<div id="app">
<input type="button" value="按钮1" v-on:click="test1(1)" />
<input type="button" value="按钮2" @click="test2(2)"/>
</div>
<script>
var app=new Vue({
el:'#app',
data:{
messgae:'<b>Hello Vuel</b>',
name:""
},
methods:{
test1(a){
alert(this.messgae+":"+a);
},
test2(a){
alert(this.messgae+":"+a);
}
}
})
</script>
</body>
</html>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">
{{ message }},{{name}}
<input v-model="name"/>
</div>
<script>
var app=new Vue({
el:'#app',
data:{
message: 'hello vuel',
name: "jim"
}
})
</script>
</body>
</html>v-show
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="v2.6.10/vue.min.js"></script>
<!-- v-show
根据真假切换元素的显示状态
通过修改元素的display，实现显示隐藏 ,效率高-->
</head>
<body>
<div id="app">
<img v-show="isShow" src="../img/1.jpg" />
<img v-show="age>16" src="../img/2.jpg" />
<div>sss</div>
<input type="button" @click="oper()" value="操作" />
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
isShow: true,
age: 11
},
methods: {
oper() {
this.isShow = !this.isShow;
this.age = 19;
}
}
})
</script>
</html>v-if
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="v2.6.10/vue.min.js"></script>
<!-- v-if
根据真假切换元素的显示状态
(与v-show不同，他是直接彻底删除，显示时重新创建)效率低
v-if 可以 v-else 联合使用 两个必须紧挨着-->
</head>
<body>
<div id="app">
<img v-if="isShow" src="../img/4.jpg">
<img v-if="age>18" src="../img/5.jpg"/>
<img v-else src="../img/3.jpg"/>
<input type="button" @click="oper()" value="操作"/>
</div>
</body>
<script>
var app=new Vue({
el:'#app',
data:{
isShow:true,
age:10
},
methods:{
oper(){
this.isShow=!this.isShow
this.age=19;
}
}
})
</script>
</html>v-bind
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="v2.6.10/vue.min.js"></script>
<!-- v-bind
是为元素绑定属性
v-bind:属性名="变量名" 简写为 :属性名
一旦为属性添加v-bind值 就是一个在data中定义的变量了-->
<style>
.active {
color: rebeccapurple;
background-color: aqua;
}
</style>
</head>
<body>
<!-- :title="array[index]" 鼠标停留时的提示信息-->
<div id='app'>
<img v-bind:src="imgurl[index]" :title="array[index]" />
<!-- 我们可以传给 v-bind:class 一个对象，以动态地切换 class: -->
<div v-bind:class="{ active: isActive }">wwww</div>
<input type="button" @click="oper()" value="操作" />
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
imgurl: ["../img/1.jpg", "../img/2.jpg", "../img/3.jpg"],
array: ["苹果手机", "华为手机"],
index: 0,
isActive:true
},
methods: {
oper() {
this.index++;
this.isActive=!this.isActive;
}
}
})
</script>
</html>v-for
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="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}}
{{student.gender}}
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: { //数组 模拟从后端响应回来的数据 数组 集合
users: [{
name: "jim",
age: 18,
gender: "男"
},
{
name: "liu",
age: 19,
gender: "女"
},
{
name: "mei",
age: 15,
gender: "男"
},
{
name: "wang",
age: 18,
gender: "女"
}
],
student: {
name: "bei",
age: 10,
gender: "男"
}
},methods:{//自定义函数
},//vue对象生命周期 钩子函数，在生命周期的每个阶段为我们提供了一个函数，可以自动执行
beforeCreate(){
console.log("beforeCreate")
},
created(){
console.log("created")
},beforeMount(){
console.log("beforeMount")
},
mounted(){//vue 对象创建成功 且 与标签绑定后执行，这是我们常用的，在此自动的与后端交互
console.log("created")
}
})
</script>
</html>6、Vue实例的生命周期
每个Vue实例在被创建时都要经过一系列的初始化过程。
例如，需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等。
同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
钩子函数，在生命周期的每个阶段为我们提供了一个函数，可以自动执行
beforeCreate: function () {
console.log('beforeCreatea ’);
},
created: function () {
console.log('createda ' );
},
beforeMount:function(){
console.log('beforeMounta’);
},
mounted:function(){ //常用
console.log('mounteda’);
}