Vue一把

Vue

Vue简介

• Vue是一套前端框架
• 开始使用 Vue - 学习 Web 开发 | MDN (mozilla.org)
• 基于MVVM思想，实现数据的双向绑定

Vue开发流程

1. 引入Vue.js文件

2. 在JS区域，创建Vue核心对象，进行数据绑定

   • el后面的是选择器，指定绑定数据

   • data返回一个模型对象

   • new Vue({
         el:"#app",
         data: function(){
             return {
                 username:""
             };
         }
     });
     

   • 或者data(){return {username:""}};

3. 编写视图

   <input v-model="username">
       {{username}}
   
   </div>
   

Vue常用指令

• HTML标签前缀为v-的特殊属性

v-bind

• 为HTML标签绑定属性值，让属性值可以动态改变

• <div id="app">
  
     <a v-bind:href="url">点击一下</a>
      <a :href="url">点击一下</a>
      <input v-model="url">
  </div>
  
  <script src="js/vue.js"></script>
  <script>
  
      //1. 创建Vue核心对象
      new Vue({
          el:"#app",
          data(){
              return {
                  username:"",
                  url:"https://www.baidu.com"
              }
          }
      });
  
  </script>
  

v-model

实现数据的双向绑定

v-on

• 绑定事件

• <div id="app">
      <input type="button" value="一个按钮" v-on:click="show()"><br>
      <input type="button" value="一个按钮" @click="show()">
  </div>
  
  <script src="js/vue.js"></script>
  <script>
  
      //1. 创建Vue核心对象
      new Vue({
          el:"#app",
          data(){
              return {
                  username:"",
                  url:"https://www.baidu.com"
              }
          },
          methods:{
              show(){
                  alert("我被点了...");
              }
          }
      });
  </script>
  

判断

• v-if
• v-else
• v-else-if
• 如果满足条件，则展示。（切换是否渲染）
• v-show，切换display属性

v-for循环遍历

<div id="app">
    <div v-for="add in addrs">{{add}}<br></div>
</div>

<script src="js/vue.js"></script>
<script>

    //1. 创建Vue核心对象
    new Vue({
        el:"#app",
        data(){
            return {
                addrs:["北京","上海","西安"]
            }
        }
    });

</script>

• v-for="(add,i) in addrs"的方式获取索引，(从0开始)

Vue声明周期

• mounted 钩子可以用来在组件完成初始渲染并创建 DOM 节点后运行代码

• 生命周期选项 | Vue.js (vuejs.org)

• new Vue({
      el:"#app",
      data(){
          return {
              username:"",
              url:"https://www.baidu.com",
              count:3,
              addrs:["北京","上海","西安"]
          }
      },
      methods:{
          show(){
              alert("我被点了...");
          }
      },
      /*mounted:function () {
  
      }*/
      mounted(){
          alert("加载完成...")
      }
  });