前端框架Vue学习

编程入门行业动态更新时间:2024-10-21 18:56:49

前端<a href=https://www.elefans.com/category/jswz/34/1770644.html style= 框架Vue学习"/>

前端框架Vue学习

前端框架Vue

Vue框架是一套用于构建用户界面的渐进式框架。
采用的是MVVM模式，即：通过视图与模型的双向绑定，简化前端操作。
渐进式：指的是可以选择性的使用该框架的一个或多个组件，不对你的使用进行要求。
那么前端框架三巨头： Vue.js React.js AngularJs

vue.js 的下载（vpm下载）

这里我们通过vpm的方式下载哈，
首先要使用vpm，我们先下载nodejs ,
下载好后我们进去idea，

这样显示，我们就可以了，然后我们的idea就会多一个package.json的文件，进行cmd，进入这个文件，运行脚本就行拉。

这样，vue.js就安装好了。

演示双向绑定与事件处理

创建一个初始化页面

然后进页面，右击检查，然后对app.name进行修改，页面也会发生修改。
然后我们可以使用{{}}获取显示数据
v-model实现双向绑定
v-on演示事件处理

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="../../../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app"><input type="text" v-model="num"><button v-on:click="num++">点我</button><h2>{{name}} 非常酷 有{{num}}个学科</h2>
</div>
<script type="text/javascript">var app = new Vue({el:"#app",data:{name:"junmu",num:1}});
</script>
</body>
</html>

vue实例生命周期及钩子函数（监听函数）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="../../../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">{{msg}}
</div>
<script type="text/javascript">var app = new Vue({el:"#app",data:{msg:"好家伙"},created() {  // 钩子函数  this表示vue实例this.msg = "hello vue.created1.";console.log(this)}});
</script>
</body>
</html>

双向绑定v-model

双向绑定，一定是在视图中修改数据，v-model可以使用的元素有：

input
select
textarea
checkbox
radio
components (Vue中的自定义组件）

演示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="../../../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app"><input type="checkbox" value="Java" v-model="language">Java<br><input type="checkbox" value="C++" v-model="language">C++<br><input type="checkbox" value="Python" v-model="language">Python<br><input type="checkbox" value="Swift" v-model="language">Swift<br><h2>您选择了{{language.join(",")}}</h2></div>
<script type="text/javascript">var app = new Vue({el:"#app",data:{language:[]}});
</script>
</body>
</html>

然后就可以做到以下结果拉，选什么就亮什么

v-on 数据的递增递减

v-on可以响应事件，该指定可以给页面元素绑定事件
例如： v-on:clike= ’ add ’ ,可以简写成 @clike= ’ add ’

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="../../../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app"><input type="text" v-model="num"><button @click="num++">点我加1</button><button @click="decrement">点我减1</button><h2>{{name}} 非常酷 有{{num}}个学科</h2>
</div>
<script type="text/javascript">var app = new Vue({el:"#app",data:{name:"junmu",num:1},methods:{// 减法decrement(){this.num--;}}});
</script>
</body>
</html>

阻止事件冒泡

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="../../../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app"><div style="background-color: aqua; width:100px;height: 100px" @click="print1()"><button @click.stop="print2()" >点我试试</button></div>{{msg1}}<br>{{msg2}}</div>
<script type="text/javascript">var app = new Vue({el:"#app",data:{msg1:"",msg2:""},methods:{print1(){this.msg1 = "背景被点了";},print2() {this.msg2 = "按钮被点了";}}});
</script>
</body>
</html>

加上.stop后，该组件就不会再往上面冒泡了。

v-for v-if v-else 循环组件使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="../../../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app"><button @click="show=!show" >点我</button><ul v-if="show"><li v-for="(user,index) in users" v-if="user.gender == '女'" style="background-color: pink">{{index+1}} -- {{user.name}} -- {{user.age}} -- {{user.gender}}<div v-for="(value,key,index) in user">***{{index}} -- {{value}} -- {{key}}</div></li><li v-else style="background-color: aqua">{{index+1}} -- {{user.name}} -- {{user.age}} -- {{user.gender}}<div v-for="(value,key,index) in user">***{{index}} -- {{value}} -- {{key}}</div></li></ul>
</div>
<script type="text/javascript">var app = new Vue({el:"#app",data:{show:true,users:[{"name":"小黑","age":12,"gender":"男"},{"name":"小白","age":23,"gender":"男"},{"name":"小红","age":18,"gender":"女"}]}});
</script>
</body>
</html>

效果图如下：

点击按钮就会显示或者影藏

日期的展示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="../../../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app"><h2>你的生日是：{{new Date(birthday).getFullYear()}} - {{new Date(birthday).getMonth()}} - {{new Date(birthday).getDay()}}</h2><hr><h2>你的生日是：{{birth}}</h2>
</div>
<script type="text/javascript">var app = new Vue({el:"#app",data:{birthday:1489032145615},computed:{birth(){const date = new Date(this.birthday);return date.getFullYear() + "-" + date.getMonth() + "-" + date.getDay();}}});
</script>
</body>
</html>

效果图

这里时间我是随便输入的毫秒值哈，

watch：用于深度监控，可以监控旧值和新值

组件的使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="../../../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app"><counter></counter>
</div>
<script type="text/javascript">const counter = {template:"<button @click='num++'>你点击了{{num}}次</button>",data(){return {num:0}}}// 这个属于全局注册，这样不好，我们搞个局部注册//Vue.component("counter",counter);var app = new Vue({el:"#app",components:{counter : counter}});
</script>
</body>
</html>