网站这么做,给网站开发一个计算器功能,昆明著名网站建设,手机网站有什么好处Vue 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建#xff0c;并提供了一套声明式的、组件化的编程模型#xff0c;帮助你高效地开发用户界面。无论是简单还是复杂的界面#xff0c;Vue 都可以胜任。
一 vue.js的导入及使用
vue安装…Vue 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建并提供了一套声明式的、组件化的编程模型帮助你高效地开发用户界面。无论是简单还是复杂的界面Vue 都可以胜任。
一 vue.js的导入及使用
vue安装有三种方式 1.独立版本我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 script 标签引入 2.使用 CDN 方法 3.NPM 方法 由于国内CDN都不是很稳定 npm安装又很慢一般都会使用淘宝镜像相对而言都比较麻烦因此我们这里使用第一种方法也就是直接通过script标签引用。
我们可以直接从v2.vuejs.org/js/vue.min.js下载也可以通过本文下载资源。
下载完成后我们就可以得到一个js文件。它的使用方式和其他js文件是一样的我们可以在VS code中创建一个html页面通过 script引入。 接下来我们需要定义一个vue对象并指定其接管的对象需要注意这里的 script需要在body之后。
script// 定义vue对象new Vue({el:#app, // vue接管的对象data:{} ,methods: {}})
/script el所指定的就是vue接管的对象可以是id也可以是classdata内是各种数据信息methods存放的是各种函数。 接下来让我们简单测试一下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titlevue快速入门/titlescript srcjs/vue.js/script
/head
bodydiv idappinput typetext v-modelmessagediv{{message}}/div/div
/body
script// 定义vue对象new Vue({el:#app, // vue接管的对象data:{message:Hello Vue} ,methods: {}})
/script
/html 如果你的页面是这样就说明引入成功了。细心的小伙伴们可能发现当我们在输入框中输入内容时下面div中的内容也随着改变了这就是v-model的作用实现双向绑定。
二 vue模板语法
1.文本插值
使用 {{...}}双大括号可以插入文本文本内容需要提前在data中定义如上例中的message
div idappp{{ message }}/p
/div2.Html
使用 v-html 指令用于输出 html 代码。
div idappdiv v-htmlmessage/div
/divscript
new Vue({el: #app,data: {message: p我是需要插入的内容/p}
})
/script 3.属性
使用 v-bind 指令为标签绑定属性值如设置样式等。
通常我们直接省略掉v-bind div idappa v-bind:hrefurl跳转到我的csdn/aa :hrefurl跳转到我的csdn/a/div 4.双向绑定
使用v-model实现在表单元素上创建数据双向绑定。
div idappinput typetext v-modelmessagediv{{message}}/div
/div5.事件绑定
v-on为标签绑定事件。可以简写为。 6.条件判断
v-if,v-else-if,v-else 条件性的渲染某元素只渲染满足条件的元素
v-show 根据条件切换元素的display样式决定是否展示该元素
div年龄input typetext v-modelage经判断为span v-ifage35年轻人/spanspan v-else-ifage60 age35中年人/spanspan v-else老年人/span
/div
div年龄input typetext v-modelage_2经判断为span v-showage_235年轻人/spanspan v-showage_260 age_235中年人/spanspan v-showage_260老年人/span
/div 7.循环遍历
v-for 列表渲染遍历元素或者对象的属性。index为数组元素的索引值从0开始。
div v-for(arr,index) in arr{{index 1}}:{{arr}}/div 三 使用vue语句实现简单的表格渲染
要求说明现有数据如下请将该数据以表格的形式展现出来如 users:[{name:Tom,age:18,gender:1,score:78},{name:Rose,age:16,gender:2,score:90},{name:Jerry,age:16,gender:2,score:59},{name:Jack,age:18,gender:1,score:90}
] 分析:
观察数据我们可以发现数据集是一个4行4列的表格再加上编号值和等级评定我们需要构建一个5*6的表格但是表格除表头外其他数据都可以从数组中获取到因此我们可以只创建一个2*6的表格使用v-for循环遍历数组内容得到表格的主体部分。
但是我们又发现性别gender部分数组中是使用1和2进行标识的但是我们肯定需要显示出来“男”和“女”该怎么进行转换呢我们自然想到了v-if和v-show这里使用两者中的任何一个都可以。同样等级评定也是需要我们根据成绩进行一下条件判断。
分析结束接下来上代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title渲染表格内容/titlescript srcjs/vue.js/script
/head
bodydiv idapptable border1 cellspacing0 width60%trth编号/thth姓名/thth年龄/thth性别/thth成绩/thth等级/th/trtr aligncenter v-for(user,index) in userstd{{index 1}}/tdtd{{user.name}}/tdtd{{user.age}}/tdtdspan v-ifuser.gender 1男/spanspan v-else女/span/tdtd{{user.score}}/tdtdspan v-showuser.score 90优秀/spanspan v-showuser.score 60 user.score 90及格/spanspan v-showuser.score 60不及格/span/td/tr/table/div
/body
scriptnew Vue({el:#app,data:{users:[{name:Tom,age:18,gender:1,score:78},{name:Rose,age:16,gender:2,score:90},{name:Jerry,age:16,gender:2,score:59},{name:Jack,age:18,gender:1,score:90}]} ,methods: {}})
/script
/html
总结虽然从这个案例的代码量上看似乎使用vue与单纯使用html创建表格几乎没什么区别我们虽然少写了3行表格的内容但是v-ifv-for....写了一堆还需要去专门学习是不是觉得很亏呢但是我们的数组中只有4个用户数据在实际应用中用户数据量可远远不止这么多哪怕仅仅以20人的班级为例录入数据就能录入一天了吧。而使用vue我们只要改变数组中的内容就可以了减少了工作量不说后期更新维护时无论新增还是删减都容易了很多。
