Vue前端框架基础+Element的使用( 二 ) _生活百科

常见指令：
指令作用v-bind为HTML标签绑定属性值，如设置href , css样式等v-model在表单元素上创建双向数据绑定v-on为HTML标签绑定事件v-if条件性的渲染某元素，判定为true时渲染,否则不渲染v-else：：v-else-if：：v-show根据条件展示某元素，区别在于切换的是display属性的值v-for列表渲染，遍历容器的元素或者对象的属性1.3.1 v-bind & v-model 指令

v-bind

该指令可以给标签原有属性绑定模型数据。这样模型数据发生变化，标签属性值也随之发生变化
- 核心对象
  <script src="https://www.huyubaike.com/biancheng/js/vue.js"></script><script>// 创建vue核心对象new Vue({el:"#app",data(){return {url:"https://www.baidu.com"}}});</script>
- 视图部分
  <div id="app"><a v-bind:href="https://www.huyubaike.com/biancheng/url">百度一下</a><a :href="https://www.huyubaike.com/biancheng/url">百度一下</a></div>
v-model

用于实现数据的双向绑定
详见快速入门，此处不再赘述

1.3.2 v-on 指令

为HTML标签绑定事件

核心对象
// 创建vue核心对象new Vue({el:"#app",// 使用methods属性，属性值为任意个方法，注意格式methods:{show(){alert("单击事件");}}});
视图部分
<div id="app"><input type="button" value="https://www.huyubaike.com/biancheng/按钮1" v-on:click="show()"><input type="button" value="https://www.huyubaike.com/biancheng/按钮2" @click="show()"></div>
注意事项：v-on: 后面的事件名称是之前原生事件属性名去掉on
如：
- 单击事件：事件属性名是 onclick，而在vue中使用是 v-on:click
- 失去焦点事件：事件属性名是 onblur ，而在vue中使用时 v-on:blur

1.3.3 条件判断指令

核心对象
<div id="app"><div v-if="count == 1">div1</div><div v-else-if="count == 2">div2</div><div v-else>div3</div><hr><div v-show="count == 1">v-show count == 1</div><hr><input v-model="count"></div>
视图代码
// 创建vue核心对象new Vue({el:"#app",data(){return {count:0}}});

1.3.4 v-for 指令

迭代器语法
<标签 v-for="变量名 in 集合模型数据">{{变量名}}</标签>
索引语法
<标签 v-for="(变量名,索引变量) in 集合模型数据">{{索引变量 + 1}} {{变量名}}</标签>
代码演示
- vue代码
  new Vue({el: "#app",data() {return {addrs: ["北京", "上海", "广州"]}}});
- 视图代码
  <div id="app"><div v-for="addr in addrs">{{addr}}<br></div><hr><div v-for="(addr, i) in addrs">{{i}} ---- {{addr}}</div></div>

1.4 生命周期

生命周期的八个阶段
状态阶段周期beforeCreate创建前created创建后beforeMount载入前mounted挂载完成beforeUpdate更新前updated更新后beforeDestroy销毁前destroyed销毁后
生命周期示意图

文章插图
生命周期函数
new Vue({el: "#app",data() {return {addrs: ["北京", "上海", "广州"]}},method:{show(){alert("");}},// 挂载完成时将被执行mounted(){alert("页面加载完成");}});