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

1.2 快速入门

【Vue前端框架基础+Element的使用】示例
1. 新建HTML页面，引入Vue.js文件
  <script src="https://www.huyubaike.com/biancheng/js/vue.js"></script>
2. 在JS代码区域创建Vue核心对象，进行数据绑定
  new Vue({// el属性：即Element ，确定vue控制的区域，写入为一个选择器，使用标签idel: "#app",// data属性：数据的简化书写格式，返回一个模型数据data() {// data() 是 ECMAScript 6 版本的新的写法return {// 定义了username的模型数据，初始化为空串username: ""}}/*data: function () {return {username:""}}*/// methods属性：用来定义函数，暂时未使用到});
3. 编写视图
  <div id="app"> <input name="username" v-model="username">{{username}}</div>

1.3 Vue指令

指令：HTML 标签上带有 v- 前缀的特殊属性，不同指令具有不同含义。例如：v-if ， v-for…
常见指令：
指令作用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> 上一页 1 2 3 4 5 6 下一页经验总结扩展阅读波斯菊种子怎么种玄风命理|春木见水用土金平衡也可成太极抖腿能瘦腿吗 5招教你快速瘦大腿煮好的银耳汤怎么保存好后台播放是什么梗剑与远征荒鸦边界主神试炼怎么打胡杨长在沙漠里吗? 愚汉只知逞强，智者方懂示弱。八字测算婚姻真的有用吗粑粑为什么是黑色的,狗狗拉的粑粑是黑色的这些原因你要知道哦 2023年10月7日上学好不好 2023年10月7日上学行吗 2023年1月5日是打水井吉日吗 2023年农历腊月十四宜打水井吗美容专家Q&A教你秋冬怎样保湿护肤汽车班次是什么意思什么是汽车班次中年女同学自留地刚生下三胞胎，就要与闪婚老公离婚，女子称“要是知道我的苦衷就不会怪我” 地球之眼在哪里,地平线地球之眼在哪怎么除胶,胶水用什么可以去除掉? 一位老人给自己定的手机使用家规，句句在理刘邦他靠一张嘴为刘邦拿下了70多座城池，最后却被煮成肉汤！ 12月份西藏一般多少度 12月份去西藏有什么建议 7.Vue常用属性连接房屋框架用的什么钉 Vue3的新特性 2022-11-4 VideoPipe可视化视频结构化框架新增功能详解 20_Vue如何监测数组类型数据发生改变的？我的Vue之旅 09 数据数据库表的存储与获取实现 Mysql + Golang 荣耀50值得买吗_荣耀50性价比高吗 19_Vue如何监测到对象类型数据发生改变的？分布式事务框架 Seata 入门案例 Rock18框架之整体框架介绍

Vue前端框架基础+Element的使用( 二 )

经验总结扩展阅读