Vue
-
前端框架,免除原生JavaScript的DOM操作,简化书写
-
基于MVVM(层 - 视图 - 视图层) 思想
- 实现数据双向绑定
-
MVC 的话
- 只能是是实现模型到视图的单项展示
快速入门
- 新建 html 界面,引入 vue.js文件
- 在JS代码区域,创建 Vue 核心对象,进行数据绑定
- 编写视图
代码 frist_learn1.html
常用指令
- v-bind
为HTML标签绑定属性值,如设置href,css样式等
[ 不能乱绑定只能绑在a标签里面 ]
- v-model
在表单元素上创建双向数据绑定,将标签和数据绑定在一起
second_learn.html👆
- v-on
绑定一个事件
- 可绑定的事件
- click
- blur
- … 请查找🙏js,dom触发事件
<input type="button" value="button" v-on:click="test()">
-----------简化形式
<input type="button" value="button" @click="test()">
new Vue({ el: "#app", methods:{ test(){ alert("Hello World"); } } })
second_learn_vue_on.html
- v-if
- v-else
- v-else-if
v-if系列指令👆
<div v-if="cnt==3">div</div> <div v-else-if="cnt==2">div2</div> <div v-else>div3</div>
- v-show
v-show 条件性渲染元素与v-if系列的区别是他切换的是 display的值
second_learn_vue__v-if_else.html
核心部分代码:<div id="app"> <input type="input" v-model ="cnt"/>{{cnt}} <div v-if="cnt==1"> 等于1了哈哈</div> <div v-else-if="cnt==2">等于2了🚒</div> <div v-else>既不等于1又不等于2</div> <div v-show="cnt==3">我就静静看着大佬装x</div> </div> <script src="vue.js"></script> <script> new Vue({ el:"#app", data(){ return { cnt:1 } } }) </script>
- v-for
列表渲染,遍历容器的元素或者对象的属性
遍历元素<div v-for="addr in addrs"> {{addr}} </div>
附带索引遍历<div v-for="(addr,i) in addrs"> {{i+1}}:{{addr}}<br> </div>
second_learn_vue_v-for.html
Vue生命周期
- https://cn.vuejs.org/guide/essentials/lifecycle.html#registering-lifecycle-hooks
- 每触发一个生命周期事件,会自动执行一个生命周期方法(钩子)
- beforeCreate 创建前
- created 创建后
- beforeMount 载入前
- mounted 挂载完成
- Vue初始化成功,HTML页面渲染成功,可以和后端PY交易了
- beforeUPdate 更新前
- updated 更新后
- beforeDestroy 销毁前
- destroyed 销毁后
使用方法:
new Vue({ el:"#app", 事件名称(){ .... } })
thrid_learn.html