}
}
);
watch(
() => pwd.value,
() => {
// console.log(regPwd.test(pwd.value));
if (regPwd.test(pwd.value)) {
pwdIcon.value = “iconfont duihao”;
} else {
pwdIcon.value = “iconfont chahao”;
}
}
);
function rightClick() {
// console.log(1);
store.commit(“changeBackColor”);
}
return {
rightClick,
disabled,
mobile,
pwd,
mobileIcon,
pwdIcon,
color,
};
},
};
vuex store/index.js
import { createStore } from ‘vuex’
import axios from ‘axios’
export default createStore({
state: {
// 默认颜色
backColor: ‘#cccccc’,
// 存放数据,页面默认渲染的数据
books: [],
// 用于搜索
_books: [],
},
mutations: {
changeBackColor(state) {
state.backColor = ‘#’ + Math.round(Math.random() * 16777216).toString(16)
},
changeBooks(state, arr) {
state.books = arr
state._books = deepClone(arr)
function deepClone(obj) {
if (typeof obj !== ‘object’ || obj == null) {
return obj
}
let result
if (obj instanceof Array) {
result = []
} else {
result = {}
}
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
result[key] = deepClone(obj[key])
}
}
return result
}
},
},
actions: {
async getDate({ commit }) {
//将请求的数据中的 list取出来
let data = await axios.get(‘/goods.json’)
console.log(data.data.list);
commit(‘changeBooks’, data.data.list)
}
},
modules: {}
})
登录子组件
{{leftText}}{{title}}<span class=“right” @click=“clickEve”>{{rightText}}
<input type=“text” :placeholder=“placeholder” :value=“modelValue” @input=“iptChange”>
登录后页面
react和vue的比较
相同
1)vitual dom
2)组件化
3)props,单一数据流
不同点
1)react是jsx和模板;(jsx可以进行更多的js逻辑和操作)
2)状态管理(react)
3)对象属性(vue)
4)vue:view——medol之间双向绑定
5)vue:组件之间的通信(props,callback,emit)
lder=“请根据书名进行搜素” />
react和vue的比较
相同
1)vitual dom
2)组件化
3)props,单一数据流
不同点
1)react是jsx和模板;(jsx可以进行更多的js逻辑和操作)
2)状态管理(react)
3)对象属性(vue)
4)vue:view——medol之间双向绑定
5)vue:组件之间的通信(props,callback,emit)
[外链图片转存中…(img-2v4wyjO2-1714161507416)]