01-vue入门
学习Vue最好的方式：查看官网文档 Vue.js - 渐进式 JavaScript 框架 | Vue.js
1.1-Vue介绍
-
(1)Vue是什么？
-
js框架
-
-
(2)Vue干什么用的?
-
构建用户页面(数据渲染到页面)
-
-
(3)有什么特点？
-
渐进式
-
1.2-Vue两个重要特点
1-数据驱动
1.数据驱动 ：Vue会根据数据，自动渲染页面
-
无需DOM操作，修改了对象中的数据，页面会自动渲染
-
Vue的底层使用了一种叫做虚拟DOM的技术，能够实时监听js对象的属性变化从而自动更新页面DOM元素
-
虚拟DOM本质是一个js对象
-
2-组件化开发(盒子复用)
2.组件化开发 ： 网页中的某一个部分,可能需要在多个地方被重复使用，就可以定义成一个组件
组件化开发好处: a. 一次定义，多处使用 便于开发维护
类似于我们之前的函数封装解决代码冗余问题。Vue.js可以把网页的某一个部分(HTML+CSS+JS)封装成一个组件
1.3-Vue基本使用
-
官方文档传送门：Vue官方文档
-
第三方框架通用的使用步骤
-
1.导包
-
2.写HTML结构
-
3.js中初始化配置
-
Document
{{ message }}
{{ name }}
{{ age }}
{{ sex }}
1.4-Vue的挂载点介绍
-
el挂载点官方文档传送门：https://cn.vuejs.org/v2/api/#el
-
1.挂载点
el作用 ： 告诉vue实例，你要将data中的数据渲染到哪一个视图 -
2.
注意点-
(1)挂载点可以使用 id选择器（vue推荐使用） 类选择器 标签选择器
-
开发中基本上都是id选择器，保证HTML标签唯一性
-
如果你希望data中的数据能够对多个元素生效，可以将vue实例挂载到父元素中
-
-
(2)如果选择器选中了多个元素，只会选择第一个元素
-
(3)挂载点不能设置为html和body标签 （程序报错）
-
Document
{{ message }}
{{ message }}
{{ message }}
1.5-Vue的插值表达式介绍
插值表达式(模板语法)官网文档传送门：模板语法 — Vue.js
1.Vue会自动将data对象中的数据渲染到视图
2.在视图中,使用插值表达式来告诉vue，你想把数据渲染在什么位置
3.关于插值表达式一些注意点
(1) {{ }} : 插值表达式，也叫胡子语法
(2) 插值表达式作用：将数据渲染到页面
(3) 支持二元运算 {{ age + 1 }}
(4) 支持三元运算 {{ age>30?'老男人':'小鲜肉' }}
(5) 支持数组与对象的取值语法
(6) 不支持分支语法与循环语法
Document
名字： {{ name }}
年龄： {{ age + 1 }}
介绍： {{ age>30?'大叔':'欧巴' }}
女朋友：{{ girlFried[1] }}
女儿： {{ daughter.name }}
02-Vue指令
| 指令名称 | 指令作用 | 示例 | 简写形式 |
|---|---|---|---|
| v-text | 设置元素的innerText | v-text="111" |
无 |
| v-html | 设置元素的innerHTML | v-html=" |
无 |
| v-on | 给元素绑定事件 | v-on:click="doClick" |
@click="doClick" |
| v-bind | 设置元素的原生属性 | v-bind:src="./logo.png" |
:src="./logo.png" |
| v-for | 列表渲染 | |
无 |
1.1-Vue指令介绍
Vue指令官网文档传送门：https://cn.vuejs.org/v2/api/#v-text
1.Vue指令的本质是 ： Vue为HTML标签新增的一些属性
a. 每一个HTML标签都有自己的原生默认属性
HTML标签的每一个属性都有自己独特的功能
例如 img标签的src属性，a标签的href属性
b. Vue认为,HTML标签原生的属性还不够用，所以Vue为HTML标签新增了很多的属性，每一个属性(指令)都可以实现一个强大的功能
2.在Vue中每一个指令都是以v-开头 （用于区分HTML标签原生属性）
语法 ： 指令名=“指令值” 例如 v-text = msg
3.使用Vue的指令，就像使用HTML标签原生的属性一样去使用即可。
|
|---|
src" : 原生属性，设置图片的路径 |
alt : 原生属性 ，设置图片不存在时的文本 |
title：原生属性，设置鼠标悬停文本 |
v-on:click:vue给img标签新增的属性, 给元素绑定点击事件 |
1.2-v-html指令
v-html指令官方文档传送门：https://cn.vuejs.org/v2/api/#v-html
Document
张三
李四
王五
1.3-v-on指令（绑定事件）
1.3.1- v-on基本使用
v-on指令官方文档传送门:https://cn.vuejs.org/v2/api/#v-on
Document
1.3.2- vue事件修饰符
Document
我是father
我是son
1.3.3- vue方法中的this
-
1.vue事件方法中的this指向 ：
vue实例 -
2.vue事件方法中访问data对象中的成员 :
this.属性名-
vue会将data对象与methods对象中的成员
平铺到 vue实例中
-
-
3.注意点： 如果事件处理代码没有写到methods中，而是写在行内则不需要this 就可以访问data对象中的成员
1.3.4- vue事件传参
1.vue中每一个事件方法都有一个默认参数 ， 就是事件对象
2.如果主动给事件传参，则传递的参数 会 覆盖默认参数
3.如果希望同时传入事件对象 + 自定义参数，则可以使用 $event
v-on:click="doClick($event,自定义参数)"
Document
{{ msg }}
1.4-v-bind指令 (绑定标准属性的值)
v-bind指令官网文档传送门：https://cn.vuejs.org/v2/api/#v-bind
默认情况下，HTML标签原生属性无法获取vue中的数据
如果希望原生属性也可以获取vue中的数据，就可以使用v-bind指令
1.4.1-v-bind指令基本使用
Document
![]()
1.4.2-vue样式绑定
class与style样式绑定官方文档传送门：Class 与 Style 绑定 — Vue.js
v-bind 可以简写成 :
v-bind:class="{ '类名': bool, '类名': bool ......}"
如果值为true 该类样式就会被应用在元素身上, false则不会
注意点：如果类名有 - ，则需要使用引号包起来
1.5-v-for指令(列表渲染)
v-for指令官方文档传送门：列表渲染 — Vue.js
遍历数组语法：v-for="(value,index) in arr"
value:数组元素
index:数组下标
遍历对象语法：v-for="(value,key,index) in obj"
-
该语法使用较少，了解即可 -
value:对象属性值
-
key:对象属性名
-
index:下标
1.6-v-model指令(双向数据绑定)
1.6.1-双向数据绑定基本使用
v-model指令官方文档传送们：https://cn.vuejs.org/v2/api/#v-model
`v-model只能用于表单元素!` `v-model只能用于表单元素!` `v-model只能用于表单元素!`
双向数据绑定
表单元素的值进行了修改，这个变量的值也会跟着修改
这个变量的值进行了修改，表单元素的值也会跟着修改
Document
我的名字是: {{ name }}
1.6.2-双向数据绑定的意义
双向数据绑定的意义
可以让我们快速的得到表单元素的值
可以让我们快速的设置表单元素的值
Document
登陆框：
密码框：
喜欢的可以点个赞哟!