为了账号安全,请及时绑定邮箱和手机立即绑定

qw1vue如何使用vuex,vuex是vuex.js文件吗?

/ 猿问

qw1vue如何使用vuex,vuex是vuex.js文件吗?

LEATH 2019-08-20 18:10:30

vue如何使用vuex,vuex是vuex.js文件吗


查看完整描述

4 回答

?
12345678_0001

vue有自己的脚手架构建工具vue-cli,使用起来非常方便,使用webpack来集成各种开发便捷工具,比如:代码热更新,修改代码之后网页无刷新改变,对前端开发来说非常的方便PostCss,再也不用去管兼容性的问题了,只针对chrome写css代码,会自动编译生成支持多款浏览器的css代码Eslint,统一代码风格,规避低级错误,对于有代码洁癖的人来说是绝对的好东西,不过有些地方的代码校验有时候也挺麻烦的-.-bable,ES2015出来已经有一段时间了,但是不少浏览器还没有兼容ES6.有了bable,放心使用ES6语法,它会自动转义成ES5语法。Stylus,类似于SASS/SCSS,但是可以不写{}和“:”,使用起来还是很方便的…除此之外,vue-cli已经使用node配置了一套本地服务器和安装命令等,本地运行和打包只需要一个命令就可以搞定,非常的方便开发vue非常好的融合了react的组件化思想和angular的指令思想。一个vue的组件将HTML、CSS、JS代码写在一个文件里面,这样既方便编写,也方便管理和修改Axios在vue1.x的时候,vue的官方推荐HTTP请求工具是vue-resource,但是在vue2.0的时候将推荐工具改成了axios。使用方式都差不多,但需要注意的是:接口返回的res并不直接是返回的数据,而是经过axios本身处理过的json对象。真正的数据在res.data里:axios.get(url).then((res)=>{this.data=res.data})Vuexvue提供了一个数据管理工具vuex,有点类似于angular中factory和service,可以进行数据上的通信。比如存储一些公共变量或者是不同组件间的数据处理等。这个有一些高级用法在这里不细说,想要了解的可以去官方文档看,有中文版本。conststore=newVuex.Store({state:{count:0},mutations:{increment(state){state.count++}}})Vue-Routervue-router是vue的路由系统,可以用来创建单页应用。基本思想是在主页面中引入标签,然后定义路由,把router挂在到app上,然后把各个子页面渲染到view里面。使用起来还是很方便的,跳转页面只需要router.push('test')获取元素节点vue2.0废除了v-el指令,所有的节点指令修改为ref,然后通过ref来获取元素节点,如testjscodethis.$ref.testHook组件间的通信一。如果是和子组件通信,则使用ref就可以实现,如:jscodethis.$ref.testHook.add()//调用test子组件的add方法二。使用emit来发送广播vue2提供了一套广播机制,即一边发送广播,一边接收广播来执行相应操作。使用方法如下:比如想要给test组件发送一个“相加”广播:exportdefault{method:{click(){Vue.$emit('add',{})//第二个参数可作为传递数据传送到监听端口,不需要则传空对象}}}那么test组件中就需要监听,在created方法里写exportdefault{created(){Vue.$on('add',this.add)},method:{add(){this.count++}}}除了以上总结的这点小的知识点以外,还有很多vue的知识想要和大家分享,以后会陆续写出来,大家感兴趣的也可以来我的GitHub一起来写这个项目(觉得不错的给个starHah)



查看完整回答
反对 回复 2019-08-24
?
桃花长相依

vue-loader么... 如果是vue-loader可以通过 require来引入就可以 比如Js文件写到assets/js中 在main.js中可以 require('./src/assets/xxx.js') 如果只是单页面html,可以直接引入就行了

查看完整回答
反对 回复 2019-08-24
?
偶然的你

Vue 的 createElement 方法,简单的封装一个组件解决问题。

解决方法
第一版代码(直接在操作 Dom )如下:
export default {
mounted() {
const s = document.createElement('script');
s.type = 'text/javascript';
s.src = 'https://g.alicdn.com/dingding/dinglogin/0.0.2/ddLogin.js';
document.body.appendChild(s);
},
}
使用 createElement 方法:
export default {
components: {
'dingtalk': {
render(createElement) {
return createElement(
'script',
{
attrs: {
type: 'text/javascript',
src: 'https://g.alicdn.com/dingding/dinglogin/0.0.2/ddLogin.js',
},
},
);
},
},
},
}
// 使用在页面中调用
终极方案
通过封装一个组件 remote-js 实现:
export default {
components: {
'remote-js': {
render(createElement) {
return createElement('script', { attrs: { type: 'text/javascript', src: this.src }});
},
props: {
src: { type: String, required: true },
},
},
},
}
使用方法:
<remote-js src="https://g.alicdn.com/dingding/dinglogin/0.0.2/ddLogin.js">remote-js>



查看完整回答
反对 回复 2019-08-24
?
喵喵时光机

使用Vue真的太棒了,但是也有可能使你头疼,当你试图使它与jquery插件混用的时候。
问题的原因是jquery与Vue是完全不同的东西,Vue是通过组件与数据绑定来进行渲染的,jquery则主要是用来做简单的单击处理和强大的操纵DOM的能力。
我试图寻找一些东西来帮助自己解决这个问题,但是我发现一些组件所做的工作不是很让我满意,所以让我告诉你怎样使Vue与jquery插件混用。

查看完整回答
反对 回复 2019-08-24

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信