这是我用的版本
"vue": "^1.0.21",
"vue-resource": "^0.9.3",
"vue-validator": "^2.1.5"
我的入口文件
import Vue from 'vue'
import App from './App'
import VueResource from 'vue-resource'
import VueValidator from 'vue-validator'
/* eslint-disable no-new */
new Vue({
el: 'body',
components: { App },
http: {
header: {
'Content-Type': 'application/json'
}
}
})
Vue.use(VueResource)
Vue.use(VueValidator)
App.vue
<template>
<div id="app">
<img class="logo" src="./assets/logo.png">
<hello></hello>
</div>
</template>
<script>
import Hello from './components/Hello'
export default {
components: {
Hello
}
}
</script>
Hello.vue
<template>
<div class="hello">
<h1 v-text="msg">{{ msg }}</h1>
<validator name="validation1">
<form novalidate>
<div class="username-field">
<label for="username">username:</label>
<input id="username" type="text" v-validate:username="['required']">
</div>
<div class="comment-field">
<label for="comment">comment:</label>
<input id="comment" type="text" v-validate:comment="{ maxlength: 256 }">
</div>
<div class="errors">
<p v-if="$validation1.username.required">Required your name.</p>
<p v-if="$validation1.comment.maxlength">Your comment is too long.</p>
</div>
<input type="submit" value="send" v-if="$validation1.valid">
</form>
</validator>
</div>
</template>
<script>
export default {
data () {
return {
// note: changing this line won't causes changes
// with hot-reload because the reloaded component
// preserves its current state and we are modifying
// its initial state.
msg: 'Hello World!'
}
}
}
</script>
一运行就有警告,而且没有产生效果
很郁闷,望解答,刚开始学的
谢邀
入口文件不对,请把Vue.use()
写在new Vue({})
新建Vue实例之前。
import Vue from 'vue'
import App from './App'
import VueResource from 'vue-resource'
import VueValidator from 'vue-validator'
/* eslint-disable no-new */
Vue.use(VueResource)
Vue.use(VueValidator)
new Vue({
el: 'body',
components: { App },
http: {
header: {
'Content-Type': 'application/json'
}
}
})
Vue.use(VueValidator)