vue-day01
1-阶段学习目标
- vue框架
- react框架
2-vue框架介绍
2.0-框架和库的区别
- js库: js库就是对某个功能的封装, 小而巧, 对项目的侵入性不是特别大, 我们需要主动调用库文件所提供的功能代码实现特定业务功能
- 框架: 大而全, 对整个项目的侵入性比较大, 框架的功能更完善, 会提供项目最基本的目录结构, 我们只需要将对应的代码放在框架约定的文件或者目录中, 框架在特定的时间会调用我们的代码
2.1-特点
- 入门门槛比较低
- 数据驱动视图更新
- vue中不建议操作dom
- 基于组件化的开发方式
3-下载以及安装
-
手动下载
-
通过npm在线下载
npm i vue -S // 或者 npm install vue --save
4-vue基础语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1-引入vue.js -->
<script src="./libs/vue.js"></script>
</head>
<body>
<!-- 2-容器 -->
<div id="app">
<!-- 插值表达式: 特殊的占位符 -->
<h1>{{pageTitle}}</h1>
<hr>
<h3>{{msg}}</h3>
</div>
</body>
<!-- 3-书写逻辑代码 -->
<script>
// 创建实例对象
const vm=new Vue({
// 模板容器的id
el:'#app',
// 定义数据
data:{
pageTitle:'网站首页',
msg:'hello vue'
}
});
</script>
</html>
5-插值表达式
<div id="app">
<!-- 插值表达式: 特殊的占位符 -->
<!-- 字符串连接 -->
<h1>{{pageTitle+'~~~'}}</h1>
<hr>
<!-- 调用系统方法 -->
<h3>{{msg.toUpperCase()}}</h3>
<hr>
<!-- 调用自定义方法 -->
<h3>{{reverse(msg)}}</h3>
<hr>
<!-- 条件判断: 三元表达式 -->
<h3>
{{age>=18?'恭喜您, 终于成年了':'好好享受美好的童年'}}
</h3>
<hr>
<!-- 数学运算 -->
<h3>{{age+10}}</h3>
</div>
// 创建实例对象
const vm=new Vue({
// 模板容器的id
el:'#app',
// 定义数据
data:{
pageTitle:'网站首页',
msg:'hello vue',
age:17
},
// 定义方法
methods:{
// 实现字符串翻转
reverse(str){
return str.split('').reverse().join('');
}
}
});
6-指令
- 指令: 是vue中的一种特殊的语法, 指令的本质其实是一个特殊的函数, 这个函数的调用方式比较特殊, 当做自定义属性来调用
- 语法: 当做自定义属性使用
6.1-v-text
-
作用: 在模板中输出变量
-
语法: 当做自定义属性使用
-
特点: 只会原样输出变量中的内容, 不会对标签进行解析
<!-- 2-容器 --> <div id="app"> <!-- 指令的语法 --> <h1 v-text='pageTitle+"~~~"'></h1> <hr> <!-- 调用系统方法 --> <h2 v-text='msg.toUpperCase()'></h2> <!-- 调用自定义方法 --> <h2 v-text='reverse(msg)'></h2> <hr> <h3 v-text="age>=18?'已成年':'未成年'"></h3> </div>// 创建实例对象 const vm=new Vue({ // 模板容器的id el:'#app', // 定义数据 data:{ pageTitle:'网站首页', msg:'hello vue', age:17 }, // 定义方法 methods:{ // 实现字符串翻转 reverse(str){ return str.split('').reverse().join(''); } } });
6.2-v-html
-
作用: 在模板中输出变量
-
特点: 解析变量中的标签
-
案例
<!-- 2-容器 --> <div id="app"> <h1 v-html="pageTitle"></h1> <hr> <!-- v-html: 可以解析变量中的标签 --> <div v-html="content"></div> </div>// 创建实例对象 const vm=new Vue({ // 模板容器的id el:'#app', // 定义数据 data:{ pageTitle:'网站首页', content:` <h1>新闻标题</h1> <hr/> <p>新闻内容</p> ` } });
6.3-v-bind
-
作用: 动态指定属性值
-
完整语法:
<div v-bind:属性名="属性值"></div> -
简写语法
<div :属性名="属性值"></div> -
案例
<img v-bind:src="url" alt="">// 创建实例对象 const vm=new Vue({ // 模板容器的id el:'#app', // 定义数据 data:{ url:'./imgs/28.png' } });
6.4-v-show
-
作用: 控制元素的显示和隐藏
-
可选值: true(显示), false(隐藏)
-
语法
<div v-show="true"></div> -
控制元素隐藏的原理: 通过css的方式实现元素隐藏, display:none
-
应用场景: 频繁切换显示状态, 建议选择v-show, 性能开销更小
-
案例
<img v-show="isShow" v-bind:src="url" alt="">// 创建实例对象 const vm=new Vue({ // 模板容器的id el:'#app', // 定义数据 data:{ url:'./imgs/28.png', isShow:true } });
6.5-v-if
-
作用: 控制元素的显示和隐藏
-
可选值: true(显示), false(隐藏)
-
语法
<div v-if="true"></div> -
控制元素隐藏的原理: 销毁DOM
-
应用场景: 如果不是频繁切换显示状态, 可以使用v-if
-
组合指令
- v-else-if: 不能单独使用, 必须v-if结合起来使用
- v-else: 不能单独使用, 必须v-if结合起来使用, 不需要指定条件
-
案例
<div id="app"> <h1 v-if="score<60&&score>=0">不及格</h1> <h1 v-else-if="score>=60&&score<=70">及格</h1> <h1 v-else-if="score>70&&score<80">良好</h1> <h1 v-else-if="score>=80&&score<=100">优秀</h1> <h1 v-else>成绩不合法</h1> </div>// 创建实例对象 const vm=new Vue({ // 模板容器的id el:'#app', // 定义数据 data:{ // 60>score>=0: 不及格 // 60<=score<=70 及格 // 70<score<80 良好 // 80<=score<=100 优秀 // 否则: 成绩不合法 score:90 } });
6.6-v-on
-
作用: 注册事件
-
语法
<div v-on:事件名称="事件处理函数"> </div> -
简写
<div @事件名称="事件处理函数"> </div> -
案例
<div v-on:click="handle()"></div>// 创建实例对象 const vm=new Vue({ // 模板容器的id el:'#app', // 定义数据 data:{ msg:'hello' }, // 定义方法 methods:{ handle:function(){ // 调用其他方法 this.log(); alert('点击事件处理函数执行了:'+this.msg); }, log(){ console.log(new Date().toLocaleDateString()); } } });
6.7-v-once
-
作用: 当在某个标签上使用了v-once, 那么vue只会对当前的标签编译一次, 如果过标签中引用的数据发生了更新, 视图是不会刷新的
-
语法
<div v-once>{{msg}}</div> -
案例
<div id="app"> <hr> <h1>没有使用v-once指令:{{msg}}</h1> <!--使用了v-once之后, 当msg发生改变是, 不会对所在标签进行二次编译--> <h1 v-once>使用了v-once指令:{{msg}}</h1> <hr> <button @click="update">更新</button> </div>// 创建实例对象 const vm=new Vue({ // 模板容器的id el:'#app', // 定义数据 data:{ msg:'hello' }, // 定义方法 methods:{ update(){ // 更新msg this.msg='你好' } } });
6.8-v-for
-
作用: 循环输出
-
基础语法
<h1 v-for="模板变量 in 目标数据">{{模板变量}}</h1> -
案例
-
循环遍历数组
<!-- item: 数组元素 index: 数组索引 --> <h1 v-for="(item,index) in arr"> <a href="#">{{index}}-{{item}}</a> </h1>new Vue({ data:{ arr:['vue','react','angular'] } }); -
循环遍历对象
<!-- item: 对象属性值 key: 对象属性名 index: 对象属性序号 --> <h1 v-for="(item,key,index) in user">{{index}}---{{key}}---{{item}}</h1>new Vue({ data:{ user:{ nickname:'jack', age:20, sex:'男' } } }); -
循环遍历数值
<h1 v-for="(item,index) in 5">{{index}}---{{item}}</h1> -
循环遍历字符串
<h1 v-for="(item,index) in 'hello'">{{index}}---{{item}}</h1>
-
-
key属性
- 保证key属性的值, 唯一不重复
- 一般而言, key属性需要一个数值或者字符串作为他值
- 在数据和视图层建立一个一一对应关系, 方便进行状态保持
<table border="1" width="400" height="300">
<tr>
<td></td><td>id</td><td>姓名</td>
</tr>
<!-- key:
一般需要动态绑定
保证key属性的值, 唯一不重复
一般而言, key属性需要一个数值或者字符串作为他值
作用: 在数据和视图层建立一个一一对应关系, 方便后期进行局部更新
-->
<tr v-for="item in list" v-bind:key="item.id">
<td><input type="checkbox"></td>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
</tr>
</table>
new Vue({
el:'#app',
data:{
list:[
{id:4,name:'jack'},
{id:3,name:'pony'},
{id:2,name:'robin'},
{id:1,name:'charlse'}
]
}
});
7-样式的设置
7.1-动态设置style
-
普通写法
<div id="app"> <!-- 动态设置style --> <div v-bind:style="flag?styleObj:{}"></div> <hr> <button @click="toggleStyle">切换样式</button> </div>new Vue({ el:'#app', data:{ styleObj:{ width:'100px', height: '100px', backgroundColor:'aqua' }, // 中间变量: true表示要添加样式, false表示不需要添加样式 flag:false }, methods:{ toggleStyle(){ // 更新中间变量flag的值 this.flag=!this.flag; } } }); -
数组写法
<div id="app"> <!-- 动态设置style --> <div v-bind:style="[hasSize?styleObj1:'',hasBg?styleObj2:'']"></div> <hr> <button @click="toggleSize">切换尺寸</button> <button @click="toggleBg">切换背景</button> </div>new Vue({ el:'#app', data:{ // 样式对象 styleObj1:{ width:'100px', height: '100px', }, styleObj2:{ backgroundColor:'aqua' }, // 控制尺寸样式 hasSize:false, // 控制背景样式 hasBg:false }, methods:{ // 切换尺寸 toggleSize(){ this.hasSize=!this.hasSize; }, // 切换背景 toggleBg(){ this.hasBg=!this.hasBg; } } });
7.2-动态设置class
.border{
border:4px solid green;
}
.size{
width: 200px;
height: 200px;
}
.bg{
background-color: brown;
}
.font{
font-size: 40px;
font-weight: 700;
text-align: center;
}
new Vue({
el:'#app',
data:{
// 保存css选择器的变量
border:'border',
size:'size',
bg:'bg',
font:'font',
// 中间变量
hasBorder:false,
hasSize:false,
hasBg:false,
hasFont:false
},
methods:{
toggle(attr){
this[attr]=!this[attr];
}
}
});
-
普通写法
<div :class="border+' '+size+' '+bg"> hello </div> -
数组写法
<div :class="[hasBorder?border:'',hasSize?size:'',hasBg?bg:'',hasFont?font:'']"> hello </div> -
对象写法
<div :class="{border:hasBorder,size:hasSize,bg:hasBg,font:hasFont}"> world </div>
8-案例
-
tab栏切换
<div id="app"> <button @click="tab(1)">导航1</button> <button @click="tab(2)">导航2</button> <button @click="tab(3)">导航3</button> <button @click="tab(4)">导航4</button> <div> <div class="content" v-show="current===1"> 内容1 </div> <div class="content" v-show="current===2"> 内容2 </div> <div class="content" v-show="current===3"> 内容3 </div> <div class="content" v-show="current===4"> 内容4 </div> </div> </div>new Vue({ el:'#app', data:{ // 当前需要默认显示的内容块 current:1 }, methods:{ tab(index){ // 更新current this.current=index; } } });.content{ border:1px solid #999; width: 600px; height: 400px; background: #EEE; font-weight: 700; font-size: 40px; text-align: center; }
9-在线文档
-
```<div class="content" v-show="current===3"> 内容3 </div> <div class="content" v-show="current===4"> 内容4 </div> </div>new Vue({ el:'#app', data:{ // 当前需要默认显示的内容块 current:1 }, methods:{ tab(index){ // 更新current this.current=index; } } });.content{ border:1px solid #999; width: 600px; height: 400px; background: #EEE; font-weight: 700; font-size: 40px; text-align: center; }
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
