正规的网站制作在哪里,个人网站是啥,wordpress仪表盘加速,滨江区住房和城乡建设局网站2023年8月3日14:56:49
Vue_01_note
Vue是什么#xff1f; 概念#xff1a;Vue是一个用于 构建用户界面 的 渐进式 框架 构建用户界面#xff1a;基于 数据 动态 渲染 页面渐进式#xff1a;循序渐进的学习框架#xff1a;一套完整的项目解决方案#xff0c;提升开发效率…2023年8月3日14:56:49
Vue_01_note
Vue是什么 概念Vue是一个用于 构建用户界面 的 渐进式 框架 构建用户界面基于 数据 动态 渲染 页面渐进式循序渐进的学习框架一套完整的项目解决方案提升开发效率 理解记忆规则 ----- 官网
01_创建Vue实例
Vue核心包
在线开发版本 script srchttps://cdn.jsdelivr.net/npm/vue2.7.14/dist/vue.js/script 标签引入。
步骤——四步 创建Vue实例初始化渲染 1.准备容器就是Vue所管理的范围 2.引包开发版本包 / 生产版本包 3.创建实例 4.添加配置项 完成渲染 代码示例 !-- 第一、创建一个Vue容器 --div idapp!-- 这里将来会编写一些用于渲染的代码逻辑 --{{ msg }}a href# {{ count }}/a/div!-- 第二、引入开发版本的包 这包含注释个警告--script srchttps://cdn.jsdelivr.net/npm/vue2.7.14/dist/vue.js/scriptscript// 一旦引入 VueJs核心包在全局环境就有了 Vue 构造函数// 第三、创建一个 Vue 实例const app new Vue ({// 第四、通过 el 配置一个选择器指定 Vue 管理的是哪个盒子el: #app,// 通过 data 提供数据data: {msg: hello Vue,count: 666}})/scriptel 指定挂载点选择器指定控制的是哪个盒子data 提供数据 Vue实例 app 管控的范围 仅限于在挂载点指定的那个容器盒子。 02_差值表达式
差值表达式是一种Vue的模板语法
作用利用表达式进行插值渲染到页面中
什么是表达式呢 是可以被求值的代码JS引擎会将其计算出一个结果
语法
语法 {{ 表达式 }} 双花括号 “只要能求出结果的表达式都可以往里面丢”但不能使用语句 。可以这样理解语句是代码块表达式是有结果的式子注意点 (1) 使用的数据必须存在data 2 支持的是表达式、而非语句例如if for… 3 不能在标签属性中使用{{}} 差值表达式 代码示例 !-- 这是一个 Vue 容器 --div idapp!-- 使用差值表达式- 将data中的数据渲染出来 --span{{ username }}/spanbrspan{{ username.toUpperCase() }}/spanbrspan{{ username 加油}}/spanbrspan{{ age 18 ? 成年 : 未成年}}/spanbrspan{{ friend.name }}/spanspan{{ friend.desc }}/span/div!-- 既然是差值表达式那么只要有结果的式子都可以放在{{}}里面进行渲染 --script// 这是一个 Vue 实例const app new Vue ({el: #app,data: {username: liubuzhu,age: 18,friend: {name: Mrliu,desc: 热爱学习 Vue}}})/script 03Vue 核心特性响应式
响应式 数据发生变化视图自动更新。
data中的数据是会被添加到实例上 也就是实例对象 app 1.访问数据 :实例.属性名 2.修改数据 :实例.属性名 新的值 原理数据变化了 - Vue监听到数据修改 — 自动更新视图DOM操作
使用 Vue 开发 — 专注于业务核心逻辑 即可视图会自动渲染。 04 Vue 指令v-html
Vue 中的指令特征是 v- 开头 注意他是特殊的 属性 和普通的属性不同。
语法
语法v-指令 表达式
可以理解为差值表达式 innerTEXT v-html innerHTML
代码示例 div idapp!-- 语法直接等于一个表达式 --div v-htmlmsg!-- {{ msg }} 插值表达式不具备解析标签的能力 --!-- 差值表达式 innerTEXT v-html innerHTML --/diva href/a/divscriptconst app new Vue({el: #app,data: {msg: a hrefhttp://www.itheima.com黑马程序员/a}})/script 不同的指令—— 解决不同的需求功能不同 0_5Vue 指令v-show 和 v-if
作用
v-show控制元素的显示和隐藏 , v-show只是简单的控制隐藏本质是在displaynone属性值而已.v-if控制元素的显示隐藏条件渲染, v-if是条件渲染隐藏的时候元素都没有了本质是判断条件控制元素的 创建 和 移除.
语法
v-showv-show“表达式” 注意 表达式值为 true显示 false隐藏。v-if v-if“表达式” 注意 表达式值 true显示 false隐藏。
使用场景及原理
使用场景v-show适合频繁切换的场景 。 原理切换displaynone。v-if适合不频繁场景要么显示要么隐藏。 原理基于条件判断是否创建或移除元素节点。
代码示例 div idappdiv v-showflag classbox我是v-show控制的盒子/divdiv v-ifflag classbox我是v-if控制的盒子/div/div
script// 创建Vue实例const app new Vue({el: #app,data: {flag: true}})
/script0_6 Vue 指令 v-else 和v-else-if
作用
作用 辅助 v-if 进行判断渲染 语法
语法 v-else v-else-if“表达式” 注意v-else需要紧挨着 v-if 一起使用不能单独使用。 代码示例 div idappp v-ifgender 1性别 男/pp v-else性别 女/phrp v-ifscore 90成绩评定A 奖励一台电脑/pp v-else-ifscore 70成绩评定B 奖励周末郊游/pp v-else-ifscore 60成绩评定C 奖励零食礼包/pp v-else成绩评定D 惩罚一周不能玩手机/p/divscriptconst app new Vue({el: #app,data: {gender: 1,score: 10}})/script 0_7Vue 指令 v-on 内联语句
作用
作用 注册事件 添加监听 提供处理逻辑 语法 v-on:事件名“内联语句”简写方式v-on: click处理逻辑 什么是内联语句呢 button v-on:clickcount按钮/button v-on:事件名字是可以自己决定的不单单一个。 代码示例 !-- 创建容器 --div idapp!-- 这里鼠标点击触发事件 --button v-on:clickcount---/buttonspan {{ count }}/span!-- 这里鼠标划入触发事件 --button v-on:mouseentercount/button/divscript// 创建一个 Vue 实例 appconst app new Vue({el: #app,data: {count: 100}}) /script0_8 Vue 指令 v-on methods中的函数名 作用
作用注册事件 添加监听 提供处理逻辑 语法
语法v-on :事件名“methods中的函数名”简写 事件名 button clickfn-/button 在 Vue 实例对象中 data 提供数据 那么methods 给我们提供方法 在methods中的所有函数this指向的都是当前 Vue 的实例对象。 代码示例 div idappbutton clickfn点击切换显示隐藏/buttonh1 v-showisShow Vue.Js/h1
/divscriptconst app new Vue({el: #app,data: {isShow: true},methods: {fn () {// methods里面的所有函数this指向的都是Vue实例this.isShow !this.isShow}}}) 切记 methods里面的所有函数this指向的都是Vue实 0_9 Vue 指令 v-on 调用传参 语法
语法 button clickfn实参-/button 代码示例 !-- 创建一个Vue容器 --div idapph3小黑自动售货机/h3button clickbuy(5) classbtn1可乐5元/buttonbutton clickbuy(10) classbtn2咖啡10元/button!-- button clickbuy(8) classbtn2牛奶8元/button --span银行卡余额为 {{ money }}元/span/divscript// 创建Vue实例const app new Vue({el: #app,data: {money: 100},methods: {buy (price) {this.money this.money - price}}})/script 切记methods里面的this指向实例对象 10_Vue 指令 v-bind 作用
作用 动态的设置HTML的标签属性 - src url title … 语法
语法 v-bind属性名“表达式”简写 v-bind:src :src 省略了v-bind 代码示例 !-- 创建Vue容器 --div idappimg :srcimgUrl:titlemsg alt/divscript// 创建一个 Vue 实例对象const app new Vue({el: #app,data: {imgUrl: ./imgs/10-01.png,msg: hello 波仔}})/script 11_切换图片案例 需求点击上一张或下一张进行图片的更换 核心思路
将图片数据存放在数组中。准备好一个数组下标变量初始值为0 。使用 v-bind 指令动态的修改 src 的内容。解决晓得bug当图片位于第一张和最后一张的时候需要将对应的按钮进行隐藏由于需要频繁显示隐藏的我们使用 v-show来实现。我们将v-show表达式的值设置为 数组 下标 0 意思就是当下标大于0 就显示否则隐藏。反之当数组下标 数组.length - 1 就显示否则隐藏。 代码示例 !-- 创建 Vue 容器--div idappbutton v-showcount 0 clickcount--上一页/buttonbrimg :srcarrUrl[count] altbrbutton v-showcount arrUrl.length - 1 clickcount下一页/button/div!-- 创建 Vue 实例对象 --scriptconst app new Vue({el: #app,data: {// 2、准备数组下标count: 0,// 1、将图片存于数组中arrUrl: [./imgs/11-00.gif,./imgs/11-01.gif,./imgs/11-02.gif,./imgs/11-03.gif,./imgs/11-04.png,./imgs/11-05.png,]}})/script 12_Vue 指令 v-for
作用
作用基于数据循环多次渲染整个元素 - 数组、对象、数字… 语法 语法 v-for“(itemindex) in 数组” item : 每一项 当只有一个参数的时候可以省略小括号index 下标 不需要下标的时候可以省略 高阶语法都有个特性就是会根据数据来操作的例如数据元素有几个我就遍历几次。 代码示例 !-- 创建容器 --div idapph3小黑水果店/h3ulli v-for(item,index) in list{{ item }} - {{ index }}/li/ul/div!-- 创建Vue实例对象 --scriptconst app new Vue({el: #app,data: {list: [西瓜,苹果,鸭梨,榴莲]}})/script 里面可以通过插值表达式来跟新内容哦 13_小黑的书架案例
需求通过 v-for指令 遍历数组中的数据到书架中然后动态的进行渲染并且能够实现删除功能注意 Vue 是数据驱动数据变化视图自动更新。
核心思路
通过v-for将数据动态的渲染到容器中使用插值表达式将数据跟换使用methods方法创建点击删除函数当我们点击删除通过 v-for里面的 item得到 item.id拿到当前元素的id然后将id通过v-on参数传递给我们methods方法里面的del函数最后通过数组过滤器 filter方法过滤满足条件的元素并返回新数组记得重新给原数组赋值。
代码示例 !-- 创建Vue容器 --div idapph3小黑的书架/h3ulli v-for(item,index) in booksList :keyitem.idspan{{ item.name }}/spanspan {{ item.author }} /spanbutton clickdel(item.id)删除/button/li/ul/div!-- 创建 Vue 实例 --scriptconst app new Vue({el: #app,data: {booksList: [{id: 1, name: 《红楼梦》, author: 曹雪芹},{id: 2, name: 《西游记》, author: 吴承恩},{id: 3, name: 《水浒传》, author: 施耐庵},{id: 4, name: 《三国演义》, author: 罗贯中},]},methods: {del(id) {// console.log(删除,id)// 使用filter过滤器过滤符合条件的并返回新数组。this.booksList this.booksList.filter(item item.id ! id)}}})/script14_ Vue指令 v-for中的key
语法
语法 :key属性“唯一标识符”li v-for(item,index) in xxx :key唯一值/li 作用
作用 给列表添加唯一的标识。便于 Vue 进行列表项的正确排序复用。 可以理解为当加了keyid就是唯一标识符删除了id也得删除掉位置但是不加key删除了这个id位置只是换了数据而已。 使用v-for一定要加上key属性 注意点
key的值只能是 字符串 或 数字key的值必须具有唯一性推荐使用id作为key唯一不推荐使用index作为key(会变化不对应) 15_ Vue指令 v-model
双向数据绑定视图变化了数据自动更新数据变化了视图自动更新。
作用
作用给表单元素使用 双向数据绑定 —— 可以快速 获取 或 设置 表单元素内容。 语法
语法 v-model“变量” input typetext v-model变量 代码示例 !-- 创建 Vue 容器 --div idapp账户input typetext v-modelusernamebr密码input typepassword v-modelpasswordbrbutton clicklogin登录/buttonbutton clickreset重置/button/div!-- 创建Vue实例 --scriptconst app new Vue({el: #app,data: {username: ,password: },methods: {login () {console.log(this.username,this.password)},reset () {this.username this.password }}})/script 数据变化视图自动更新视图变化数据自动更新 综合案例-记事本功能实现
需求对记事本的增删进行操作、实现统计、和重置要求使用Vue指令实现
核心功能以及步骤 列表渲染 v-for key的设置 {{ }} 差值表达式的使用 删除功能 v-on 调用传参 filter过滤器的使用 覆盖修改原数组 添加功能 v-model绑定 unshift修改数组进行添加 底部统计 和 清空重置
统计数组长度覆盖数组清空列表v-show控制底部的显示和隐藏 代码示例 link relstylesheet href./css/notepad.css /
title记事本/title
/headbody!-- 主体区域 --
!-- Vue容器 --
section idapp!-- 输入框 --header classheaderh1Notepad/h1!-- keyup.enteradd 为指令修饰符 键盘事件 --input v-modeltodoName placeholder请输入任务 classnew-todo /button clickadd classadd添加任务/button/header!-- 列表区域 --section classmainul classtodo-listli classtodo v-for(item,index) in list :keyitem.iddiv classviewspan classindex{{ item.id }}/span label{{ item.name }}/labelbutton clickdel(item.id) classdestroy/button/div/li/ul/section!-- 统计和清空 - 如果没有任务则底部直接不用显示才是最好的--footer v-showlist.length 0 classfooter!-- 统计 --span classtodo-count合 计:strong{{list.length }}/strong/span!-- 清空 --button clickempty classclear-completed清空任务/button/footer
/section!-- 底部 --
script srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/script
!-- script
// 添加功能
// 1、v-model 绑定输入框实时获取表单元素数据的内容
// 2、点击按钮进行新增就是往数组里面添加元素
//------------------------------------------------------------------------------------------------------------
const app new Vue({el: #app,data: {todoName: ,list: [{id: 1, name: 跑步一公里},{id: 2, name: 跳绳100次},{id: 3, name: 打篮球1小时}]},methods: {// 删除功能del (id) {// 判断当前元素的id是否与给定的id不相等。如果满足该条件则保留该元素否则将其过滤掉。this.list this.list.filter(item item.id ! id)},// 添加功能add () {// 输入为空则提示并且退出事件程序if (this.todoName ) {alert(请输入任务名称)return}this.list.unshift({id: new Date,// Date.now()写这个也行name: this.todoName})// 重置输入框文字this.todoName },clear () {this.list []}}
})
// 功能需求 1、列表渲染 2、删除功能 3、添加功能 4、底部统计 和 清空
/script --!-- 创建Vue实例对象 --
scriptconst app new Vue({el: #app,data: {todoName: ,list: [{ id: 1, name: 打篮球1小时 },{ id: 2, name: 跑步1小时 }]},methods: {// 得到iddel(id) {// console.log(id)// 过滤符合条件的重新赋值给数组this.list this.list.filter(item item.id ! id)},add() {if (this.todoName.trim() ) {alert(请输入任务名称)return}this.list.unshift({id: new Date(),name: this.todoName})this.todoName },empty() {this.list []}}})
/script
