vue.js

织梦狗教程前端开发

2023-10-08

**vue.js** 一vue基本代码结构1.引入Vue.js文件!-- 本地文件的方式引入--script src=./lib/vue.js/script2.`创建Vue实例对象new Vue()//`创建Vue实例对象var vm=new vue({el:#app,data:{msg:hello wo...

vue.js

**
一·vue基本代码结构

1.引入Vue.js文件
   <!--  本地文件的方式引入-->
   <script src="./lib/vue.js"></script>
 2.`创建Vue实例对象new Vue()
 //`创建Vue实例对象
      var vm=new vue({
      el:'#app',
      data:{
      msg:'hello world'
      }
      })

<body>
  <div id="app">
      <input type="text" v-model="num">
   <select  v-model="pre">
       <option>+</option>
       <option>-</option>
       <option>*</option>
       <option>/</option>
   </select>
   <input type="text"  v-model="num1"/>
     <button @click="resData">=</button>
   <input type="text" v-model="result"/>
  </div>
</body>
<script>
    //v-model双向绑定 view->data (viewModel) data->view mvvm架构
   new Vue({
       el:"#app",
       data:{
           num:0,
           num1:0,
           result:0,
       msg:"hello",
       pre:"+",
       },
       methods:{
           resData(){
               var res=this.num+this.pre+this.num1;
               this.result=eval(res);
           }
       }
   });
</script>

织梦狗教程

本文标题为：vue.js