你的位置:首页 > Java教程

[Java教程]vue学习笔记1


 工作中用了很久vue,但是都是我们这边前端经理封装好的组件,想要看到底部的原理还要从层层代码里面剥离出来,逻辑太复杂,还不如自己一点点整理一下,一步一步走下去.

github地址:https://github.com/lily1010/vue_learn/tree/master/lesson01

目录如下:

 

一 单向数据绑定

<!DOCTYPE html><html>  <head>    <meta charset="utf-8" />    <title>vue</title>    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />    <script src="js/vue.js"></script>  </head>  <body>    <div >      {{message}}  </div>    <script>      var vue = new Vue({        el: ".test",  //必须有el        data:{          message:"这是个测试"        }      })    </script>  </body></html>

 

二 双向数据绑定

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title>vue双向数据成功</title>    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">    <script src="js/vue.js"></script>  </head>  <body>    <div > <!--注意文本和input要在同一个el下面,要不然input输入改变不了p里面内容-->      <p>{{message}}</p>      <input type="text" v-model="message">  </div>    <script>      var vue = new Vue({        el: ".test",  //必须有el        data:{          message:"这是个测试"        }      })    </script>  </body></html>

 

三 访问数组数据

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title>vue数组</title>    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">    <script src="js/vue.js"></script>  </head>  <body>    <ul v-for="item in message">        <li>{{item}}</li>    </ul>    <script>      var vue = new Vue({        el: ".test",  //必须有el        data:{          message:["aa","bb","cc"]        }      })    </script>  </body></html>

 

四 访问数组中对象数据

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title>vue数组中对象</title>    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">    <script src="js/vue.js"></script>  </head>  <body>    <ul v-for="item in message">      <li>{{item.name}}</li>    </ul>    <script>      var vue = new Vue({        el: ".test",  //必须有el        data:{          message:[{name:"lili"},{name:"haha"},{name:"kkkk"}], //注意此处name这个key值必须保持一致,要不然数组循环没法访问不同的key值        }      })    </script>  </body></html>

 

五 vue方法

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title>vue方法</title>    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">    <script src="js/vue.js"></script>  </head>  <body>    <div >      <p >{{message}}</p>      <button @click="changeColor">使用vue方法</button>  </div>    <script>      var vue = new Vue({        el: ".test",  //必须有el        data:{          message:"这是个测试"        },        methods:{          changeColor:function () {            document.getElementsByClassName("pp")[0].style.color="#ff0000";          }        }      })    </script>  </body></html>