vue入门

成玉

第一节:Hello World!

原生

<!DOCTYPE html>  
<html lang="en">

<head>  
  <meta charset="utf-8">
  <title>vue_native</title>
</head>

<body>  
  <div id="app">
  </div>
  <script>
    let app = document.getElementById('app');
    app.innerHTML = 'Hello Vue!';
  </script>
</body>

</html>  

vue

<!DOCTYPE html>  
<html lang="en">

<head>  
  <meta charset="utf-8">
  <title>vue</title>
</head>

<body>  
  <div id="app">
    {{message}}
  </div>
  <script src="./vue.js"></script>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    })
  </script>
</body>

</html>  

第二节:处理用户输入

原生

<!DOCTYPE html>  
<html lang="en">

<head>  
  <meta charset="utf-8">
  <title>vue_native</title>
</head>

<body>  
  <div id="app">
    <p id="mes">hello</p>
    <input type="text" value="hello">
  </div>
  <script>
    let mes = document.getElementById('mes');
    let input = document.getElementsByTagName('input')[0];

    (async ()=>{
      while (true) {
        await sleep(1000);
        mes.innerHTML = input.value;
      }
    })()

    //暂停
    async function sleep(ms) {
      await new Promise(resolve => setTimeout(resolve, ms))
    }
  </script>
</body>

</html>  

vue

<!DOCTYPE html>  
<html lang="en">

<head>  
  <meta charset="utf-8">
  <title>vue</title>
</head>

<body>  
  <div id="app">
    <p id="mes">{{message}}</p>
    <input type="text" v-model="message">
  </div>
  <script src="./vue.js"></script>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    })
  </script>
</body>

</html>  

第三节:条件渲染

原生

<!DOCTYPE html>  
<html lang="en">

<head>  
  <meta charset="utf-8">
  <title>vue_native</title>
</head>

<body>  
  <div id="app">
    <p id="hello">hello</p>
    <p id="world" style="display:none">world</p>
    <button onclick="change()">隐藏转换</button>
  </div>
  <script>
    let flag = true;
    let app = document.getElementById('app');
    let hello = document.getElementById('hello');
    let world = document.getElementById('world');

    function change() {
      flag = !flag;
      if (flag) {
        hello.style.display = "block";
        world.style.display = "none";
      } else {
        hello.style.display = "none";
        world.style.display = "block";
      }
    }
  </script>
</body>

</html>  

vue

<!DOCTYPE html>  
<html lang="en">

<head>  
  <meta charset="utf-8">
  <title>vue</title>
</head>

<body>  
  <div id="app">
    <p id="hello" v-if="flag">hello</p>
    <p id="world" v-else>world</p>
    <button @click="change()">隐藏转换</button>
  </div>
  <script src="./vue.js"></script>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        flag:true
      },
      methods:{
        change:function(){
          this.flag=!this.flag;
        }
      }
    })
  </script>
</body>

</html>  

第四节:列表渲染

原生

<!DOCTYPE html>  
<html lang="en">

<head>  
  <meta charset="utf-8">
  <title>vue_native</title>
</head>

<body>  
  <div id="app">
    <ul>
    </ul>
  </div>
  <script>
    let arr = ['hello', 'world'];
    let ul = document.getElementsByTagName('ul')[0];
    for(let t of arr){
      let  li = document.createElement("li");
      li.innerHTML = t;
      ul.appendChild(li);
    }
  </script>
</body>

</html>

vue

<!DOCTYPE html>  
<html lang="en">

<head>  
  <meta charset="utf-8">
  <title>vue</title>
</head>

<body>  
  <div id="app">
    <ul>
      <li v-for="t in arr">{{t}}</li>
    </ul>
  </div>
  <script src="./vue.js"></script>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        arr:['hello','world']
      }
    })
  </script>
</body>

</html>  

第五节:请求数据

原生

<!DOCTYPE html>  
<html lang="en">

<head>  
  <meta charset="utf-8">
  <title>vue_native</title>
</head>

