Vue
-
vue是一套前端框架，免除原生JavaScript中的dom操作，简化书写
-
基于MVVM(Model-View-ViewModel)思想，实现书记的双向绑定，将编程的关注点放到数据上
vue快速入门：
-
新建HTML页面，引入VUE.js文件
-
在js代码区域，创建vue核心对象，进行数据绑定
-
编写视图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--编写视图-->
<div id="app">
<!--给v-model绑定一个视图模型-->
<input name="username" v-model="username">
<!--插值表达式-->
{{username}}
</div>
<!--引入js文件-->
<script src="js/vue.js"></script>
<!--创建Vue核心对象-->
<script>
/* new Vue({
el:"#app",
data: function() {
return {
username:""
}
}
});*/
//简化书写
new Vue({
el:"#app",
data(){
return{
username:""
}
}
});
</script>
</body>
</html>
插值表达式
-
插值表达式是Vuejs中实现数据渲染到页面方式，不用进行dom操作可以直接将数据从模型到视图。
-
插值表达式就是{{ }}，括号里面可以执行简单的js代码 。将模型变量中的属性直接放到插值表达式中可以实现数据渲染到页面的效果。
Vue常用指令：
-
指令：HTML标签上带有v-前缀的特殊指令，不同的指令具有不同的意义
| 指令 | 作用 |
|---|---|
| v-bind | 为HTML标签绑定属性值，如设置herf，css样式 |
| v-model | 在表单元素上创建双向数据绑定 |
| v-on | 为HTML标签绑定事件 |
| v-if | 条件性的渲染元素，判定为true时渲染，否则不渲染 |
| v-else | 条件性的渲染元素，判定为true时渲染，否则不渲染 |
| v-else-if | 条件性的渲染元素，判定为true时渲染，否则不渲染 |
| v-show | 根据条件展示某元素，区别在于切换的是display属性的值 |
| v-for | 列表渲染，遍历容器元素或者对象的属性 |
-
v-model上面已经提过，不再过多赘述
-
v-bind
<body> <!--编写视图--> <div id="app"> <a v-bind:href="url">点击一下</a> <!--简略写法 v-bind 可以省略--> <a :href="url"> 点击一下</a> </div> <!--引入js文件--> <script src="js/vue.js"></script> <!--创建Vue核心对象--> <script> new Vue({ el:"#app", data(){ return{ username:"", url:"https://www.baidu.com" } } }); </script> </body> -
v-on(为HTML标签绑定事件)
<body> <!--编写视图--> <div id="app"> <input type="button" value="不要点这里" v-on:click="show()"><br> <!--简化书写模式--> <input type=" <!-button" value="不要点这里" @click="show()"> </div> <!--引入js文件--> <script src="js/vue.js"></script> <!--创建Vue核心对象--> <script> new Vue({ el: "#app", methods: { show() { alert("我被电了"); } } }) </script> </body> -
v-if
<body> <!--编写视图--> <div id="app"> <div v-if="count==3" >div1</div> <div v-else-if="count==2" >div2</div> <div v-else>div3</div> <!--分割线--> <hr> <!-- v-show如果满足条件，则展示对应的内容--> <div v-show="count==3">div v-show</div> <br> <!--绑定一下count对应的值--> <input v-model="count"> </div> <!--引入js文件--> <script src="js/vue.js"></script> <!--创建Vue核心对象--> <script> new Vue({ el:"#app", data(){ return{ count:2 } } }); </script> </body> -
v-if和v-show的区别
一、功能区别 两个都能实现控制显示和隐藏，但是本质上有巨大的区别：
1.1 v-show v-show严格意义上说“条件隐藏”。浏览器首先不管三七二十一，把HTML元素先渲染起来，符合条件就显示，不符合条件display就为none，不显示，但是元素还在那。。
1.2 v-if v-if是真正意义上的“条件渲染”。浏览器先判断符不符合条件，符合了再渲染，否则不渲染DOM，浏览器中找不到这个DOM。
二、vue生命周期区别
v-if由于是重新渲染，所以每次切换一次会重新走一次生命周期，v-show由于只是控制显示隐藏，所以除了初始化渲染，其他时候都不会再走相关生命周期了。
三、性能区别 1、v-if有更高的切换开销，v-show有更高的初始渲染开销。如果需要频繁的切换，使用v-show比较好，如果运行条件很少改变，使用v-if比较好。
2、v-show比v-if性能更高，因为v-show只能动态的改变样式，不需要增删DOM元素。所以当程序不是很大时候，v-if和v-show区别都不大，如果项目很大，推荐多用v-show，较少浏览器后期操作的性能。
3、需要多种条件场景，比如id=1，=2，=3.....时候，因为只有v-if，可以和v-else等连用，这种比较适合用v-if
4、v-show不支持<template>语法
5、v-if切换时候回实时的销毁和重建内部的事件、钩子函数等，v-show只会初始化渲染时候执行，再切换时候不会执行生命后期的过程。
-
v-for
<body> <!--编写视图--> <div id="app"> <!--因为是在标签上加的属性进行遍历，所以遍历几次标签就会生成几次--> <div v-for="addr in addrs"> <!--利用插值表达式取值--> {{addr}}<br> </div> <hr> <!--i表示索引--> <div v-for="(addr,i) in addrs"> <!--因为索引从0开始，所以加上1--> {{i+1}}--{{addr}} <br> </div> </div> <!--引入js文件--> <script src="js/vue.js"></script> <!--创建Vue核心对象--> <script> new Vue({ el:"#app", data(){ return{ count:2, addrs:["北京","上海","西安"] } } }); </script> </body>
Vue的生命周期
-
生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法（钩子函数）
| 状态 | 阶段周期 |
|---|---|
| brforeCreate | 创建前 |
| created | 创建后 |
| beforeMount | 载入前 |
| monuted | 挂载完成 |
| beforeUpdate | 更新前 |
| updated | 更新后 |
| beforeDestory | 销毁前 |
| destoryed | 销毁后 |
-
monuted:挂载完成，Vue初始化成功，HTML页面渲染成功。
-
发送异步请求，加载数据
-
<body> <!--编写视图--> <div id="app"> <h1>我是一号标签</h1> </div> <!--引入js文件--> <script src="js/vue.js"></script> <!--创建Vue核心对象--> <script> new Vue({ el:"#app", mounted(){ alert("加载完成") } }); </script> </body>
-
8429
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
