Vue学习记录（三）
Vuex
定义：Vuex是Vue配套的公共数据管理工具，我们可以将共享的数据保存到Vuex中，方便整个程序中的任何组件都可以获取和修改Vuex中保存的公共数据
state
爷孙三代使用vuex轻松获取同一数据，不需要靠传递
1.引入vuex
<script src="js/vuex.js" type="text/javascript" charset="utf-8"></script>
2.创建一个Vuex对象
const store = new Vuex.Store({
//这里的state相当于Vue中的data
state:{
name :"yxy"
}
})
3.将vuex对象传递到Vue实例中
//将vuex对象传递到Vue实例中
store: store,
4.调用state数据
<!-- 调用state数据 -->
<p>{{this.$store.state.name}}</p>
实操代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="demo">
<grandfather></grandfather>
</div>
<template id="grandfather">
<div id="">
<!-- 调用state数据 -->
<p>{{this.$store.state.name}}</p>
<father></father>
</div>
</template>
<template id="father">
<div id="">
<p>这是父组件{{this.$store.state.name}}</p>
<son></son>
</div>
</template>
<template id="son">
<p>这是子组件{{this.$store.state.name}}</p>
</template>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入vuex -->
<script src="js/vuex.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//创建一个Vuex对象
const store = new Vuex.Store({
//这里的state相当于Vue中的data
state:{
name :"yxy"
}
})
Vue.component("grandfather", {
template: "#grandfather",
components: {
"father": {
template: "#father",
components: {
"son": {
template: "#son"
}
}
}
}
})
var app = new Vue({
el: "#demo",
//将vuex对象传递到Vue实例中
store: store,
data: {
},
//专门用于存储监听事件中的回调函数
methods: {
},
//计算属性
directives: {
},
//组件
components: {
}
})
</script>
</body>
</html>
修改共享数据
子孙三代都能修改组件共享数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="demo">
<grandfather></grandfather>
</div>
<template id="grandfather">
<div id="">
<!-- 调用state数据 -->
<button type="button" @click="add">增加</button>
<button type="button" @click="sub">减少</button>
<input type="" name="" id="" :value="this.$store.state.count"/>
<father></father>
</div>
</template>
<template id="father">
<div id="">
<button type="button" @click="add">增加</button>
<button type="button" @click="sub">减少</button>
<input type="" name="" id="" :value="this.$store.state.count"/>
<son></son>
</div>
</template>
<template id="son">
<div id="">
<button type="button" @click="add">增加</button>
<button type="button" @click="sub">减少</button>
<input type="" name="" id="" :value="this.$store.state.count"/>
</div>
</template>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入vuex -->
<script src="js/vuex.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//创建一个Vuex对象
const store = new Vuex.Store({
//这里的state相当于Vue中的data
state:{
count :0
},
mutations: {
madd(state){
state.count++;
},
msub(state){
state.count--;
}
}
})
Vue.component("grandfather", {
template: "#grandfather",
store: store,
methods:{
add(){
// this.$store.state.count = this.$store.state.count + 1;
this.$store.commit("madd")
},
sub(){
// this.$store.state.count = this.$store.state.count - 1;
this.$store.commit("msub")
}
},
components: {
"father": {
template: "#father",
methods:{
add(){
// this.$store.state.count = this.$store.state.count + 1;
this.$store.commit("madd")
},
sub(){
// this.$store.state.count = this.$store.state.count - 1;
this.$store.commit("msub")
}
},
components: {
"son": {
template: "#son",
methods:{
add(){
// this.$store.state.count = this.$store.state.count + 1;
this.$store.commit("madd")
},
sub(){
// this.$store.state.count = this.$store.state.count - 1;
this.$store.commit("msub")
}
},
}
}
}
}
})
var app = new Vue({
el: "#demo",
//将vuex对象传递到Vue实例中
// store: store,
data: {
},
//专门用于存储监听事件中的回调函数
methods: {
},
//计算属性
directives: {
},
//组件
components: {
}
})
</script>
</body>
</html>
getters属性
组件中的computed和vuex中的getters都是类似Vue中的计算属性，如果结算结果不发生改变，那么computed和getters中的函数都只会执行一次
实操代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="demo">
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vuex.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//创建一个Vuex对象
const store = new Vuex.Store({
//这里的state相当于Vue中的data
state: {
},
getters:{
}
})
var app = new Vue({
el: "#demo",
data: {
},
//专门用于存储监听事件中的回调函数
methods: {
},
//计算属性
directives: {
},
//组件
components: {
}
})
</script>
</body>
</html>
Vue Router
Vue Router和v-show、v-if一样，都是用来切换组件的显示的
先导入Vue Router
1.定义组件
const one = {
template: "#one"
}
const two = {
template: "#two"
}
2.定义路由规则
const routers = [
{path:"/one", component: one},
{path:"/two", component: two}
]
3.根据自定义的路由规则创建路由对象Vue Router
const router = new VueRouter({
routes:routers
})
4.将创建好的路由对象Vue Router绑定到Vue实例中
var app = new Vue({
el: "#demo",
router:router,
data: {
},
//专门用于存储监听事件中的回调函数
methods: {
},
//计算属性
directives: {
},
//组件
components: {
one: one,
two: two
}
})
5.修改哈希值
<a href="#/one">跳转到第一个页面</a>
<a href="#/two">跳转到第二个页面</a>
6.给Vue实例组件中添加router-view标签渲染Vue Router
<router-view></router-view>
router-link
可以在前一板块中的第五步中替换a标签
<!-- to指定组件 tag可以指定形式，默认为a标签 -->
<router-link to="/one" tag="button">第一个页面</router-link>
<router-link to="/two" tag="button">第二个页面</router-link>
定义路由规则时添加以下代码，表示默认情况下第二个叶念为点击状态
{
path: "/",
redirect: "/two"
},
创建路由对象时：
const router = new VueRouter({
routes: routers,
//router-link指定添加的类名称
linkActiveClass: "active"
})
router传递参数
传递参数的两种办法
通过url参数的方式来进行传递参数：
1.在指定哈希的时候，通过?key=value&key=value的方式来进行传递
<router-link to="/one?name=zs&age=18" tag="button">第一个页面</router-link>
2.在传递的组件的生命周期的方法中通过this.$route.query.key的方式来获取参数
const one = {
template: "#one",
created:function(){
// console.log(this.$route);
console.log(this.$route.query);
console.log(this.$route.query.name);
console.log(this.$route.query.age);
}
}
通过路由规则中的占位符来进行参数传递
1.在路由规则中先指定一个/:key/:key
const routers = [
{
path: "/",
redirect: "/two"
},
{
path: "/one",
component: one
},
{
path: "/two/:name/:age",
component: two
}
]
2.在指定哈希时，通过/value/value的方式传递key中的数据
<router-link to="/two/ls/20" tag="button">第二个页面</router-link>
3.在传递的组件的生命周期的方法中通过this.$route.params.key的方式来获取参数
const two = {
template: "#two",
created:function(){
// console.log(this.$route);
console.log(this.$route.params.name)
console.log(this.$route.params.age)
}
}
嵌套路由
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
.tem1 {
width: 300px;
height: 500px;
background-color: antiquewhite;
}
.oneChildren1 {
width: 200px;
height: 400px;
background-color: blue;
}
.oneChildren2 {
width: 200px;
height: 400px;
background-color: green;
}
.tem2 {
width: 300px;
height: 500px;
background-color: aqua;
}
.active {
background-color: aquamarine;
}
</style>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="demo">
<!-- to指定组件 tag可以指定形式，默认为a标签 -->
<router-link to="/one" tag="button">第一个页面</router-link>
<router-link to="/two" tag="button">第二个页面</router-link>
<router-view></router-view>
</div>
<template id="one">
<div id="" class="tem1">
<h1>这是第一个页面</h1>
<router-link to="/one/onebut1" tag="button">第一个页面</router-link>
<router-link to="/one/onebut2" tag="button">第二个页面</router-link>
<router-view></router-view>
</div>
</template>
<template id="onebut1">
<div id="" class="oneChildren1">
<h1>这是第一个子界面页面</h1>
</div>
</template>
<template id="onebut2">
<div id="" class="oneChildren2">
<h1>这是第二个子界面页面</h1>
</div>
</template>
<template id="two">
<div id="" class="tem2">
<h1>这是第二个页面</h1>
</div>
</template>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vueRouter.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//创建子组件1
const onebut1 = {
template: "#onebut1",
}
//创建子组件2
const onebut2 = {
template: "#onebut2",
}
const one = {
template: "#one",
//添加两个子组件给one组件
components: {
onebut1: onebut1,
onebut2: onebut2
}
}
const two = {
template: "#two",
}
const routers = [{
path: "/",
redirect: "/one",
},
{
path: "/one",
component: one,
//给子路由添加跳转命令到哪个组件元素
children: [{
//第一子路由
path: "onebut1",
component: onebut1
},
//第二子路由
{
path: "onebut2",
component: onebut2
},
],
},
{
path: "/two",
component: two
}
]
const router = new VueRouter({
routes: routers,
//router-link指定添加的类名称
linkActiveClass: "active"
})
var app = new Vue({
el: "#demo",
router: router,
data: {
},
//专门用于存储监听事件中的回调函数
methods: {
},
//计算属性
directives: {
},
//组件
components: {
one: one,
two: two,
onebut1: onebut1,
onebut2: onebut2
}
})
</script>
</body>
</html>
watch属性
1.可以监听数据的变化并且启动对应的回调函数
var app = new Vue({
el: "#demo",
data: {
num1:"0",
num2:"0",
sum:"0"
},
watch: {
//只要num1发生改变，此时watch中的的num1的回调函数就会执行
//传递的两个参数，第一个时发生改变前的参数，第二个时发生改变后的参数
num1:function(newData, oldData){
this.sum = parseInt(this.num1) + parseInt(this.num2);
},
//只要num2发生改变，此时watch中的的num1的回调函数就会执行
num2:function(newData, oldData){
this.sum = parseInt(this.num1) + parseInt(this.num2);
}
},
//专门用于存储监听事件中的回调函数
methods: {
},
//计算属性
directives: {
},
//组件
components: {
}
})
2.可以监听路由地址
通过在watch中添加路由路由地址，再产生一个回调函数，就可以得到监听的路由地址
Vue的生命周期
先来看一下官方给出的图片
Vue的生命周期=>创建阶段
具体看注释
var app = new Vue({
el: "#demo",
beforeCreate:function(){
//在调用beforeCreate方法的时候，此时Vue实例才刚刚创建完成，还没有加载data和methods
//所以还不能访问到Vue实例中的数据和方法
// console.log(this.name);
// console.log(this.say);
},
created:function(){
//在调用created方法的时候，此时已经加载完成data和methods，此时是最早能访问到数据和方法的时候
// console.log(this.name);
// console.log(this.say);
},
beforeMount:function(){
//在调用beforeMount的时候，数据和方法已经加载完成，不过还只是存在内存中，并没有渲染到页面上
// console.log(document.getElementsByTagName("p")[0].innerHTML);
// console.log(document.getElementsByTagName("p")[0].innerText);
},
mounted:function(){
//在调用mounted方法时，此时数据和方法已经渲染到页面上
console.log(document.getElementsByTagName("p")[0].innerHTML);
console.log(document.getElementsByTagName("p")[0].innerText);
},
data: {
name:"yxy"
},
//专门用于存储监听事件中的回调函数
methods: {
say(){
console.log("hello");
}
},
//计算属性
directives: {
},
//组件
components: {
}
})
Vue的生命周期=>运行阶段
beforeUpdate:function(){
// 在调用beforeUpdate方法的时候，表示数据发生了改变
// 只有数据发生改变的时候，beforeUpdate才会被调用
// 注意：此时虽然数据发生了改变，但是界面上更新后的数据还没有被渲染出来
// console.log("beforeUpdate");
},
updated:function(){
// 在调用updated方法的时候，说明数据已经发生了改变
// 只有数据发生改变的时候，updated才会调用
// 注意：此时数据已经渲染到了界面上
console.log(this.name)
console.log(document.getElementsByTagName("p")[0].innerHTML)
},
Vue的生命周期=>销毁阶段
通过组件展示
Vue.component("temp", {
template:"#temp1",
data:function(){
return {
msg:"yes"
}
},
methods:{
say(){
console.log("hello");
}
},
beforeDestroy:function(){
//v-if是通过移出和添加标签的方式达到切换目的的
//所以切换为没有的时候是属于销毁阶段
//当有元素即将被销毁时，调用beforeDestroy方法
//此时还没有销毁，是最后能够访问到数据和方法的时候
// console.log(this.msg);
// console.log(this.say);
},
destroyed:function(){
//当有元素完全被销毁时，调用destroyed方法
//注意：不论能不能拿到组件中的数据和方法，都不能去操作组件中的数据和方法
}
})
Vue中获取DOM元素的方法（ref）
<div id="demo">
<button type="button" @click="myFn">获取DOM元素</button>
<!-- 给需要获取到的DOM元素添加一个ref属性 -->
<p ref="dom1">我是p标签</p>
<temp ref="domC"></temp>
</div>
<template id="temp1">
<p>我是组件1</p>
</template>
methods: {
myFn(){
//全局对象this
console.log(this.$refs);
//获取p标签
console.log(this.$refs.dom1);
//获取组件DOM元素
console.log(this.$refs.domC);
//获取组件中data中的数据
console.log(this.$refs.domC.msg);
//获取组件中methods中的方法
console.log(this.$refs.domC.say);
}
},