|
前端小白的崛起：Vue基础课1.1+实战练习 |
|
阿易的猫
L1
• 2021-08-04 • 回复 2 • 只看楼主
• 举报
|
今天也是学习的一天哦！
基础-术语解释-插值表达式(重要)
理解和使用插值表达式
作用:会将绑定的数据实时的显示出来
形式: 通过
{{ 插值表达式 }}包裹的形式
用法:{{js表达式、三元运算符、方法调用等}}
-
{{ a }}
-
{{a == 10 }}
-
{{a > 10}}
-
{{a + b + c}}
-
{{a.split('').reverse().join('')}}
-
{{a > 0 ? "成功" : "失败"}}
// 错误写法
<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}
<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}
// 正确写法
<!-- js表达式 -->
<p>{{ 1 + 2 + 3 }}</p>
<p>{{ 1 > 2 }}</p>
<!-- name为data中的数据 -->
<p>{{ name + ':消息' }}</p>
<!-- count 为data中的数据 -->
<p>{{ count === 1 }}</p>
<!-- count 为data中的数据 -->
<p>{{ count === 1 ? "成立" : "不成立" }}</p>
<!-- 方法调用 -->
<!-- fn为methods中的方法 -->
<p>{{ fn() }}</p>
任务
初始化一个Vue实例
在data中定义 name: "张三" count: 2 , list:'123'
要求根据data中的数据用插值表达式输出 张三, 2, 321,
基础-术语解释-指令(重要)
指令 (Directives) 是带有
v-前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式(
v-for是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
指令位置: 起始标签
代码示例:
<p v-text="name">内容</p>
任务:
初始化一个Vue实例
定义一个data属性 name: 我是内容
使用v-text指令将data内容显示在p标签上
基础-系统指令-v-text和v-html
很像innerText和innerHTML
v-text:更新标签中的内容
v-text和插值表达式的区别
v-text 更新
整个标签中的内容插值表达式: 更新标签中局部的内容
v-html:更新标签中的内容/标签
可以渲染内容中的html标签
注意:尽量避免使用，容易造成危险 (XSS跨站脚本攻击)
<div id="app">
<!-- v-text指令的值会替换标签内容 -->
<p>{{str}}</p>
<p v-text="str"></p>
<p v-text="str">我是p标签中的内容</p>
<p v-text="strhtml">我是p标签中的内容</p>
<!-- v-html指令的值(包括标签字符串)会替换掉标签的内容 -->
<p v-html="str"></p>
<p v-html="strhtml">我是p标签中的内容</p>
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
str: 'abc',
strhtml: '<span>content</span>'
}
});
</script>
任务
初始化一个vue实例
定义一个 数据对象 name: 张三
分别使用v-text和插值表达式将张三显示在p标签上
定义一个数据对象 nameHtml: 内容,使用v-html将内容显示在p标签上,并且内容为红色
基础-系统指令-v-if 和 v-show
使用: v-if 和 v-show 后面跟着表达式的值是布尔值 ，布尔值来决定该元素显示隐藏
注意 : v-if 是直接决定元素 的 添加 或者删除 而 v-show 只是根据样式来决定 显示隐藏，样式为display：none
v-if有更高的切换开销
v-show有更高的初始渲染开销。如果需要非常频繁地切换，则使用
v-show较好.如果在运行时条件很少改变，则使用
v-if较好.
任务:
定义一个Vue实例
定义一个布尔型变量isShow
分别使用v-if 和 v-show来条件渲染 P标签内容
基础-系统指令-v-on绑定事件
使用:
第一种:v-on:事件名="方法名"
第二种:@事件名="方法名"的方式
// v-on:xx事件名='当触发xx事件时执行的语句'
<button v-on:click="fn">按钮</button>
// v-on的简写方法
<button @click="fn">按钮</button>
修饰符
使用:@事件名.修饰符="方法名"
.once- 只触发一次回调
.prevent- 调用event.preventDefault()阻止默认事件// v-on修饰符 如 once: 只执行一次
<button @click.once="fn">只执行一次</button>
// v-on修饰符 如 prevent: 阻止默认事件
<button @contextmenu.prevent="fn">阻止默认事件</button>
事件对象(扩展)
第一种:方法名中采用$event的方式传形参
第二种:直接写事件名 默认第一个参数为event事件参数
任务:
初始化一个Vue实例，
添加一个button按钮
定义data中 name 为hello world
注册button点击事件 获取当前data对象中的name值 输出
添加一个 input文本框
注册input值改变事件 值改变时获取 文本框内容(扩展）
基础-系统指令-v-for(数组)
v-for指令基于一个数组来渲染一个列表
v-for语法item in items或者item of items其中 items 是源数据数组 而 item 则是被迭代的数组元素的别名。
// 第一种用法：
<ul>
<li v-for="item in items">
{{ item.name }}
</li>
</ul>
// data中的数组
data: {
items: [
{ name: '大娃' },
{ name: '二娃' }
]
}// 第二种用法: v-for 还支持一个可选的第二个参数，即当前项的索引
<ul>
<li v-for="(item, index) in items">
{{ index }} {{ item.name }}
</li>
</ul>
注意： v-for写的位置 应该是重复的标签上 不是其父级元素上 需要注意
任务:
初始化一个Vue实例
定义data对象中list:['北京','上海','天津']
将list中的内容 v-for循环在li标签上显示
路径参照代码示例
基础-系统指令-v-for（对象）
第一种用法:
// items 为对象 item为当前遍历属性对象的值
v-for="item in items"第二种用法:
//item为当前遍历属性对象的值 key为当前属性名 index为当前索引的值
v-for="(item, key, index) in items"
任务:
初始化一个Vue实例
定义data对象中 person: { name: '张三', sex:'男',age: 18 }
将person中的内容 v-for循环在li标签上显示
路径参照代码示例
基础-系统指令-v-for（key属性）（非常重要的面试题）
场景:列表数据变动会导致 视图列表重新更新 为了提升性能 方便更新 需要提供一个属性 key// 使用v-for时 建议给每个元素设置一个key属性 （必须加上）
// key属性的值 要求是每个元素的唯一值 （唯一索引值）
// 好处:vue渲染页面标签 速度快
// 数组
<li v-for="(item,index) in arr" :key="index">{{item}}</li>
// 对象
<li v-for="(item,key,index) in json" :key="index">{{item}}-{{key}}</li>
任务:
初始化一个Vue实例
定义data对象中list:['北京','上海','天津']
将list中的内容 v-for循环在li标签上显示
给每个li标签赋值key
基础-表格案例-效果演示
通过分析页面需求,提取案例功能点
功能点:
添加商品
删除商品
搜索商品
列表循环
数据不存在 显示不存在数据
时间格式
基础-表格案例-列表渲染
完成表格案例的列表渲染
路径：
静态页面准备
实例化一个Vue
定义表格数据
采用v-for 循环将静态内容切换为动态内容
采用v-if控制提示消息
效果图
有需要学习的小伙伴可以留言，我偶尔会来看一下的
