【转】[Vue] 初学 vue 的简单赋值

App.vue 文件

<template>
  <div>
    <div><input type="text" v-bind:value="msg" /></div>
    <div><input type="text" :value="name" /></div>
    <div><input type="text" :value="birthday" /></div>
    <div><input type="button" value="点击 m1" v-on:click="m1" /></div>
    <div><input type="button" value="点击 m2" @click="m2" /></div>
    <div>{{ age }}</div>
</div>
</template>

<script>
  const options={
    data: function(){
      return {  name:"Vue.js",birthday:'2000-02-01',age:25,msg:"Hello Vue!"};
    },
    methods: {
      m1: function(){
        this.age++;
        console.log('m1被调用!')
      },
      m2: function(){
        this.age--;
        console.log('m2被调用!')
      }
    }
  };
  export default options;
</script>

 也可以是其它的 .vue 文件里，然后修改 main.js 里面的指向：

import Vue from 'vue'
import e1 from './views/Example1View.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({ 
  router,
  store,
  render: h => h(e1)
}).$mount('#app')

这里是让它渲染 ./views/Example1View.vue 这个页面

<template>
    <div>
        <div>
            <label for="">请输入姓名</label>
            <input type="text" v-model="name" />
        </div>
        <div>
            <label for="">请输入年龄</label>
            <input type="text" v-model="age" />
        </div>
        <div>
            <label for="">性别</label>
            男<input type="radio" name="sex" value="男" v-model="sex" />
            女<input type="radio" name="sex" value="女" v-model="sex" />
        </div>
        <div>
            <label for="">请输入爱好</label>
            游泳<input type="checkbox" name="hobby" value="游泳" v-model="hobby" />
            跑步<input type="checkbox" name="hobby" value="跑步" v-model="hobby" />
            爬山<input type="checkbox" name="hobby" value="爬山" v-model="hobby" />
        </div>
    </div>
</template>

<script>
    const options = {
        data:function(){
            return {name:'张三',age:18,sex:'男',hobby:['游泳','爬山']}
        }
    }
    export default options;
</script>