Vue|1、Vue 笔记（初识 Vue 、Vue 的基本指令、事件修饰符） Vue|vue.js

文章目录

- 什么是 Vue
- 框架和库的区别
- MVC 与 MVVM 的图解关系
- 第一个 Vue 程序
- el 挂载点
- data 数据
- Vue 中的 `v-text` 指令
- Vue 中的 `v-html` 指令
- Vue 中的 `v-on` 指令
- Vue 中的 `v-show` 指令
- Vue 中的 `v-if` 指令
- Vue 中的 `v-bind` 指令
- Vue 中的 `v-for` 指令
- Vue 中的 `v-model` 指令
- 事件修饰符(stop、prevent、capture、self、once)
- Vue 指令之 `v-for` 和 `key` 属性

什么是 Vue Vue 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。
框架和库的区别

框架：是一套完整的解决方案；对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目。
- 例如：node 中的 express；
库（插件）：提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求。
- 1、从Jquery 切换到 Zepto
- 2、从 EJS 切换到 art-template

MVC 与 MVVM 的图解关系

文章图片

第一个 Vue 程序步骤：
1、导入开发版本的 Vue.js
2、创建 Vue 实例对象，设置 el 属性和 data 属性
3、使用简洁的模板语法把数据渲染到页面上
代码：

Vue基础 { {message}} src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"> > var app = new Vue({el: "#app", data: {message: "Hello Vue!" } })

页面效果：

文章图片

el 挂载点 el 是用来设置 Vue 实例挂载（管理）的元素
Vue 会管理 el 选项命中的元素及其内部的后代元素
可以使用其他选择器，但是建议使用 ID选择器（其他选择器不止一个）
可以使用其他双标签，但是不能使用 html 和 body
data 数据 Vue 中用到的数据定义在 data 中
data 中可以写复杂类型的数据
渲染复杂类型的数据时，遵循 js 的语法即可
Vue 中的 v-text 指令 v-text 指令的作用是：设置标签的内容（textContent）
默认写法会替换全部内容，使用差值表达式 { { }} 可以替换指定内容
代码：

Document 123 123 { {message+'000'}}123 src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"> > var app = new Vue({el: "#app", data: {message: "Vue!", info: "ni hao a" } })

页面效果：
(其中使用 v-text 指令的第一个和第二个的 123 会被全部替换)

文章图片

Vue 中的 v-html 指令 v-html 指令的作用是：设置元素的 innerHTML
内容中有 html 结构会被解析为标签
v-text 指令无论内容是什么，只会解析为文本
代码：

Document src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"> > var app = new Vue({el: "#app", data: {content: "百度" }, })

页面效果：

文章图片

Vue 中的 v-on 指令基础：
v-on 指令的作用是：为元素绑定事件
事件名不需要写 on
指令可以简写为 @
绑定的方法定义在 methods 属性中
方法内部通过 this 关键字可以访问定义在 data 中的数据
补充：
事件绑定的方法写成函数调用的形式，可以传入自定义参数
定义方法时需要定义形参来接收传入的实参
事件的后面跟上.修饰符可以对事件进行限制
enter可以限制触发的按键为回车
事件修饰符有多种
代码：
基础：

Document { { food }} src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"> > var app = new Vue({el: "#app", data: {food: "番茄炒鸡蛋" }, methods: {doIt: function () {alert("do It!"); }, changeFood() {// console.log(this.food); this.food += "很好吃"; } }, })

补充：

Document src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"> > var app = new Vue({el: "#app", methods: {doIt: function (p1, p2) {console.log("do it!"); console.log(p1); console.log(p2); }, sayHi: function () {alert("吃了没？"); } }, })

注意： v-on:click 可以简写为 @click
Vue 中的 v-show 指令 v-show 指令的作用是：根据真假切换元素的显示状态
原理是修改元素的 display ，实现显示隐藏
指令后面的内容，最终都会解析为布尔值
值为 true 元素显示，值为 false 元素隐藏
代码：
(本代码实现对图片的显示和隐藏，注意运行时要新建一个 img 文件夹并保存一张图片，根据你的图片名称更换名字)

Document 文章图片 src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"> > var app = new Vue({el: "#app", data: {isShow: false }, methods: {changeIsShow: function () {this.isShow = !this.isShow; } }, })

