山西省住房和建设厅网站,服装设计自学零基础,设计一个网页要多少钱,ai做漫画头像网站概念
概念#xff1a;Vue 是一套使用 Javascript 构建用户界面的渐进式框架。
Vue 框架涉及的内容有#xff1a;Vue.js 开发概述、环境搭建、 Vue 指令、组件化应用构建、组件通信、组件嵌套、自定义指令、 自定义过滤器、组件属性、组件的路由、路由跳转。
注意#xff1a…概念
概念Vue 是一套使用 Javascript 构建用户界面的渐进式框架。
Vue 框架涉及的内容有Vue.js 开发概述、环境搭建、 Vue 指令、组件化应用构建、组件通信、组件嵌套、自定义指令、 自定义过滤器、组件属性、组件的路由、路由跳转。
注意Vue 不支持 IE8 及以下版本因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。MVVM开发模式
vuejs 是 MVVM 开发模式。MVVM 是 Model-View-ViewModel 的缩写。MVVM 是一种设计思想。Model
层代表数据模型也可以在 Model 中定义数据修改和操作的业务逻辑View 代表 UI 组件它负责将数据模型转化成 UI 展现出来ViewModel 是一个同步 View 和 Model 的对象。
在 MVVM 架构下View 和 Model 之间并没有直接的联系而是通过 ViewModel 进行交互Model 和 ViewModel 之间的交互是双向的 因此 View 数据的变化会同步到 Model 中而 Model 数据的变化也会立即反应到 View 上。VueJS框架的特点
1. 组件化开发 提高代码的复用率
2. 声明式编程 以前是命令式编程 不再操作复杂的 DOM 树
3. 虚拟 DOM创建并启动项目
1.步骤1 创建 vue 项目指令npm init vuelatest 创建项目指定项目名称选择插件2 下载项目依赖npm i3 启动项目npm run dev
2.项目概要1 scr文件夹中包含1 assets放置图片资源字体等静态文件2 components放置组件3 App.vue根组件/单文件组件1 template标签组件模板决定页面显示内容包含且必须至少包含一个根元素/标签2 style标签组件样式3 script标签组件 js 逻辑2 main.js文件入口文件插值表达式
语法tag{{变量/表达式}}/tagtemplatediv idlistdiv iditem v-for(item,index) in list :keyindeximg :srcitem.pic altp{{item.name}}/p-------------------------插值表达式使用双层花括号包裹住数据模型中的变量用于标签内容区也就是标签之间/div/div
/template指令
1.列表渲染1要点1 key 属性的作用key 属性主要用在 Vue 的虚拟 DOM 算法在新旧 nodes 对比时辨识 VNodes如果不使用 keyvue 会使用一种最大限度减少动态元素并且尽可能尝试就地修改/复用相同类型元素的算法而使用 key 时它会基于 key 的变化重新排列元素顺序并且会移除/销毁 key 不存在的元素。在进行插入或者重置顺序时使用 key 属性可以让 diff 算法更高效提高渲染效率--重要点2 特点列表渲染又称循环渲染v-for 指令放在哪个元素上 就会根据数组的长度 n 最终出 n 个元素包括内部的子元素 形成一个列表 通过 key 属性给渲染出来的每个列表元素绑定一个唯一索引 避免 vue 的警告3 注意1 该语法不能忘记加上 key属性值且 key 的属性值具有唯一性2 v-for 语法遍历数组的元素必须在添加 v-for 的标签内部使用在其外部使用则无法渲染4 列表渲染/循环渲染语法div v-for(元素,下标) in 数组 v-bind:key下标5 导入本地图片语法本地图片需要从 assets 导入才能使用import 名称 from 路径data 必须是个函数 必须返回一个{}data 中返回的数据是可以在组件模板 template 中使用的其次拼写必须准确否则无法加载data中定义的所有变量都是响应式数据, 只要在任何地方修改了响应式数据的值, 当前组件都会自动更新( 当前组件模板中的所有代码都会重新执行 )-------vue框架的核心思想: 数据驱动视图更新--重要点2代码演示语法div v-for(item,index) in 数组 v-bind:keyindex案例templatediv classlistdiv classitem v-for(item,index) in arrlist :keyindeximg :srcitem.pic altdiv classname {{ item.name }} /div/div/div/template导入本地图片本地图片需要从assets导入才能使用语法import 名称 from 路径import pic from ./assets/pic.pngexport default {data(){----------------data必须是个函数, 必须返回一个{}data中返回的数据是可以在组件模板template中使用的其次拼写必须准确否则无法加载return {arrlist:[{ name:嗨购超市,pic },{ name:数码电器,pic },{ name:嗨购服饰,pic },{ name:嗨购生鲜,pic },{ name:嗨购到家,pic },{ name:充值缴费,pic },{ name:9.9元购,pic },{ name:领券,pic },{ name:领金贴,pic },{ name:plus会员,pic }]}}}/script2.属性绑定1要点1 语法tag v-bind:属性名变量类属性值/tagv-bind:可以简写成 :2 使用场景当属性值为变量或需要运算的时候需要在属性名前面加上v-bind:或者:2代码演示语法v-bind:-------------可以简写成 :------当属性值为变量或需要运算的时候需要在属性名前面加上v-bind:或者:templatediv classlistdiv classitem v-for(item,index) in arrlist :keyindeximg :srcitem.pic altdiv classname {{ item.name }} /div/div/div/template3.条件渲染1要点1 v-if条件渲染控制标签的显示/隐藏 是通过控制标签的插入与删除来实现标签的显示/隐藏 2 v-show条件渲染控制标签的显示/隐藏 是通过控制标签添加以及去除display:none样式值来实现标签的显示/隐藏 3 语法1 v-if条件表达式v-elsev-else 指令不能直接添加给列表渲染的元素因后期元素渲染成多个会造成歧义2 v-show条件表达式在元素需要频繁切换的场景下 建议使用 v-show它的性能好一些2代码演示templatediv classapph1 {{ num }} /h11.v-if 条件渲染引号内条件成立则渲染该条语句的元素不成立则渲染v-else的元素div v-ifarr.length 0 classempty列表加载中.../divdiv v-else classbox2.v-show条件渲染引号内条件成立则正常渲染元素条件不成立则自动为该元素添加display:none属性使之隐藏div v-showarr.length 0 classempty列表加载中.../divdiv v-for(item,index) in arr v-bind:keyindex --------当arr数组为空时依照arr元素个数循环渲染的元素默认隐藏在浏览器控制台看不到不予渲染div classitem/divspan/span{{ index 1 }} {{ item }}/divh1 {{ obj.name }} {{ obj.age }} /h1/div /template4.渲染到元素内容1要点1 v-html 渲染到元素内容 拥有 html解析2 v-text 渲染到元素内容 没有 html解析会直接把标签本身显示出来3 v-html效果类似于原生js的innerhtmlv-text的效果则类似于原生js的innertext2代码演示scriptexport default {data(){return {title:今天开始学习bvuejs/b,num:666,arr:[ ],obj:{ name:张三,age:30 }}}}/scripttemplatediv classapph1 {{ title }} /h1--------title在data()的赋值包含html标签想要将html标签的效果展示出来插值表达式是做不到的div v-htmltitle /div-------v-html可以将其属性值title的html标签的效果渲染出来效果类似于原生js的innerhtmldiv v-texttitle /div-------v-text也可以将属性值title渲染出来但他没有html解析会将标签本身显示出来效果类似于原生js的innertexth1 {{ num }} /h1/template5.双向数据绑定1要点1 v-model 双向数据绑定指令, 当输入的内容发生改变输入的内容会实时保存在对应的变量中2 v-model 双向数据绑定指令, 当对应的变量发生改变改变后的内容会实时显示在输入框中3 只有表单元素可以输入内容故该指令只用于表单元素4 语法v-model变量名2代码演示scriptexport default {data(){return {phone:,pass:,check:false}},methods:{login(){console.log( this.phone, this.pass, this.check );if( !this.check ){ alert(请勾选协议!)}},}}/scripttemplatediv classappdiv classlineinput v-modelphone typetext placeholder输入手机号---------通过v-model绑定input输入内容和组件实例中的变量可以做到变量值实时同步给input输入框或者input输入内容实时存储在变量中/divdiv classlineinput v-modelpass typetext placeholder输入密码/divdiv classlineinput typecheckbox v-modelcheck 勾选协议---------v-model还可以绑定input复选框或者单选框是否被选中的状态属性实时监测选项是否被选中如果选中check属性获取true值反之获取false值/divbutton clicklogin登陆/button/div/template
6.事件绑定1要点注意v-on:去掉on的事件类型 绑定点击事件 , 可以简写为 去掉on的事件类型 也即用可以代替v-on:语法v-on:去掉on的事件类型事件绑定函数名称如果需要传参事件绑定函数名称后面需要带上括号2代码演示scriptexport default {data(){return {phone:,pass:,check:false}},methods:{---------------------------定义方法(函数) login(){----------------该写法等同于login:function(){}console.log( this.phone, this.pass, this.check );if( !this.check ){ alert(请勾选协议!)}}}}/scripttemplatediv classappdiv classlineinput v-modelphone typetext placeholder输入手机号/divdiv classlineinput v-modelpass typetext placeholder输入密码/divdiv classlineinput typecheckbox v-modelcheck 勾选协议/divbutton clicklogin登陆/button----------绑定函数可以用代替v-on:,这是函数绑定的简化写法/div/template7.this1概念1 含义this表示 当前组件实例( 当前组件的对象 )通过this关键字, 可以拿到当前组件实例身上的所有属性和方法2 使用规则1 data中定义的数据在组件模板template中使用可以加this也可以不加2 data中定义的数据在组件js逻辑script中使用必须加上this2代码演示scriptexport default {data(){return {phone:,pass:,check:false}},methods:{login(){console.log( this.phone, this.pass, this.check );--------script标签之间的this必须加上if( !this.check ){ alert(请勾选协议!)}},xxx(){}}}/scripttemplatediv classappdiv classlineinput v-modelphone typetext placeholder输入手机号----------------template标签之间的属性可以不加this/divdiv classlineinput v-modelpass typetext placeholder输入密码/divdiv classlineinput typecheckbox v-modelcheck 勾选协议/divbutton clicklogin登陆/button/div/template7.案例1事件高亮小案例思路高亮的控制思路: 点击时保存当前点击的按钮下标(索引), 然后根据保存的按钮下标判断哪个按钮需要高亮代码逻辑触发点击事件将被点击元素的下标index通过形参i传入绑定函数然后保存在设定的变量currentIndex中相当于改变了currentIndex的值而currentIndex属性是date中的响应式数据该变量值的改变会使当前组件模板中的所有代码都会重新执行也即更新而在重新执行时属性class中active值只有在下标index值与变量currentIndex相等的元素上才为true也就是说只有数组中唯一的下标等于currentIndex的元素才有classactive属性而我们在组件样式中给定的专属于.btn.active元素的特殊高亮样式也会被渲染给具有classactive属性的这个元素也就实现了点击高亮的效果。templatediv classtabbardiv clickhandleClick(index) v-for(item,index) in btns :keyindex :class{btn:true , active: this.currentIndex index }-------------------当index的值等于currentIndex时active的值为trueimg :srcitem.pic altdiv classname{{item.name}}/div/div/div/template2分类切换高亮小案例templatediv classboxdiv classlist渲染一级分类列表div clickhandleClick(index) v-for(item,index) in list :keyindex :class{ cate:true, active: currentIndex index }{{ item.name }}/div/divdiv classsublist渲染二级分类列表div classcate v-for(item,index) in list[currentIndex].list :keyindex------此处使用currentIndex响应式数据的值作为一级数组list的下标索引对应的二级数组进行对应分支的渲染{{ item.name }}/div/div/div/templatescriptvue框架的核心思想: 数据驱动视图更新 export default {data(){return {list:[{ name:手机,list:[ { name:苹果手机 },{ name:小米手机 } ]},{ name:家电,list:[ { name:苹果家电 },{ name:小米家电 } ]},{ name:口红,list:[ { name:苹果口红 },{ name:小米口红 } ]},],currentIndex:0}},methods:{handleClick(i){this.currentIndex i;-----------------------保存下标( 修改currentIndex这个响应式数据的值 )}}}/scriptstyle.box{display: flex;}.list .cate{line-height: 40px;padding: 0 15px;}.list .cate.active{background-color: #ccc;border-left: 2px solid red;}/style
