Vue基础
- 查阅文档是最好的解决方式
Vue官方文档 :
https://cn.vuejs.org/
1-Vue介绍
Vue介绍 | 描述 |
---|---|
1.Vue是一个JavaScript框架 | 所谓框架就是别人写好的js文件 |
2.作用 :构建用户页面 | 将数据渲染到页面 |
3. 渐进式的特点 | 组件式开发 |
1-2 Vue基本使用
-
三个步骤
1.导包
2.写HTML结构
3.js中初始化配置
1-3 Vue的插值表达式
- Vue会自动将data对象中的数据渲染到视图
- 插值表达式会告诉vue,数据渲染在哪个地方
- 差值表达式
注意点
- (1)
{{ }}
: 插值表达式,也叫胡子语法 - (2) 插值表达式作用:将数据渲染到页面
- (3) 支持二元运算 {{ age + 1 }}
- (4) 支持三元运算 {{ age>30?‘老男人’:‘小鲜肉’ }}
- (5) 支持数组与对象的取值语法
- (6) 不支持分支语法与循环语法
- (1)
2-Vue指令
指令名称 | 指令作用 | 示例 | 简写方式 |
---|---|---|---|
v-text | 设置元素的innerText | v-text="111" | 无 |
v-html | 设置元素的innerHTML | v-html='<p>111</p>' | 无 |
v-on | 给元素绑定事件 | v-on:click="doClick" | @click='doClick' |
v-bind | 设置元素的原生属性 | v-bind:src="./logo.png" | :src="./logo.png" |
v-for | 列表渲染 | <li v-for=(item,index) in list></li> | 无 |
2-1 v-text指令
- v-text指令官方文档地址:https://cn.vuejs.org/v2/api/#v-text
v-text
指令的作用:设置标签的内容- 默认写法会替换全部内容,使用**差值表达式{{}}**可以替换指定内容
- 内部支持写表达式
{{ }}
只会替换当前位置的文本
<div id="app">
<h2 v-text='message +"!"'></h2>
<h2 v-text='info+"!"'></h2>
<h2>{{ message + '!'}}</h2>
</div>
<script>
let app = new Vue({
el:'#app',
data:{
message:'有朝一日虎归山',
info:'定要血染半边天..'
}
})
</script>
2-2 v-html指令
- v-html指令官方文档:https://cn.vuejs.org/v2/api/#v-html
v-html
指令的作用:设置元素的innerHTML- 内容中有
HTML
结构会被解析标签 v-html
指令无论内容是什么,只会解析为文本- 解析文本使用
v-text
,解析HTML
结构使用v-html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-html指令</title>
<!-- 1. 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- 2. html结构 -->
<div id="app">
<p v-html="content"></p>
<p v-text="content1"></p>
</div>
<script>
/* 3. 创建vue实例 */
let app = new Vue({
// el:挂载点
el:'#app',
// data:要渲染的数据
data:{
content:'<a href="https://baike.baidu.com/item/%E8%89%BE%E6%81%A9/964824?fr=aladdin">艾恩</a>',
content1:'Ain'
}
})
</script>
</body>
2-3 v-on指令(绑定事件)
2-3-1 v-on基本使用
- v-on指令官方文档:https://cn.vuejs.org/v2/api/#v-on
<!--
1.学习目标 : v-on 指令
2.学习路线
a.作用:给元素绑定事件
b.语法:
标准语法: v-on:事件名 = "方法名"
简洁语法: @事件名 = “方法名”
c.注意点
事件名就是元素事件名去掉on
事件方法定义在vue实例的methods对象中
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-on指令基础</title>
<!-- 1. 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- 2. html结构 -->
<div id="app">
<input type="button" value="v-on指令" v-on:click="Ain">
<input type="button" value="v-on简写" @click="Ain">
</div>
<script>
/* 3. 创建vue示例 */
let app = new Vue({
el: "#app",
methods: {
Ain: function () {
alert('若是甘于平庸那你现在就放弃');
}
},
})
</script>
</body>
</html>
2-3-2 v-on事件修饰符
如何控制事件只在某些特别条件下触发呢?
- .stop
- 阻止事件冒泡
- .prevent
- 阻止事件默认行为
- keyup.xx
- 只能是按xx键触发,例如keyup.enter是代表回车键触发
2-4 v-domel指令
-
用法:
-
拿到表单的值,给绑定的变量
-
变量的值变了,也会影响到表单元素
<表单元素 v-model="vue的变量"></表单元素>
2-5 vue实例中的this
- 在Vue的方法里默认清空下this都是值当前Vue实例
- 实例的data里的属性和methods里的方法都直接绑定在Vue实例一级xia,可以直接访问
2-6 v-bind指令基本用法
官网地址:https://cn.vuejs.org/v2/api/#v-bind
- 作用:绑定行内属性,让行内属性的值不写死
- 用法:v-bind:属性名=“变量名”
- 简写: :属性名=“变量名”
- 注意:一般绑定的都是变量名,要在vue的data里声明
2-7 v-bind指令对象用法
-
v-bind对象用法,主要在
class
和style
属性里 -
用在
class
代表,绑定某个类名,控制它是否拥有 -
<div :class="{active:变量}"> 控制active是否拥有,变量为true拥有,为false不拥有 </div>
-
用在
style
代表绑定某个样式属性,给它一个动态的值 -
<div :style="{width:100px}"> width 的值取变量值 </div>
2-8 v-for指令
-
作用:变量数组,根据数组生成对应的标签
-
语法
v-for="item in 数组名" v-for="(item,index) in 数组名"
-
item,index名字可以改动,但是左边的一定是元素,右边的一定是下标
-
v-for里面还可以嵌套v-for,相当于循环的嵌套
2-9 v-if,v-eles-if,v-lese指令
- 根据条件决定是否渲染元素,满足条件渲染,不满足不渲染
- v-if可以单独使用
- v-if和v-else-if以及v-else的搭配必须是同级的兄弟关系
<div id="app">
<button @click="arr.push('天空之城')">添加数组元素</button>
<button @click="arr.pop()">删除元素</button>
<ul>
<!--
遍历arr这个数组,并把每个元素取出来(item)
item相当于是arr[i]
数组长度是级,就会遍历几次
-->
<li v-for="item in arr ">
{{ index }} ---- {{ item }}
<p>{{ item }}</p>
</li>
</ul>
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
arr:['千与千寻', '你的名字', '天气之子', '龙猫']
}
})
</script>
3- 今日总结
- Vue的介绍
- 是一套渐进式的js框架
- 特点:只关注数据
- 基本使用
- 导包
- 写HTML结构
- 创建Vue实例,实例化的时候传入一个对象
- el:挂载某个元素交给vue管理
- data: 保存vue数据
- methods: 保存vue里的方法
- v-text
- 相当于innerText,给标签添加文本内容的,会覆盖原来内容
- 遇到标签会变成纯文本
- 局部替换文本:插值表达式{{数据}}
- v-html
- 相当于innerHTML
- 解析标签为dom元素
- 没有局部替换
- 带标签的文本就叫富文本
- v-model
- 双向绑定
- 在表单元素使用
input
、textarea
、select
- 输入的内容复制给数据,数据改变输入框的内容也改变
- v-on
- 事件绑定
- v-on:事件名=“要执行的代码” 或者 v-on:事件名=“vue里定义的方法”
- 简写: @事件名
- 事件修饰符
- .stop阻止冒泡
- .prevent阻止默认行为
- .entenr键盘按enter触发
- vue里的this
- 行内属性跟数据做绑定
- 语法:v-bind:属性名=“属性值”
- 简写: :属性名=“属性值”
- 主要用在class和style
styel={}width:100px
- v-for
- 遍历数组,根据数组去生成标签,v-for写那个标签,就代表生成那个标签
- v-for里第一个是元素,第二个是下标
- 通常写作
(item,index) in 数组名
- item和index在当前标签内部都可以访问
- v-if
- 根据条件渲染
- v-if搭配v-else-if和v-else时,是同级兄弟关系