前端框架Vue学习
Posted jun木~
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端框架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>
- 这个没啥好说的
以上是关于前端框架Vue学习的主要内容，如果未能解决你的问题，请参考以下文章