Vue快速入门笔记（一）
2024-07-02 06:45:28
文章目录
- 一、Vue基础
- 1、第一个Vue程序
- 2、el：挂载点
- 3、data：数据对象
- 二、模板语法
- 1、v-once
- 2、v-html
- 3、v-bind
- 4、v-text
- 5、v-on
- 三、计算属性和侦听器
- 1、计算属性
- 2、侦听器
- 四、Class与Style绑定
- 1、绑定HTML Class
- 2、绑定内联样式
- 五、条件渲染
- 1、v-if
- 2、v-else
- 3、v-else-if
- 4、v-show
- v-if与v-show的区别
- 六、列表渲染
- 1、v-for
- 七、表单输入绑定
- 1、v-model
- 八、组件基础
- 1、基本示例
- 2、通过 Prop 向子组件传递数据
- 九、网络应用
- 1、axios
- 2、axios+vue
一、Vue基础
1、第一个Vue程序
来自官方文档
引入Vue
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>声明式渲染
<div id="app">{{ message }}
</div>
var app = new Vue({el: '#app',data: {message: 'Hello Vue!'}
})
2、el：挂载点
Vue实例的作用范围
Vue会管理el选项命中的元素及其内部的后代元素
是否可以使用其他的选择器
可以使用其他的选择器，但是建议使用ID选择器
是否可以设置其他的dom元素
可以使用其他的双标签，不能使用HTML和body
3、data：数据对象
- Vue中用到的数据定义在data中
- data中可以写复杂类型的数据
- 渲染复杂类型数据时，遵守js的语法即可
<body><div id="app">{{ message }}<h2>{{school.name}}{{school.mobile}}</h2><ul><li>{{campus[0]}}</li><li>{{campus[1]}}</li></ul></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el: '#app',data: {message: 'Hello Vue!',school:{name:"江西师范大学",mobile:"123-321-9000"},campus:["瑶湖校区","青山湖校区"]}})</script>
</body>
二、模板语法
1、v-once
- 使用 v-once 指令，能执行一次性地插值，当数据改变时，插值处的内容不会更新
2、v-html
- v-html指令的作用是设置元素的innerHTML
- 内容中有html结构会被解析为标签
- v-text指令无论内容是什么，只会解析为文本
- 解析文本使用v-text，需要解析html结构使用v-html
<body><div id="app"><h1>{{ message }}</h1><!-- 一次性插入，不在修改 --><h1 v-once>{{ message }}</h1><p>{{ rawHtml }}</p><p><span v-html="rawHtml"></span></p></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el: '#app',data: {message: 'Hello Vue!',rawHtml:'<span v-html="rawHtml">hello</span>'}})</script>
</body>
3、v-bind
- v-bind指令的作用是为元素绑定属性
- 完整写法是v-bind:属性名
- 简写的话可以直接省略v-bind，只保留:属性名
- 需要动态的增删class建议使用对象的方式
<body><div id="app"><!-- <img v-bind:src="imgSrc" alt=""> --><br><img :src="imgSrc" style="width: 10em;" alt="" :title="imgTitle + '!!!'":class="{active:isActive}" @click="toggleActive"></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el: '#app',data: {imgSrc:"img/1.jpg",imgTitle:"哈哈哈哈哈",isActive:false},methods: {toggleActive:function(){this.isActive = !this.isActive;}},})</script>
</body>
4、v-text
- v-text指令的作用是设置标签的内容
- 默认写法会替换全部内容，使用插值表达式{{}}可以替换指定内容
- 内部支持表达式
<body><div id="app"><h2 v-text="message + '!'">test</h2><h2 v-text="info + '!'">test</h2><h2>{{message + '!'}}test</h2></div><!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>var app = new Vue({el:"#app",data:{message:"hello",info:"This is v-text"}})
</script>
</body>
5、v-on
- v-on指令的作用是为元素绑定事件
- 事件名不需要写on
- 指令可以简写为@
- 绑定的方法定义在methods属性中
- 方法内部通过this关键字可以访问定义在data中的数据
- 事件绑定的方法写成函数调用的形式，可以传入自定义参数
- 定义方法时需要定义形参来接收传入的实参
- 事件的后面跟上.修饰符可以对事件进行限制
- .enter可以限制触发的按键为回车
- 事件的修饰符有多种
事件修饰符
.stop
.prevent
.capture
.self
.once
.passive
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a><!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form><!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a><!-- 只有修饰符 -->
<form v-on:submit.prevent></form><!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div><!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div><!-- 2.1.4 新增 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a><!-- 2.3.0 新增 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成 -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>
注意：使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。
按键修饰符
<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit"><!-- 你可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。 -->
<input v-on:keyup.page-down="onPageDown">按键码
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
系统修饰键
可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。
.ctrl
.alt
.shift
.meta
.exact修饰符
.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。
<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button v-on:click.ctrl="onClick">A</button><!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button v-on:click.ctrl.exact="onCtrlClick">A</button><!-- 没有任何系统修饰符被按下的时候才触发 -->
<button v-on:click.exact="onClick">A</button>
<body><div id="app"><input type="button" value="v-on指令" v-on:click="doTest"><input type="button" value="v-on简写" @click="doTest"><input type="button" value="双击事件" @dblclick="doTest"><h2 @click="changeFood">{{food}}</h2></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el: '#app',data:{food:"西瓜"},methods: {doTest:function(){alert("v-on指令");},changeFood:function(){this.food += "好好吃！"}},})</script>
</body>
三、计算属性和侦听器
1、计算属性
计算属性会将计算的结果进行缓存
<body><div id="example"><p>{{ message }}</p><p>{{ reversedMessage }}</p></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var vm = new Vue({el: '#example',data: {message: 'Hello'},computed: {// 计算属性的 getterreversedMessage: function () {// `this` 指向 vm 实例,会将计算的结果进行缓存return this.message.split('').reverse().join('')}}})</script>
</body>
2、侦听器
Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
<body><div id="app">{{ message }}<ul><li v-for="item in arr">{{item}}</li></ul></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el: '#app',data: {message: 'Hello Vue!',arr:['小明','小红','小军']},computed: {},watch: {message:function(val){console.log("监听事件~~~~~~~");console.log(val);},arr:function(val){console.log(val);}},})</script>
</body>
四、Class与Style绑定
1、绑定HTML Class
<body><div id="app"><!-- 通过对象的方式决定是否存在某个类 --><div class="static" :class="{ active: isActive}"></div><!-- 直接放置对象 --><div v-bind:class="classObject"></div><!-- 放置数组 --><div v-bind:class="[activeClass, errorClass]"></div></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el: '#app',data: {isActive: true,classObject:{active:true},activeClass: 'active',errorClass: 'text-danger'}})</script>
</body>
2、绑定内联样式
五、条件渲染
1、v-if
- v-if指令的作用是根据表达式的真假切换元素的显示状态,本质是通过操纵dom元素来切换显示状态
- 表达式的值为true，元素存在于dom树中，为false，从dom移除
2、v-else
- 可以使用 v-else 指令来表示 v-if 的"else 块"
v-else-if
3、v-else-if
- 顾名思义，充当 v-if 的"else-if 块"，可以连续使用
注意
v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
<body><div id="app"><input type="button" value="切换显示" @click="toggleIsShow"><input type="button" value="切换选项显示" @click="ABIsShow"><h1 v-if="awesome">Vue is awesome!</h1><h1 v-else>Oh no
Vue快速入门笔记（一）相关推荐
- 黑马VUE快速入门笔记
VUE 官网(https://v3.cn.vuejs.org/) 点击直接进入 我的第一个vue程序 <!DOCTYPE html> <html lang="en" ...
- Vue快速上手笔记1 - 使用初体验
Vue快速上手笔记1 - 使用初体验 博主:李俊才 邮箱:291148484@163.com 若本文中存在的错误请告知博主更正 希望对大家有所帮助 专题目录:https://blog.csdn.net ...
- vue router 入门笔记
vue router 入门笔记 tips: components优先级大于component,即当一个route对象里同时配置了component和components时component视为无效 即 ...
- 【机器学习】Python 快速入门笔记
Python 快速入门笔记 Xu An 2018-3-7 1.Python print #在Python3.X中使用print()进行输出,而2.x中使用()会报错 print("he ...
- 【Vue 快速入门】从零开始搭建 VUE + Element UI后台管理系统框架
[Vue 快速入门]从零开始搭建 VUE + Element UI后台管理系统框架 前言 后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条 ...
- Vue快速上手笔记2 - 开发环境的搭建
Vue快速上手笔记2 - 开发环境的搭建 CSDN:JcLee95 邮箱:291148484@163.com 专题目录:https://blog.csdn.net/qq_28550263/articl ...
- b站黑马的Vue快速入门案例代码——【axios+Vue2】悦听player(音乐播放器)
目录 本文中修改的原代码中的BUG: 修改方法: 本文案例代码仍有的BUG:(欢迎大家献计献策) 目标效果: 悦音player案例--效果展示视频: 更换的新接口/参数: 1.歌曲搜索接口:https ...
- git快速入门-笔记(MD格式)
git快速入门-笔记(MD格式) http://www.php.cn/code/9058.html git是一种版本控制器.原来就是针对linux系统. 下载安装 - https://git-scm. ...
- Vue快速入门（含下载地址）
Vue快速入门 文档 想学习vue,最好的文档就是官网 这里列出几个: Vue.js 介绍 - Vue.js 中文文档 (bootcss.com) Vue.js 教程 | 菜鸟教程 (runoob.c ...
最新文章
- 百度发布ERNIE 2.0，性能超BERT、XLNet
- 三线压力传感器原理_进气压力传感器原理与检修
- 系统架构设计师考试大纲
- adb.exe可能被其他程序关闭_木工中央除尘设备系统正式运行的操作程序
- oracle比较好的链接记录
- Andorid之Log图文详解(Log.v,Log.d,Log.i,Log.w,Log.e)的用法总结
- php批量getshell,任意文件上传引发的批量Getshell到服务器 - WileySec's Blog
- html与css基础教程：CSS构造块
- Keil下Debug随笔
- Winform自定义控件在网页上的应用
- 论文笔记_S2D.57_2018-IROS_LIMO:激光雷达单目视觉里程计
- android sonar 简书,初识Sonar
- Spark的位置优先: TaskSetManager 的有效 Locality Levels
- android开发的程序闪退,Android软件闪退
- 录屏流程 - 安卓R
- 几张图看懂区块链到底是什么？
- （课程笔记）Learn How to Learn: Powerful mental tools to help you master tough subjects
- 重装系统后故障（报错：reboot and select proper boot deviceor insert boot media in selected boot device）
- 动态规划：0-1背包问题(递归+备忘录)
- 自控力lesson25书摘——如何避免错误的选择
热门文章