一、认识Vue
定义：一个构建数据驱动的 web 界面的渐进式框架
优点：
1、可以完全通过客户端浏览器渲染页面，服务器端只提供数据
2、方便构建单页面应用程序（SPA）
二、引入Vue
<div id="app">
<p title="p"></p>
<p v-bind:title='title'></p>
</div>
<script type="text/javascript" src="vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
title: 'vue-p'
}
})
</script>
三、Vue实例
- 实例：el
<div id='app'>
</div>
<script>
new Vue({
el: '#app'
})
</script>
- 数据：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>
- 方法：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>
- 计算属性：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>
- 监听器：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>
- 分隔符：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>
- 实例对象使用成员属性与方法
<script>
var app = new Vue({
el: '#app',
data: {
msg: 'message'
}
})
console.log(app)
console.log(app.$el)
console.log(app.$data.msg)
console.log(app.msg)
</script>
四、实例生命周期钩子
代码示例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>生命周期钩子</title>
</head>
<body>
<div id="app">
{{ msg }}
</div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
msg: "message"
},
beforeCreate () {
console.log("实例刚刚创建");
console.log(this.msg);
},
created () {
console.log("实例创建成功, data, methods");
console.log(this.msg);
}
// 拿到需求 => 确定钩子函数 => 解决需求的逻辑代码块
})
</script>
</html>
- 定义
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
- 钩子方法
beforeCreate：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
created：在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
beforeMount：在挂载开始之前被调用：相关的 render 函数首次被调用。
mounted：el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。
beforeUpdate：数据更新时调用，发生在虚拟 DOM 打补丁之前。
updated：数据更新时调用，发生在虚拟 DOM 打补丁之前。
activated：keep-alive 组件激活时调用。
deactivated：keep-alive 组件停用时调用。
beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed：Vue实例销毁后调用。调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
errorCaptured：2.5.0+ 新增，当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。
- 重点钩子
created：实例完全创建完毕(属性与方法都准备就绪)。可以进行数据操作(请求后台数据，重新渲染最新数据)
mounted：虚拟DOM构建完毕，并完成实例的el挂载。可以重新操作页面DOM
网友评论