一.认识vue
1.什么是vue
以数据驱动的web渐进式框架
2.vue优点
- 以数据驱动,不直接操作DOM,效率高
- 单页面应用,减少请求页面次数,速度快
- 数据的双向绑定,更新快
- 虚拟DOM,开发操作数据,数据更新虚拟DOM,虚拟DOM渲染真实DOM
- 组件化开发
二.vue入门
1.实例
<div id="app"></div>
<script>
// new一个Vue就是一个实例
// 实例与页面对应挂载点的所有页面结构一一绑定
// 一个页面中可以出现多个实例(挂载点),建议只出现一个实例,且挂载点用id
new Vue({
// 挂载点
el: "#app"
})
</script>
2.数据 data
<div id="app">
<!-- 插值表达式中存放的为变量,变量需要在vue实例的$data中进行初始化 -->
{{ msg }}
</div>
<script>
var app = new Vue({
el: "#app",
data: {
msg: "数据"
}
})
</script>
<script>
app.$data.msg;
app.msg
</script>
3.方法 methods
<div id="app">
<!-- v-on: 指令,操作事件的 -->
<p class="box" v-on:click="boxAction">{{ msg }}</p>
</div>
<script>
new Vue({
el: "#app",
data: {
msg: "数据"
},
// methods为挂载点内部提供方法的实现体
methods: {
boxAction: function(ev) {
console.log(ev)
}
}
})
</script>
4.计算 computed
<div id="app">
<input type="text" v-model="a">
<input type="text" v-model="b">
<div>
{{ c }}
</div>
</div>
<script>
// 一个变量依赖于多个变量
new Vue({
el: "#app",
data: {
a: "",
b: "",
},
computed: {
c: function() {
// this代表该vue实例
return this.a + this.b;
}
}
})
</script>
5.监听 watch
<div id="app">
<input type="text" v-model="ab">
<div>
{{ a }}
{{ b }}
</div>
</div>
<script>
// 多个变量依赖于一个变量
new Vue({
el: "#app",
data: {
ab: "",
a: "",
b: "",
},
watch: {
ab: function() {
// 逻辑根据需求而定
this.a = this.ab[0];
this.b = this.ab[1];
}
}
})
</script>
6.生命周期钩子
- 表示一个vue实例从创建到销毁的这个过程,将这个过程的一些时间节点赋予了对应的钩子函数
- 钩子函数: 满足特点条件被回调的方法
new Vue({
el: "#app",
data: {
msg: "message"
},
beforeCreate () {
console.log("实例刚刚创建");
console.log(this.msg);
},
created () {
console.log("实例创建成功, data, methods");
console.log(this.msg);
}
// 拿到需求 => 确定钩子函数 => 解决需求的逻辑代码块
})
vue-实例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>vue实例</title>
<style type="text/css">
p {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="app" class="app">
<p title="你真的是P">你是P</p>
<!-- v-bind: 属于vue语法:vue指令 -->
<!-- 第一个title是html标签的全局属性title -->
<!-- 第二个title是vue的一个变量，变量名可以随意自定义 -->
<p v-bind:title="title">你就是P</p>
<!-- vue的变量一般需要进行初始化（赋初值） -->
</div>
<div id="main">
<p v-bind:title="my_title">你还是P</p>
</div>
</body>
<!-- 在页面中引入vue -->
<script src="js/vue-2.5.17.js"></script>
<!-- 拥有vue环境后可以写vue支持的语法逻辑 -->
<script type="text/javascript">
// 自身代码块
// 创建vue实例
new Vue({
// 将实例与页面结构进行关联, 尽量(只允许)用id进行绑定(将唯一的对象与页面唯一的结构进行一一绑定)
// 该实例只操作关联的页面结构(包含子结构)
// el: "#app"
el: '.app',
data: {
title: "你就是P..."
}
});
// 将一个vue实例挂载到页面的一个页面结构
new Vue({
// 挂载点
el: "#main",
data: {
my_title: ""
}
})
</script>
</html>
Vue-data:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>vue实例之data</title>
</head>
<body>
<div id="app">
<!-- 插值表达式 -->
{{ msg }}
{{ num }}
<!-- 插值表达式中可以进行运算 -->
{{ 1 + 2 + 3 * 4 }}
</div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
var app = new Vue({
el: "#app",
// data: 数据
// 为挂载点内部的vue变量提供值
data: {
msg: "hello world!",
num: 88888
}
})
</script>
<script type="text/javascript">
// 普通js代码块
// 获取msg,num变量的值
// 1.得到vue实例
console.log(app);
// 2.获取vue变量data: $data
console.log(app.$data);
// 3.获取目标变量值
console.log(app.$data.msg);
// 直接获取值
console.log(app.msg);
console.log(app.num);
</script>
</html>
Vue-methods:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>methods</title>
<style type="text/css">
.box {
background-color: orange
}
</style>
</head>
<body>
<div id="app">
<!-- v-on: 指令,操作事件的 -->
<p class="box" v-on:click="abcClick">{{ abc }}</p>
<p class="box" v-on:click="defClick">{{ def }}</p>
<p class="box" v-on:mouseover="action">88888</p>
</div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
abc: "12345 上山打老虎 老虎不在家 ...",
def: "67890 呵呵"
},
// methods为挂载点内部提供方法的实现体
methods: {
abcClick: function (ev) {
console.log(ev);
console.log("abc is clicked");
},
defClick (ev) {
console.log(ev);
console.log("def is clicked");
},
action () {
console.log("被悬浮");
}
}
})
</script>
</html>
Vue-computed:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>computed</title>
</head>
<body>
<div id="app">
<div>
<!-- v-model vue进行数据双向绑定的指令 -->
<label for="xing">姓:</label><input type="text" name="xing" v-model="fisrt_name">
</div>
<div>
<label for="ming">名:</label><input type="text" name="ming" v-model="last_name">
</div>
<div>
<!-- 通过插值表达式实现 -->
<div>姓名: {{ fisrt_name + " " + last_name }} </div>
<!-- 通过computed实现 -->
<div>姓名: {{ full_name }} </div>
<!-- 通过methods实现 -->
<div>姓名: {{ full_name_bac() }} </div>
</div>
</div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
fisrt_name: "",
last_name: "",
// full_name: ""
},
// 一个变量依赖于多个变量
// 采用computed
computed: {
full_name: function () {
// full_name对fisrt_name及last_name两个变量进行监听,两个值只有有一个变化,full_name就会随之变化,并且可以实时渲染到页面
return this.fisrt_name + " " + this.last_name;
}
},
methods: {
full_name_bac: function () {
return this.fisrt_name + " " + this.last_name;
}
}
})
</script>
</html>
Vue-watch:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>watch</title>
</head>
<body>
<div id="app">
<div>
<label>姓名:</label>
<input type="text" v-model="full_name">
</div>
<p>姓: {{ first_name }} </p>
<p>名: {{ last_name }} </p>
</div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
// 多个变量依赖于一个变量, 对该变量进行监听
new Vue({
el: "#app",
data: {
full_name: "",
first_name: "",
last_name: ""
},
// 监听full_name变量,通过full_name具体修改first_name,last_name
watch: {
full_name () {
var fullName = this.full_name;
console.log(fullName);
this.first_name = fullName.split(" ")[0];
this.last_name = fullName.split(" ")[1];
}
}
})
</script>
</html>
Vue-delimiters
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>delimiters</title>
</head>
<body>
<div id="app">
{{ msg }} ${ msg }
</div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
msg: 'message'
},
delimiters: ['${', '}']
})
</script>
</html>
网友评论