专题网站建设自查整改报告,石家庄网站推广专业,快速将网站seo,运城做网站哪家公司好vue为渐进式框架#xff1a;vmmv 1.易用 有html、css、javascript基础#xff0c;即可学习vue框架 2.高效、开发前端页面 非常高效 1.vue的体积小、压缩完只需要20k的大小 2.超快的虚拟dom操作js中非常多的dom操作#xff0c;vue设计虚拟dom非常快 3.设计时vue底层深度优化 … vue为渐进式框架vmmv 1.易用 有html、css、javascript基础即可学习vue框架 2.高效、开发前端页面 非常高效 1.vue的体积小、压缩完只需要20k的大小 2.超快的虚拟dom操作js中非常多的dom操作vue设计虚拟dom非常快 3.设计时vue底层深度优化 3.灵活、开发灵活、多样性 vue的入门开发 1.下载vue.js并引用 script srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js vue对象的基础认识
vue语法极其严格
空格、标点符号、语法不正确、极小的语法错误都会导致viem视图无法显示 body div id#app {{msg}} //vue中mvvm的数据形参写法 /div /body script const app new Vue({ el:#app, //element 用来给Vue实例定义一个作用范围可操作id为app标签内的内容 data:{ //用来给Vue实例定义一些相关数据 msg:百知欢迎你,期待你的加入!, username:hello Vue!, pwd :12345} }); /script vue中各对象获取参数的写法 body div idapp //对象数据 h4{{user.id}}--{{user.name}}--{{user.age}}--{{user.sex}}--{{user.salary}}/h4 h4 //数组数据 {{hobbies[0]}}--{{hobbies[1]}}--{{hobbies[2]}}--{{hobbies[3]}}--{{hobbies[4]}} /h4 h4 //集合对象 {{users[0].id}}--{{users[0].name}}--{{users[0].age}}-- {{users[0].sex}}-- {{users[0].salary}} /h4 h4 {{users[1].id}}--{{users[1].name}}--{{users[1].age}}-- {{users[1].sex}}-- {{users[1].salary}} /h4 h4 {{users[2].id}}--{{users[2].name}}--{{users[2].age}}-- {{users[2].sex}}-- {{users[2].salary}} /h4 /div /body /html script //创建vue实例 new Vue({ el:#app, data:{ user:{id:1,name:cpx,age:20,sex:true,salary:2000.0}, hobbies:[吃饭,喝水,睡觉,游山,玩水], users:[ {id:1,name:cpx,age:20,sex:true,salary:2000.0}, {id:2,name:zhang3,age:22,sex:false,salary:3000.0}, {id:3,name:li4,age:23,sex:true,salary:4000.0}, ] } }) /script v-text和v-html的使用和区别 div id#app //获取vue对象中key为msg的value h3{{msg}}/h3 //在标签内获取vue对象中key为msg的value值直接获取内部文本信息 h4 v-textmsg/h4 //在标签内获取vue对象中key为content的value值但是如果值中有html标签则可以解析html标签中的信息输出其中的样式和内容 h4 v-textcontent/h4 /div vue中的绑定事件 事件的三要素事件源、事件、监听器 1.事件源发生特定动作的html 2.事件发生特定动作 单击事件、双击事件、鼠标移出移入等 3.监听器当标签上发生特定事件时处理的程序一般在js中称为事件处理函数 vue中绑定事件基本语法,事件处理函数的写法 div idapp //js中事件的写法为οnclickmethod()vue中双向绑定的写法为v-on:事件 名 function()可省略为事件名v-on:clickclickMethod等同于clickclickMethod,且如果方法没有形参列表可省略扩号 button v-on:clickclickMethod/button /div script const app new Vue({ el:#app, //element 用来给Vue实例定义一个作用范围可操作id为app标签内的内容 data:{ //用来给Vue实例定义一些相关数据 msg:百知欢迎你,期待你的加入!, username:hello Vue!, pwd :12345, content:h4 stelycolor:red内容/h4 } methods:{ clickMethod:{ //在methods中定义事件所需要的方法 } }); /script this的使用 div idapp h4 {{msg}}/h4 button clickclickMethod单击事件/button button dbclickdbclickMethod(名字想好了)双击事件/button /div script const app new Vue({ el:#app, //element 用来给Vue实例定义一个作用范围可操作id为app标签内的内容 data:{ //用来给Vue实例定义一些相关数据 msg:百知欢迎你,期待你的加入! username:名字没想好 } methods:{ clickMethod(username){ //在methods中定义事件所需要的方法 this.msg改变后的数据//通过this可调用data中双向绑定的数据 this.usernameusername; }, dbclickMethod(username){ //通过this可调用methods中的方法 this.clickMethod(username); } } }); /script v-show和v-if、v-bind的使用 v-show 底层通过先创建此标签然后控制标签css样式的display属性实现页面原始展示或隐藏 v-if 底层通过控制dom树的元素节点实现增删改查操作页面元素展示或隐藏 v-show和v-if的选择 v-show有更高的初始渲染通过css样式的display实现隐藏需要频繁切换则使用 v-if有更高的切换消耗通过删除、添加dom元素运行时条件很少改变则使用v-if v-bind可操作标签中的css样式属性例 //v-bind img v-bind:widthwidth v-bind:heightheight v-bind:srcsrc mouseoverchangeImage1 mouseoutchangeImage2/ script //创建vue实例 let app new Vue({ el:#app, //用来指定vue实例的作用范围 data:{//用来给vue实例绑定数据 msg:hello , //虽然还是写死的路径 但是根据双向绑定的原理 将来通过修改属性的值改变图片路径 src:images/1.jpg, width:170, height:200 } }) v-for的使用 v-for遍历对象: 标签名 v-for(value,key,index) in vue实例的data属性中的哪个变量/标签名 span v-for(value,key,index) in user {{index}}--{{key}}--{{value}}br/ /span v-for遍历数组: 标签名 v-for(item,index) in vue实例的data属性中的哪个变量 ul li v-for(item,index) in hobbies{{index1}}-{{item}}/li /ul v-for遍历集合: 标签名 v-for(item,index) in vue实例的data属性中的哪个变量 table border1px cellspacing0 width100% tr aligncenter td序号/td td编号/td td名字/td td年龄/td td工资/td td操作/td /tr //集合对象的遍历需要:key便于vue内部做重用和排序 tr v-for(user,index) in users :keyuser.id aligncenter td{{index1}}/td td{{user.id}} /td td{{user.name}}/td td{{user.age}}/td td{{user.salary}}/td tda href删除/a|a href修改/a/td /tr /table
