基本用法
使用vue腳手架- 安裝Nodejs
- 安裝yarn：https://yarn.bootcss.com/docs/install/#windows-stable
- 安裝 Vue CLI
npm install -g @vue/cli
# OR
yarn global add @vue/cli
- 建立項目：
vue create .
- yes 後回車
安裝完畢，接下來可以運作 vue代碼了，運作
yarn serve
實時預覽
input//嘗試着對message進行修改：
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
export default {
name: 'App',
data(){
return {
message: 'hi'
}
}
}
改記憶體的東西頁面會跟着改變，這就是雙向綁定
textarea<textarea v-model="message" placeholder="edit me"></textarea>
<p>Message is: {{ message }}</p>
// 單個綁定布爾值
<label>
<input type="checkbox" v-model="x">
<span>x: {{x}}</span>
</label>
// 多個綁定數組
// 單選框用radio，最好加上name，表示是一組的
<div id="app">
愛好：{{x}}
<label>
<input name="want" type="checkbox" v-model="x" :value="1">
<span>抽煙</span>
</label>
<label>
<input name="want" type="checkbox" v-model="x" :value="2">
<span>喝酒</span>
</label>
<label>
<input name="want" type="checkbox" v-model="x" :value="3">
<span>泡妞</span>
</label>
</div>
export default {
name: 'App',
data(){
return {
x: []
}
}
}
<div id="app">
想要：{{x}}
<hr />
<select v-model="x">
<option v-for="item in array" :value="item.value" :key="item.value">{{item.text}}</option>
</select>
</div>
export default {
name: 'App',
data(){
return {
array: [
{text: '抽煙', value: 1},
{text: '喝酒', value: 2},
{text: '泡妞', value: 3}
],
x: ""
}
}
}
// 多選用 multiple，shift+點選，ctrl+點選
<div id="app">
登入
<form @submit.prevent="onSubmit" action="">
<label for="">
<span>使用者名</span>
<input type="text" v-model="user.username" />
</label>
<label for="">
<span>密碼</span>
<input type="password" v-model="user.password"/>
</label>
<button type="submit">登入</button>
</form>
</div>
export default {
name: 'App',
data(){
return {
user:{
username: '',
password: ''
},
x: ""
}
},
methods: {
onSubmit(){
console.log(this.user)
}
}
}
想要回車送出必須要有form和button
修飾符
.lazy<input type="text" v-model.lazy="user.username" />
// 不那麼快變化
預設使用 input 事件，input時間包括鍵盤、滑鼠、任何輸入裝置的輸入
.number隻要數字
<input type="text" v-model.number="user.username" />
// 隻要數字的名字，如果資料類型是number，那麼最好使用.number修飾符
去掉多餘空格
<input type="text" v-model.trim="user.username" />
v-model
等價寫法文檔：https://cn.vuejs.org/v2/guide/components-custom-events.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E7%9A%84-v-model
<input type="text" v-model.trim="user.username" />
// 相當于
<input type="text" :value="user.username" @input="user.username = $event.target.value"/>
// 如果是 .sync 的話就直接等于 $event
v-model
等價寫法就是綁定
:value
等于一個東西，然後
@input
讓這個東西等于
$event.target.value
<template>
<div class="red wrapper">
<input :value="value" @input="onInput" />
</div>
</template>
<script>
export default {
name: 'MyInput',
props: {
value: {
type: String
}
},
methods: {
onInput(e){
const value = e.target.value
this.$emit('input', value)
}
}
}
// 要麼使用 :value 與 @input 組合，要麼使用 v-model
使用 Ant-Design-Vue
安裝與引入使用npm install ant-design-vue --save
// 或者
yarn add ant-design-vue
// 全局引用
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
Vue.use(Antd);
// 局部引用
import { Button, message } from 'ant-design-vue';
Vue.use(Button);
Vue.prototype.$message = message;
<template>
<a-form
id="components-form-demo-normal-login"
:form="form"
class="login-form"
@submit="handleSubmit"
>
<a-form-item>
<a-input
v-decorator="[
'userName',
{ rules: [{ required: true, message: 'Please input your username!' }] },
]"
placeholder="Username"
>
<a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)" />
</a-input>
</a-form-item>
<a-form-item>
<a-input
v-decorator="[
'password',
{ rules: [{ required: true, message: 'Please input your Password!' }] },
]"
type="password"
placeholder="Password"
>
<a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)" />
</a-input>
</a-form-item>
<a-form-item>
<a-checkbox
v-decorator="[
'remember',
{
valuePropName: 'checked',
initialValue: true,
},
]"
>
Remember me
</a-checkbox>
<a class="login-form-forgot" href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
Forgot password
</a>
<a-button type="primary" html-type="submit" class="login-form-button">
Log in
</a-button>
Or
<a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
register now!
</a>
</a-form-item>
</a-form>
</template>
<script>
export default {
beforeCreate() {
this.form = this.$form.createForm(this, { name: 'normal_login' });
},
methods: {
handleSubmit(e) {
e.preventDefault();
this.form.validateFields((err, values) => {
if (!err) {
console.log('Received values of form: ', values);
}
});
},
},
};
</script>
<style>
#components-form-demo-normal-login .login-form {
max-width: 300px;
}
#components-form-demo-normal-login .login-form-forgot {
float: right;
}
#components-form-demo-normal-login .login-form-button {
width: 100%;
}
</style>
校驗示例：
v-decorator="[
'password',
{ rules: [{ required: true, message: '你丫沒填密碼！'},{ min: 8, message: '密碼最少8個字元，'}, {pattern: /[a-zA-z]/, message: '必須包含至少一個字母'}] }
]"
具體用法看文檔：https://antdv.com/docs/vue/introduce-cn/