Questions tagged «vue.js»

Vue.js是一个开放源代码的渐进式Javascript框架，用于构建旨在逐步采用的用户界面。Vue.js主要用于前端开发，并且需要中等水平的HTML和CSS。Vue.js版本特定的问题应该用[vuejs2]或[vuejs3]标记。

9
Vue.js-如何正确监视嵌套数据
我正在尝试了解如何正确观察道具的一些变化。我有一个父组件（.vue文件），该组件从ajax调用接收数据，将数据放入对象中，并通过v-for指令使用它来呈现某些子组件，以下是我的实现的简化： <template> <div> <player v-for="(item, key, index) in players" :item="item" :index="index" :key="key""> </player> </div> </template> ...然后在<script>标签内： data(){ return { players: {} }, created(){ let self = this; this.$http.get('../serv/config/player.php').then((response) => { let pls = response.body; for (let p in pls) { self.$set(self.players, p, pls[p]); } }); } 项目对象是这样的： item:{ prop: value, …
10
如何在vue.js中有条件地禁用输入
我有一个输入： <input type="text" id="name" class="form-control" name="name" v-model="form.name" :disabled="validated ? '' : disabled"> 在我的Vue.js组件中，我有： .. .. ready() { this.form.name = this.store.name; this.form.validated = this.store.validated; }, .. validated作为一个boolean，可以是0或1，但是无论数据库中存储了什么值，我的输入始终被禁用。 如果需要，我需要禁用输入false，否则应将其启用并进行编辑。 更新： 这样做总是启用输入（无论数据库中有0还是1）： <input type="text" id="name" class="form-control" name="name" v-model="form.name" :disabled="validated ? '' : disabled"> 这样做总是禁用输入（无论我的数据库中有0还是1）： <input type="text" id="name" class="form-control" name="name" v-model="form.name" :disabled="validated ? disabled …
277 javascript  html  forms  vue.js 
5
使用Webpack在vue.js项目中的（@）登录路径中使用ES6导入
我正在开始一个新的vue.js项目，所以我使用了vue-cli工具来搭建一个新的webpack项目（即vue init webpack）。 在浏览生成的文件时，我注意到文件中的以下导入src/router/index.js： import Vue from 'vue' import Router from 'vue-router' import Hello from '@/components/Hello' // <- this one is what my qusestion is about Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'Hello', component: Hello } ] }) 我之前没有@在路径中看到at符号（）。我怀疑它允许相对路径（也许吗？），但是我想确保我了解它的真正作用。 我尝试了在线搜索，但是找不到解释（可能是因为搜索“在符号处”或使用文字字符@不能作为搜索条件）。 这@条路径的作用是什么（链接到文档非常好），这是es6吗？一个webpack的东西？vue-loader东西？ 更新 感谢Felix Kling向我指出了另一个关于同一问题的重复的stackoverflow问题/答案。 虽然在其他stackoverflow帖子上的评论不是对该问题的确切答案（在我看来，这不是babel插件），但确实为我指明了正确的方向，以查找问题所在。 …
9
如何从网址中删除hashbang？
如何#!从网址中删除hashbang ？ 我在vue路由器文档（http://vuejs.github.io/vue-router/en/options.html）中找到了禁用hashbang的选项，但此选项已删除#!，只是放在# 有什么办法可以清理网址？ 例： 不： #!/home 但： /home
257 vue.js  vue-router 
13
如何聆听“道具”的变化
在VueJs 2.0文档中，我找不到任何可以监听props更改的钩子。 VueJ是否具有类似onPropsUpdated()或类似的钩子？ 更新资料 正如@wostex所建议的，我尝试进入watch我的财产，但没有任何变化。然后我意识到我有一个特殊情况： <template> <child :my-prop="myProp"></child> </template> <script> export default { props: ['myProp'] } </script> 我myProp将父组件接收到的child组件传递给了我。然后，watch: {myProp: ...}它不起作用。
10
从组件外部调用Vue.js组件方法
假设我有一个具有子组件的主Vue实例。是否可以从Vue实例外部完全调用属于这些组件之一的方法？ 这是一个例子： var vm = new Vue({ el: '#app', components: { 'my-component': { template: '#my-template', data: function() { return { count: 1, }; }, methods: { increaseCount: function() { this.count++; } } }, } }); $('#external-button').click(function() { vm['my-component'].increaseCount(); // This doesn't work }); <script src="http://vuejs.org/js/vue.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="app"> <my-component></my-component> …
228 javascript  vue.js 
5
Vue.js-v模型和v-bind之间的差异
我正在通过在线课程学习Vue，导师给了我一个练习，使输入文本具有默认值。我使用v-model完成了此操作，但是讲师选择了v-bind：value，但我不明白为什么。 有人可以给我简单的解释一下两者之间的区别，什么时候最好使用它们？
7
Vue v-on：click在组件上不起作用
我正在尝试在组件内部使用on click指令，但它似乎不起作用。当我单击该组件时，应该在控制台中单击“测试”，什么也没有发生。我在控制台中看不到任何错误，所以我不知道我在做什么错。 index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vuetest</title> </head> <body> <div id="app"></div> <!-- built files will be auto injected --> </body> </html> 应用程序 <template> <div id="app"> <test v-on:click="testFunction"></test> </div> </template> <script> import Test from './components/Test' export default { name: 'app', methods: { testFunction: function (event) { console.log('test clicked') …
10
我可以在Vue.Js的计算属性中传递参数吗
这有可能在Vue.Js中的计算属性中传递参数。我可以看到在使用getters / setter进行计算时，他们可以采用参数并将其分配给变量。就像这里的文档： // ... computed: { fullName: { // getter get: function () { return this.firstName + ' ' + this.lastName }, // setter set: function (newValue) { var names = newValue.split(' ') this.firstName = names[0] this.lastName = names[names.length - 1] } } } // ... 这也是可能的： // ... …
5
在Vue.js中显示未转义的HTML
如何设法在胡子绑定中解释HTML？目前，中断（<br />）只是显示/转义。 小Vue应用： var logapp = new Vue({ el: '#logapp', data: { title: 'Logs', logs: [ { status: true, type: 'Import', desc: 'Learn<br />JavaScript', date: '11.11.2015', id: 1 }, { status: true, type: 'Import', desc: 'Learn<br />JavaScript', date: '11.11.2015', id: 1 } ] } }) 这是模板： <div id="logapp"> <table> <tbody> …
189 javascript  html  vue.js 
1
Vue.js中已创建和已安装事件之间的区别
Vue.js文档描述了created和mounted事件，如下所示： created 创建实例后同步调用。在此阶段，实例已完成对选项的处理，这意味着已设置以下内容：数据观察，计算的属性，方法，监视/事件回调。但是，安装阶段尚未开始，并且$ el属性尚不可用。 mounted 在实例刚刚挂载后用新创建的vm。$ el替换el时调用。如果将根实例安装到文档中元素，则在调用安装时，vm。$ el也将是文档中。 在服务器端渲染期间不会调用此挂钩。 我了解理论，但我有2个关于实践的问题： 在任何情况下created都可以使用mounted吗？ created在真实（真实代码）情况下，该事件可用于什么？
181 javascript  vue.js 
24
Vue 2-变异道具vue-warn
我开始https://laracasts.com/series/learning-vue-step-by-step系列。我停在课程Vue，Laravel和AJAX时遇到此错误： vue.js：2574 [Vue警告]：避免直接更改道具，因为每当父组件重新渲染时，该值就会被覆盖。而是使用基于属性值的数据或计算属性。变异的道具：“列表”（位于component中） 我在main.js中有此代码 Vue.component('task', { template: '#task-template', props: ['list'], created() { this.list = JSON.parse(this.list); } }); new Vue({ el: '.container' }) 我知道当我覆盖列表属性时问题出在created（）中，但是我是Vue的新手，所以我完全不知道如何解决它。任何人都知道如何（并请解释为什么）修复它？
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.