Vue01

Vue01

• veu-cdn

  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
  

  声明式渲染

  <div id="app">
     {{message}}
  </div>
  
  <!--1.导入Vue.js-->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
  
  <script>
       var vm = new Vue({
           el: "#app",
           data: {
               message: "hello,Vue"
           }
       });
  </script>
  

  • v-bind

  <div id="app">
       <span v-bind:title="message">
      鼠标悬停几秒钟查看此处动态绑定的提示信息！
    </span>
  </div>
  
  <!--1.导入Vue.js-->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
  
  
  <script>
      var vm = new Vue({
          el: "#app",
          data: {
              message: "hello"
          }
      });
  </script>
  

  条件与循环

  1. v-if,v-if-else ,v-else
  2. v-for

  数据双向绑定

  1. v-model

  <!--Vue 还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。-->
  <div id="app">
      <p>{{message}}</p>
      <input type="text" v-model="message">
      <input type="radio" name="sex" value="男" v-model="songxinyu">男
      <input type="radio" name="sex" value="女"v-model="songxinyu">女
      <!--展示选中了谁-->
      <p>
          选中了谁：{{songxinyu}}
      </p>
  </div>
  
  <!--1.导入Vue.js-->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
  <script>
      var vm = new Vue({
          el: "#app",
          data: {
              message: "hello",
              checked: false,
              songxinyu:''
          }
      });
  </script>
  

  事件

  on

  
  <div id="app">
      <p>{{message}}</p>
  <button v-on:click="suibian">Click Me</button>
  
  </div>
  <!--为了让用户和你的应用进行交互，
  我们可以用 v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法：-->
  
  <!--1.导入Vue.js-->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
  
  
  <script>
      var vm = new Vue({
          el: "#app",
          data: {
              message: "hello,vue"
          },
          methods: {
              suibian: function () {
                  alert("test");
                  this.message=this.message.split('').reverse().join('');
              }
          }
      });
  </script>
  

  组件

  <div id="app">
      <!--组件;传递给组件中的值，props-->
      <suibian v-for="item in items" v-bind:song="item"></suibian>
  </div>
  
  <!--1.导入Vue.js-->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
  <script>
  
      // 定义vue组件
      Vue.component("suibian",{
          props: ["song"],
          template: '<li>{{song}}</li>'
      });
      var vm = new Vue({
          el: "#app",
          data: {
              items: ["Java","Linux","css"]
          }
      });
  </script>
  

  通信

  1. jquery.ajax()
  2. axios
  • axios-cdn

  <!--axios-->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  

  <div id="vue" v-clock>
      <div>{{info.name}}</div>
      <a v-bind:href="info.url">点我</a>
  
  </div>
  
  <!--axios-->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <!--1.导入Vue.js-->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
  
  
  <script type="text/javascript">
      var vm = new Vue({
          el: "#vue",
          data(){
              return{
                  // 请求的返回参数必须和json字符串一样
                  info:{
                      name: null,
                      url: null
                  }
              }
          },
          mounted(){// 钩子函数
              axios.get("../data.json").then(response=>(this.info=response.data))
          }
      });
  </script>
  

  3. 解决网页闪烁

  <!--结果闪烁问题 v-clock-->
      <style>
          [v-clock]{
              display: none;
          }
      </style>