java从入门到精通二十五(vue和element 对项目的改进)


vue

我们之前获取前端表单数据的时候,我们需要进行大量的操作。当前我只是进行了浅显的一些认识。

我们用vue可以实现的是一种数据双向绑定的操作。
我们之前实现的mvc的思想只能实现模型到视图的单向展示。不能够实现双向。也就是视图到模型是不可以的。

java从入门到精通二十五(vue和element 对项目的改进)_vue.js
我们可以认为这样是数据模型和视图的结合。for遍历模型数据,然后取出数据在页面上展示。但是,我们我们不能反着来,我们把视图的数据绑定到模型里面。所以我们需要用到vue这个框架。
java从入门到精通二十五(vue和element 对项目的改进)_前端_02
java从入门到精通二十五(vue和element 对项目的改进)_数据_03
图中的 就是我们的数据, View 是视图,也就是页面标签,用户可以通过浏览器看到的内容; Model 和View 是通 对象进行双向绑定的,而ViewModel对象是Vue来实现提供。

Vue 框架很核心的功能就是双向的数据绑定。 双向是指:HTML 标签数据 绑定到 Vue 对象,另外反方向数据也是绑定的。通俗点说就是,Vue 对象的改变会直接影响到 HTML 的标签的变化,而且标签的变化也会反过来影响 Vue 对象的属性的变化。
这样以来,就彻底变革了之前 Dom 的开发方式,之前 Dom 驱动的开发方式尤其是以 jQuery 为主的开发时代,都是 dom 变化后,触发 js 事件,然后在事件中通过 js 代码取得标签的变化,再跟后台进行交互,然后根据后台返回的结果再更新 HTML 标签,异常的繁琐。有了 Vue 这种双向绑定,让开发人员只需要关心 json 数据的变化即可,Vue 自动映射到 HTML 上,而且 HTML 的变化也会映射回 js 对象上,开发方式直接变革成了前端由数据驱动的 开发时代,远远抛弃了 Dom 开发主导的时代了。
————————————————
该段描述源自,非常清晰。让你明白vue到底干了什么事情。

在做任何事情上,都需要先来了解其基本的思想,解决方案。

我们看一段简单的代码。说明一下执行流程。

来看一段代码


<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">

<input v-model="username">

{{username}}

div>

<script src="js/vue.js">script>
<script type="application/javascript">

//1. 创建Vue核心对象
new Vue({
el:"#app",
data(){
return {
username:"888"
}
}

/*data: function () {
return {
username:""
}
}*/
});

script>


body>
html>

我们展开页面。默认数据会是888。
java从入门到精通二十五(vue和element 对项目的改进)_数据_04

首先我们框框里面的内容可以认为是前端页面,我们的vue里面的内容自动映射到了,然后如果我们在这里输入,也可以获取到值。
java从入门到精通二十五(vue和element 对项目的改进)_vue.js_05
所以其实就是按照这个原理实现了数据的双向绑定。

用户在视图上的修改会自动同步到数据模型中去,同样的,如果数据模型中的值发生了变化,也会立刻同步到视图中去。双向数据绑定的优点是无需进行和单向数据绑定的那CRUD(Create,Retrieve,Update,Delete)操作双向数据绑定最经常的应用场景就是表单了,这样当用户在前端页面完成输入后,不用任何操作,我们就已经拿到了用户的数据存放到数据模型中了。

我们要使用vue的话,就需要去导入vue的文件。axios 用于将来我们发送异步请求。这些问价自行下载。
java从入门到精通二十五(vue和element 对项目的改进)_vue.js_06

常见的vue指令

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


<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">

<a v-bind:href="url">点击一下a>

<a :href="url">点击一下a>


<input v-model="url">

div>

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

//1. 创建Vue核心对象
new Vue({
el:"#app",
data(){
return {
username:"",
url:"https://www.baidu.com"
}
}
});

script>


body>
html>

java从入门到精通二十五(vue和element 对项目的改进)_前端_07

绑定事件


<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<input type="button" value="一个按钮" v-on:click="show()"><br>
<input type="button" value="一个按钮" @click="show()">
div>
<script src="js/vue.js">script>
<script>
//1. 创建Vue核心对象
new Vue({
el:"#app",
data(){
return { username:"",
}
},
methods:{
show(){
alert("我被点了..."); }
}
});
script>
body>
html>

未完续更。