自建营销型企业网站,免费wordpress商城主题下载地址,重庆百度网站推广,无锡做网站设计准备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);
}
