餐饮网站建设目标,上海优化网站价格,.net网站空间,出售淘宝店铺的平台目录 一、Vue框架1.1渐进式框架1.2 Vue的版本 二、VueAPI的风格三、Vue开发准备工作四、模板语法文本插值属性绑定条件渲染列表渲染key管理状态 四、事件处理定义事件事件参数事件修饰符 五、数组变化侦测 一、Vue框架
渐进式JavaScript框架#xff0c;易学易用#xff0c;性… 目录 一、Vue框架1.1渐进式框架1.2 Vue的版本 二、VueAPI的风格三、Vue开发准备工作四、模板语法文本插值属性绑定条件渲染列表渲染key管理状态 四、事件处理定义事件事件参数事件修饰符 五、数组变化侦测 一、Vue框架
渐进式JavaScript框架易学易用性能出色适用场景丰富的Web前端框架 功能是构建用户界面 基于标准的HTML、CSS和JavaScript提供了一套声明式的、组件化的编程模型帮助高效得开发用户界面
1.1渐进式框架
渐进式框架Vue是一个框架也是一个生态功能覆盖了大部分前端的常见需求Vue的设计非常注重灵活性和可以被逐步集成的特点 不同方式使用Vue 1、无需构建步骤渐进式增强静态的HTML 2、在任何页面作为 Web components嵌入 3、单页应用SPA 4、全栈/服务端渲染SSR 5、jamstack/静态站点生成SSG 6、开发桌面端、移动端、WebGL甚至是命令行终端中的界面
1.2 Vue的版本
Vue的版本开发中Vue可以选择两大版本Vue2和Vue3老项目一般Vue2新项目一般选择Vue3 Vue3涵盖了Vue2的知识体系当然Vue3增加了很多新的特性
官方文档cn.vuejs.org
二、VueAPI的风格
主要两种风格选项式APIVue2和组合式APIVue3 不同底层提供的两个接口基础概念和知识是通用的 当生产项目中 不需要使用构建工具或者在低复杂度的场景中用Vue的时候推荐用选项式API 当打算用Vue构建完整的单页应用推荐采用组合式API单文件组件
三、Vue开发准备工作
查看vue版本
node -v
创建Vue项目
npm init vuelatest
进入项目
cd vue-base
安装
npm install
运行项目
npm run devvite.config.js Vue配置文件 package.json 信息描述文件 index.thml 入口html文件 node_modules Vue项目运行的依赖文件 public 资源文件夹 README.md 注释文件
四、模板语法
Vue使用的是基于HTML的模板语法可以以声明式的将组件实例绑定到DOM中所有的VUE语法都是语法层面合法的HTML可以被符合规范的浏览器和HTML解析器解释
文本插值
双大括号进行数据绑定文本插值 每个绑定支持单一表达式
templatep{{msg}}/pp{{hello}}/pp{{num123}}/pp{{ok?Yes:No}}/pp{{message.split().reverse().join()}}/p
/templatescript
export default {data(){return{msg:神奇的语法,hello:hello world,num:10,ok:Yes,message:大家好呀}}
}
/script属性绑定
双大括号不能在HTML attribute中使用 想要响应式绑定一个attribute应该使用v-bind指令
template
!-- 用v-bind 调整属性 同时可以用:简写 undefined 那么就是消除对应的属性--
div v-bind:classdynamicClass v-bind:iddynamicId :titledynamicTittle{{msg}}111/div
!-- 一次性绑定多个--
div v-bindobjectOfAttrs/div
/templatescript
export default {name: HelloWorld,data(){return{msg:hello world,dynamicClass:active,dynamicId:APPID,dynamicTittle:undefined,objectOfAttrs:{class:appclass,id:appid}}}
}
/script
条件渲染
templateh3条件渲染/h3div v-ifflag看得见吗/divdiv v-else-if!flag还是看看吧/div
!-- v-show 和 v-if 一样的但是v-if是真实的按条件渲染 切换的时候对监听器和组件销毁与重建 false不会做任何事 true才会去渲染v-show简单 无论条件如何都会渲染 只不过改变的是display的属性v-if 强调的是切换开销 v-show 强调初始渲染开销频繁切换用v-show 运行时捆绑条件少用v-if
--div v-showflag看得见吗/div
/templatescript
export default {data(){return{flag:false}}
}
/scriptstyle scoped/style列表渲染
templateh3列表渲染/h3p v-foritem in names v-bind:keyitem{{item}}/p
!-- index 是默认的下标--p v-for(item,index) in names v-bind:key(item,index){{item}}-{{index}}/p
!-- v-for 不仅仅可以遍历数组 也可以遍历对象--div v-foritem in result v-bind:keyitemp{{item.title}}/pimg :srcitem.url :altitem.id/divdiv v-foritem in result v-bind:keyitemdiv v-for(value,key,index) in item v-bind:key(value,key,index)p{{value}}-{{key}}-{{index}}/p/div/divdiv v-for(value,key,index) in user v-bind:key(value,key,index)p{{value}}-{{key}}-{{index}}/p/div
/templatescript
export default {name: ForDemo,data(){return{names:[a,b,c],result:[{id:101,title:标题1,url:https://www.baidu.com/img/PC_wenxin_1142bc061306e094e6eddaa3d9656145.gif},{id:102,title:标题2,url:https://www.baidu.com/img/PC_wenxin_1142bc061306e094e6eddaa3d9656145.gif},{id:103,title:标题3,url:https://www.baidu.com/img/PC_wenxin_1142bc061306e094e6eddaa3d9656145.gif}],user:{name:kewin,age:18}}}
}
/script
key管理状态
Vue默认按照就地更新策略渲染元素列表 当顺序改变 vue不会移动dom元素的顺序而是就地更新确保原本指定的索引位置上渲染 为了给vue一个提示方便跟踪每个节点的标识从而重用和重新排序现有的元素需要一个key唯一标志属性
四、事件处理
可以使用v-on指令简写监听DOM事件并且在事件触发的时候执行对应的JavaScript 用法οnclick“methodname”或click“handler” 事件处理器的值可以是内联事件处理器也可以是方法事件处理器
定义事件
templatebutton clickcountAddInline/buttonbutton clickaddCountAddMethod/buttonp{{count}}/p
/templatescript
export default {name: ListenerDemo,data(){return{count:1}},//所有方法函数都放在这里methods:{addCount(){this.countconsole.log(this.count)}}
}
/script事件参数
事件参数可以获取event对象和通过事件传递参数 vue中event对象就是js的event对象 methods:{addCount(e){this.countconsole.log(e.target.innerHTMLAddthis.count)}templatebutton clickcountAddInline/buttonbutton clickaddCount(hello)AddMethod/buttonp{{count}}/pp clickgetNameHanlder(item) v-for(item,index) in names :keyindex{{item}}/p
/templatescript
export default {name: ListenerDemo,data(){return{count:1,names:[张三,李四,王五]}},//所有方法函数都放在这里methods:{addCount(msg){this.countevent.target.innerHTMLaddmsg},getNameHanlder(item){console.log(item)}}
}
/scripttemplatebutton clickcountAddInline/button!-- 可以用event 传event事件参数 --button clickaddCount(hello,$event)AddMethod/buttonp{{count}}/pp clickgetNameHanlder(item) v-for(item,index) in names :keyindex{{item}}/p
/templatescript
export default {name: ListenerDemo,data(){return{count:1,names:[张三,李四,王五]}},//所有方法函数都放在这里methods:{addCount(msg,e){this.counte.target.innerHTMLaddmsg},getNameHanlder(item){console.log(item)}}
}
/script事件修饰符
templateh3事件修饰符/h3
!-- 进行修饰 实现点击但是不跳转--a click.preventclickHandle hrefhttp://www.baidu.com点击进入连接/adiv clickclickDiv
!-- 让事件不冒泡到父元素--p click.stopclickP测试冒泡/p/div
/templatescript
export default {name: ListenerDemo2,methods:{clickHandle(){console.log(被点击了)},clickDiv(){console.log(DIV)},clickP(){console.log(P)}}
}
/scriptstyle scoped/style五、数组变化侦测
templateh3数组变化侦听/h3ulli v-for(item,index) of names :keyindex {{item}}/li/ul
!-- Vue可以侦听响应式数组的变更方法 并且在调用的时候触发相关的更新push() 添加pop() 取出最上面的一个shift()unshift()splice()sort()reverse() 逆置
--button clickaddListHandle1reverse/button
!--使用替换数组的方法来更新filter()concat()slice()直接对原数组进行变更
--button clickaddListHandle2itemupdate/button
/templatescript
export default {name: ArrayListenerDemo,data(){return{names:[张三,李四,王五]}},methods:{addListHandle1(){this.names.reverse()},addListHandle2(){//直接this.names.concat([123])不会引起UI更新this.namesthis.names.concat([123])}}
}
/script