<body>  
  <div id="app">
    <ul>
    </ul>
    <button onclick="getData()">请求数据</button>
  </div>
  <script src="./jquery.js"></script>
  <script>
    let arr = ['hello', 'world'];
    let ul = document.getElementsByTagName('ul')[0];
    for(let t of arr){
      let  li = document.createElement("li");
      li.innerHTML = t;
      ul.appendChild(li);
    }

    let resArr = [];
    function getData(){
      let api = 'http://localhost:41090/api/db';
      $.ajax({
        type:'GET',
        url:api,
        dataType:'json',
        success:function(data){
          for(let item of data){
            resArr.push(item.name);
          }
          while(ul.firstChild){
            ul.removeChild(ul.firstChild);
          }
          for(let t of resArr){
            let  li = document.createElement("li");
            li.innerHTML = t;
            ul.appendChild(li);
          }
        }
      });
    }

  </script>
</body>

</html>  

vue

<!DOCTYPE html>  
<html lang="en">

<head>  
  <meta charset="utf-8">
  <title>vue</title>
</head>

<body>  
  <div id="app">
    <ul>
      <li v-for="t in arr">{{t}}</li>
    </ul>
    <button @click="getData()">请求数据</button>
  </div>

  <script src="./vue.js"></script>
  <script src="./vue-resource.js"></script>
  <script>
    let api = 'http://localhost:41090/api/db';
    var app = new Vue({
      el: '#app',
      data: {
        arr: ['hello', 'world']
      },
      methods: {
        getData: async function() {
          let res = await this.$http.get(api);
          this.arr = [];
          for (let item of res.body) {
            this.arr.push(item.name);
          }
        }
      }
    })
  </script>
</body>

</html>  

第六节:动态改变样式

原生

<!DOCTYPE html>  
<html lang="en">

<head>  
  <meta charset="utf-8">
  <title>vue_native</title>
  <style>
  .red{
    color:red;
  }
  .blue{
    color:blue;
  }
  </style>
</head>

<body>  
  <div id="app">
    <p class="red">Hello World!</p>
    <button onclick="changeClass()">更改样式</button>
  </div>

  <script>
  let p = document.getElementsByTagName('p')[0];
  let flag=true;
  function changeClass(){
    flag=!flag;
    if(flag){
      p.setAttribute("class","red");
    }else{
      p.setAttribute("class","blue");
    }
  }
  </script>
</body>

</html>

vue

<!DOCTYPE html>  
<html lang="en">

<head>  
  <meta charset="utf-8">
  <title>vue</title>
  <style>
  .red{
    color:red;
  }
  .blue{
    color:blue;
  }
  </style>
</head>

<body>  
  <div id="app">
    <p :class="{red:flag,blue:!flag}">Hello World!</p>
    <button @click="flag=!flag">更改样式</button>
  </div>

  <script src="./vue.js"></script>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        flag:true
      }
    })
  </script>
</body>

</html>  

第七节:观察属性

原生

<!DOCTYPE html>  
<html lang="en">

<head>  
  <meta charset="utf-8">
  <title>vue_native</title>
</head>

<body>  
  <p>
    <input onchange="send()" type="text" value="" />
  </p>
  <div id="show">
  </div>

  <script src="./jquery.js"></script>
  <script>
  let input = document.getElementsByTagName('input')[0];
  let show = document.getElementById('show');
  function send(){
    let value = input.value;
    showTables(value);
  }

  function showTables(dbName){
      let api = 'http://localhost:41090/api/db/'+ dbName + '/table';
      $.ajax({
        type:'GET',
        url:api,
        dataType:'json',
        async:false,
        success:function(data){
          let resArr = [];
          for(let item of data){
            resArr.push(item.name);
          }
          while(show.firstChild){
            show.removeChild(show.firstChild);
          }
          for(let t of resArr){
            let  p = document.createElement("p");
            p.innerHTML = t;
            show.appendChild(p);
          }
        }
      });
    }
  </script>
</body>

</html>

vue

<!DOCTYPE html>  
<html lang="en">

<head>  
  <meta charset="utf-8">
  <title>vue</title>
</head>

<body>  
  <div id="app">
    <p>
      <input type="text" v-model="value" />
    </p>
    <div>
      <p v-for="item in results">{{item}}</p>
    </div>
  </div>

  <script src="./vue.js"></script>
  <script src="./vue-resource.js"></script>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        value: '',
        results: []
      },
      watch: {
        value: async function(nowVal, oldVal) {
          let api = 'http://localhost:41090/api/db/' + this.value + '/table';
          let res = await this.$http.get(api);
          this.results = [];
          for (let item of res.body) {
            this.results.push(item.name);
          }
        }
      }
    })
  </script>
</body>

</html>