Vue 中的 v-if 指令 v-if 指令的作用是：根据表达式的真假切换元素的显示状态
本质是通过操作 dom 元素来切换显示状态
表达式的值为 true ，元素存在于 dom 树中，为 false ，从 dom 树中移除
代码：

Document Vue src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"> > var app = new Vue({el: "#app", data: {isShow: false }, methods: {toggleIsShow: function () {this.isShow = !this.isShow; } },})

注意：v-show 和 v-if 都可以切换元素的显示状态，频繁切换用 v-show
Vue 中的 v-bind 指令 v-bind 指令的作用是：为元素绑定属性
完整写法是 v-bind: 属性名
简写的话可以直接省略 v-bind ,只保留 : 属性名
需要动态的增删 class 建议使用对象的方式
代码：

Document > .active {border: 1px solid red; } 文章图片文章图片文章图片 src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"> > var app = new Vue({el: "#app", data: {imgSrc: "http://www.itheima.com/images/logo.png", imgTitle: "图片", isActive: false }, methods: {toggleActive: function () {this.isActive = !this.isActive; } }, })

Vue 中的 v-for 指令 v-for 指令的作用是：根据数据生成列表结构
数组经常和 v-for 结合使用
语法是 （item,index）in 数据（index是索引）
item 和 index 可以结合其他指令一起使用
数组长度的更新会同步到页面上，是响应式的
代码：

Document { {index+1}} { { item }} { {it.name}} src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"> > var app = new Vue({el: "#app", data: {arr: ["北京", "上海", "广州", "深圳"], fruit: [ { name: "apple" }, { name: "banana" } ] }, methods: {add: function () {this.fruit.push({ name: "orange" }); }, remove: function () {this.fruit.shift(); } }, })

页面效果：

文章图片

Vue 中的 v-model 指令 v-model 指令的作用是便捷的设置和获取表单元素的值
绑定的数据会和表单元素值相关联
绑定的数据<–>表单元素的值
代码：

Document { {message}} src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"> > var app = new Vue({el: "#app", data: {message: "Vue" }, methods: {getM: function () {alert(this.message); }, setM: function () {this.message = "java"; } }, })

事件修饰符(stop、prevent、capture、self、once)

.stop 阻止冒泡
.prevent 阻止默认事件
.capture 添加事件侦听器时使用事件捕获模式
.self 只当事件在该元素本身（比如不是子元素）触发时触发回调
.once 事件只触发一次

代码：

Document > .inner {height: 150px; background: darkcyan; } 有问题，去百度有问题，去百度src="https://www.it610.com/article/lib/vue.js"> > var vm = new Vue({el: "#app", data: { }, methods: {divHandler() {console.log("触发了div") }, btnHandler() {console.log("触发了btn") }, linkClick() {console.log("链接的点击事件") } }, })

事件冒泡和事件捕获
事件冒泡是由IE开发团队提出来的，即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播。
当用户点击了元素，click 事件将按照 —>—>—>document 的顺序进行传播。若在和上都定义了 click 事件点击，将先输出 “div” ，再输出 “body” 。

文章图片

事件捕获是由Netscape Communicator团队提出来的，是先由最上一级的节点先接收事件，然后向下传播到具体的节点。
用户点击了元素，采用事件捕获，则 click 事件将按照 document—>—>—> 的顺序进行传播。若在和上都定义了 click 事件，点击，将先输出“body”，再输出“div”。

文章图片

Vue 指令之 v-for 和 key 属性 【Vue|1、Vue 笔记（初识 Vue 、Vue 的基本指令、事件修饰符）】在组件中，使用 v-for 循环的时候，或者在一些特殊的情况中，如果 v-for 有问题，必须在使用 v-for 的同时，指定唯一的字符串/数字类型 :key 值
注意： key 在使用的时候，必须使用 v-bind 属性绑定的形式，指定 key 的值
注意： v-for 循环的时候，key 属性只能使用 number 获取 string
代码：

Document Id: Name: { {item.id}}---{ {item.name}} src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"> > var vm = new Vue({el: '#app', data: {id: '', name: '', list: [ { id: 1, name: '李斯' }, { id: 2, name: '李四' }, { id: 3, name: '张三' }, { id: 4, name: '韩飞' }, { id: 5, name: '小汪' }, ] }, methods: {add() {// this.list.push({ id: this.id, name: this.name }); this.list.unshift({ id: this.id, name: this.name }); } } });