自建营销型企业网站优秀的手机网站案例分析

当前位置： 首页 > news >正文

自建营销型企业网站,优秀的手机网站案例分析,深圳公司有哪些,旅游网站建设的目标是什么意思准备Vue.js环境 ① 下载环境#xff1a; javaScript语言的程序包#xff1a;外部js文件 对于Vue来说#xff0c;导入Vue的外部js文件就能够使用Vue框架了。 Vue框架的js文件获取: 官网提供的下载地址#xff1a;https://cdn.jsdelivr.net/npm/vue/dist/vue.js ②导入环境…准备Vue.js环境 ① 下载环境 javaScript语言的程序包外部js文件 对于Vue来说导入Vue的外部js文件就能够使用Vue框架了。 Vue框架的js文件获取: 官网提供的下载地址https://cdn.jsdelivr.net/npm/vue/dist/vue.js ②导入环境 在工程目录下创建script目录用来存放vue.js文件 将官网提供的vue.js文件的内容复制粘贴到本地vue.js文件中 ③ 在html文件当中导入Vue.js文件
!DOCTYPE html htmlheadmeta charsetutf-8title/title/headbody/bodyscript src/pro03-vue/script/vue.js typetext/javascript charsetutf-8/scriptscript typetext/javascript/script /htmlVue.js基本语法声明式渲染 ①HTML代码 !– 使用{{}}格式指定要被渲染的数据 –div idapp{{message}}/div②vue代码 // 1.创建一个JSON对象作为new Vue时要使用的参数 var argumentJson {// el用于指定Vue对象要关联的HTML元素。el就是element的缩写// 通过id属性值指定HTML元素时语法格式是#idel:#app,// data属性设置了Vue对象中保存的数据data:{message:Hello Vue!} };// 2.创建Vue对象传入上面准备好的参数 var app new Vue(argumentJson);运行结果
绑定元素属性 v-bind:HTML标签的原始属性名 ①HTML代码 div idapp!– v-bind:value表示将value属性交给Vue来进行管理也就是绑定到Vue对象 –!– vueValue是一个用来渲染属性值的表达式相当于标签体中加{{}}的表达式 –input typetext v-bind:valuevueValue /!– 同样的表达式在标签体内通过{{}}告诉Vue这里需要渲染 –!– 在HTML标签的属性中通过v-bind:属性名表达式的方式告诉Vue这里要渲染 –p{{vueValue}}/p /div这里的v-bind:value 可以简写成 :value ②Vue代码 // 创建Vue对象挂载#app这个div标签 var app new Vue({el:#app,data:{vueValue:太阳当空照} });运行结果 双向数据绑定 ①HTML代码 div idapp!– v-bind:属性名 效果是从Vue对象渲染到页面 –!– v-model:属性名 效果不仅是从Vue对象渲染到页面而且能够在页面上数据修改后反向修改Vue对象中的数据属性 –input typetext v-model:valuevueValue /p{{vueValue}}/p /div②Vue代码 // 创建Vue对象挂载#app这个div标签 var app new Vue({el:#app,data:{vueValue:太阳当空照} });文本框里面的字母改变这个下面会跟着改变 已经与文本框里的绑定了。 ①注意:value可以省略 input typetext v-modelvueValue /②.trim修饰符 实际开发中要考虑到用户在输入数据时有可能会包含前后空格。而这些前后的空格对我们程序运行来说都是干扰因素要去掉。在v-model后面加上.trim修饰符即可实现。 input typetext v-model.trimvueValue /Vue会帮助我们在文本框失去焦点时自动去除前后空格。 条件渲染 根据Vue对象中数据属性的值来判断是否对HTML页面内容进行渲染。 1、v-if ①HTML代码 div idapph3if/h3div v-ifflag stylebackground: red; height:100px;width:100px /divdiv v-if!flag stylebackground: blue; height:100px;width:100px/div/div②Vue代码 var app new Vue({el:#app,data:{flag:true}});输出结果展示红色的方块。
2、v-if和v-else ①HTML代码 div idapp02h3if/else/h3div v-ifflag stylebackground: red; height:100px;width:100px /divdiv v-elseflag stylebackground: blue; height:100px;width:100px/div /div②Vue代码 var app02 new Vue({el:#app02,data:{flag:true}});注意中见有其他节点会影响else 之后的节点。 3、v-show ①HTML代码 div idapp03h3v-show/h3div v-showflag stylebackground: red; height:100px;width:100px /div /div②Vue代码 var app03 new Vue({el:#app03,data:{flag:true}});注意这个属性是在后面添加了隐藏属性
列表渲染 1、迭代一个简单的数组 div idapp01ul!– 使用v-for语法遍历数组 –!– v-for的值是语法格式是引用数组元素的变量名 in Vue对象中的数组属性名 –!– 在文本标签体中使用{{引用数组元素的变量名}}渲染每一个数组元素 –li v-forfruit in fruitList{{fruit}}/li/ul /div②Vue代码 var app01 new Vue({el:#app01,data:{fruitList: [apple,banana,orange,grape,dragonfruit]} });2、迭代一个对象数组 ①HTML代码 div idapptabletrth编号/thth姓名/thth年龄/thth专业/th/trtr v-foremployee in employeeListtd{{employee.empId}}/tdtd{{employee.empName}}/tdtd{{employee.empAge}}/tdtd{{employee.empSubject}}/td/tr/table /div ②Vue代码 var app new Vue({el:#app,data:{employeeList:[{empId:11,empName:tom,empAge:111,empSubject:java},{empId:22,empName:jerry,empAge:222,empSubject:php},{empId:33,empName:bob,empAge:333,empSubject:python}]} });事件驱动 1、demo字符串顺序反转 ①HTML代码 div idappp{{message}}/p!– v-on:事件类型事件响应函数的函数名 –button v-on:clickreverseMessageClick me,reverse message/button /div②Vue代码 var app new Vue({el:#app,data:{message:Hello Vue! },methods:{reverseMessage:function(){this.message this.message.split().reverse().join();}} });2、demo获取鼠标移动时的坐标信息 ①HTML代码 div idappdiv idarea v-on:mousemoverecordPosition stylebackground:aqua;width: 400px;height: 500px;/divp idshowPosition{{position}}/p /div ②Vue代码 var app new Vue({el:#app,data:{position:暂时没有获取到鼠标的位置信息},methods:{recordPosition:function(event){this.position event.clientX event.clientY;}} });v-on的简化写法 正常写法 button v-on:clicksayHelloSayHello/button简化以后 button clicksayHelloSayHello/button侦听属性 1、提出需求 div idappp尊姓{{firstName}}/pp大名{{lastName}}/p尊姓input typetext v-modelfirstName /br/大名input typetext v-modellastName /br/p全名{{fullName}}/p /div在上面代码的基础上我们希望firstName或lastName属性发生变化时修改fullName属性。此时需要对firstName或lastName属性进行『侦听』。 具体来说所谓『侦听』就是对message属性进行监控当firstName或lastName属性的值发生变化时调用我们准备好的函数。 2、Vue代码 在watch属性中声明对firstName和lastName属性进行『侦听』的函数 var app new Vue({el:#app,data:{firstName:jim,lastName:green,fullName:jim green},watch:{firstName:function(inputValue){this.fullName inputValue this.lastName;},lastName:function(inputValue){this.fullName this.firstName inputValue;}} });练习 1、功能效果演示 第一步显示表格 ①HTML标签 table idappTabletrth编号/thth姓名/thth年龄/thth专业/th/trtr v-foremployee in employeeListtd{{employee.empId}}/tdtd{{employee.empName}}/tdtd{{employee.empAge}}/tdtd{{employee.empSubject}}/td/tr /table②Vue代码 var appTable new Vue({el: #appTable,data: {employeeList: [{empId: 1,empName: tom,empAge: 11,empSubject: java},{empId: 2,empName: jerry,empAge: 22,empSubject: php},{empId: 3,empName: peter,empAge: 33,empSubject: python}]} });第二步显示四个文本框 ①HTML标签 !– 四个文本框、显示收集到的文本框数据的p标签、按钮这三个部分需要共享数据所以要放在同一个app中 – div idappDiv!– 第一部分四个文本框 –编号input typetext v-modelempId /br/姓名input typetext v-modelempName /br/年龄input typetext v-modelempAge /br/专业input typetext v-modelempSubject /br/!– 第二部分显示收集到的文本框数据的p标签 –!– 第三部分按钮 –/div②Vue代码 var appDiv new Vue({el:#appDiv,data:{// 初始值设置空字符串即可empId:,empName:,empAge:,empSubject:} });第三步创建一个p标签 HTML标签 !– 四个文本框、显示收集到的文本框数据的p标签、按钮这三个部分需要共享数据所以要放在同一个app中 – div idappDiv!– 第一部分四个文本框 –编号input typetext v-modelempId placeholder请输入编号 /br/姓名input typetext v-modelempName placeholder请输入姓名 /br/年龄input typetext v-modelempAge placeholder请输入年龄 /br/专业input typetext v-modelempSubject placeholder请输入专业 /br/!– 第二部分显示收集到的文本框数据的p标签 –p{{empId}} {{empName}} {{empAge}} {{empSubject}}/p!– 第三部分按钮 –/div第四步点击添加记录按钮 第一小步给按钮设置事件驱动 [1]HTML标签 !– 四个文本框、显示收集到的文本框数据的p标签、按钮这三个部分需要共享数据所以要放在同一个app中 – div idappDiv!– 第一部分四个文本框 –编号input typetext v-modelempId placeholder请输入编号 /br/姓名input typetext v-modelempName placeholder请输入姓名 /br/年龄input typetext v-modelempAge placeholder请输入年龄 /br/专业input typetext v-modelempSubject placeholder请输入专业 /br/!– 第二部分显示收集到的文本框数据的p标签 –p{{empId}} {{empName}} {{empAge}} {{empSubject}}/p!– 第三部分按钮 –button typebutton v-on:clickaddRecord添加记录/button/div[2]Vue代码 var appDiv new Vue({el:#appDiv,data:{// 初始值设置空字符串即可empId:,empName:,empAge:,empSubject:},methods:{addRecord:function(){console.log(我点击了那个按钮……);}} });②第二小步打印一下文本框输入的数据 var appDiv new Vue({el:#appDiv,data:{// 初始值设置空字符串即可empId:,empName:,empAge:,empSubject:},methods:{addRecord:function(){console.log(我点击了那个按钮……);console.log(this.empId);console.log(this.empName);console.log(this.empAge);console.log(this.empSubject);}} });③第三小步将收集到的数据添加到表格中 addRecord:function(){// 确认单击事件是否绑定成功console.log(我点击了那个按钮……);// 确认是否能够正确收集到文本框数据console.log(this.empId);console.log(this.empName);console.log(this.empAge);console.log(this.empSubject);// 将收集到的文本框数据封装为一个对象var employee {empId:this.empId,empName:this.empName,empAge:this.empAge,empSubject:this.empSubject};// 将上面的对象压入表格数据的employeeList数组appTable.employeeList.push(employee); }