Web前端开发—

Web前端开发——Vue概述

前言：

整理下学习笔记，打好基础，daydayup!!!

Vue

Vue是一套前端框架，基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的专注点放在数据上，可以免除原生JavaScript中的DOM操作，简化书写。

Vue的使用方法

使用Vue需要三个步骤：1，引入Vue.js文件；2，在JS代码区创建Vue对象，定义数据模型；3，输出信息。

1，引入Vue.js文件

在官网下载Vue.js文件，并在HTML文件中引入，引入格式如下：

<script src="路径/vue.js"></script>

2，在JS代码区创建Vue对象，定义数据模型

格式如下：

<script>new Vue({el:"#名称"，//id选择器data:{message:"实现的信息"}
})
</script>

3，输出信息

格式如下：

<div id="符号"> //id选择器<input type ="text" v-model="message">{{message}}
</div>

合起来示例如下：

Vue的常用指令

指令	作用
v-bind	为HTML标签绑定属性值，如href,css等
v-model	在表单元素上创建双向数据绑定
v-on	为HTML标签绑定事件
v-if	条件性渲染某元素，判定为true时渲染，否则不渲染
v-else-if	同上
v-else	同上
v-show	根据条件展示某元素，区别在于切换的是display属性的值
v-for	列表渲染，遍历容器的元素或者对象的属性

示例如下：

案例：

通过以下数据，使用vue框架输出成表格

数据如下：

 data: {users: [{name: "Tom",age: 20,gender: 1,score: 78},{name: "Rose",age: 18,gender: 2,score: 86},{name: "Jerry",age: 26,gender: 1,score: 90},{name: "Tony",age: 30,gender: 1,score: 52}]}

思路： 1，设置表格框架；2，把数据导入其中，3，展示界面

操作如下：

<body><div id="app"><table border="1" cellspacing="0" width="60%"><tr><th>编号</th><th>姓名</th><th>年龄</th><th>性别</th><th>成绩</th><th>等级</th></tr><tr align="center" v-for="(user, index) in users" ><td>{{index+1}}</td><td>{{user.name}}</td><td>{{user.age}}</td><td><span v-if="user.gender==1">男</span> <span v-if="user.gender==2">女</span></td><td >{{user.score}}</td><td><span v-if="user.score >=85">优秀</span><span v-else-if="user.score >=60">及格</span><span style="color: red;" v-else>不及格</span></td></tr></table></div></body>
<script src="js/vue.js"></script>
<script>new Vue({el: "#app",data: {users: [{name: "Tom",age: 20,gender: 1,score: 78},{name: "Rose",age: 18,gender: 2,score: 86},{name: "Jerry",age: 26,gender: 1,score: 90},{name: "Tony",age: 30,gender: 1,score: 52}]},methods: {},})
</script>

结果展示：通过vue可以自动加载数据，输出表格