前端记录（vue基础）

• 简介：
  • js的库，一样须要引入

  • 每一个 Vue 应用都是经过实例化一个新的 Vue对象开始的，el属性对应一个标签，当vue对象建立后，这个标签内的区域就被vue对象接管，在这个区域内就能够使用vue对象中定义的属性和方法。

    var vm = new Vue({
    el:'#app', 这里绑定div
    data:{message:'hello world!'} 这里放数据
    });
    <div id="app">{{ message }}</div> 这里能够直接拿到message的数据

• 事件写法：
  • 标签内直接写：<input type="button" value="哈哈" v-on:click="要操做的东西" /> 还能够写成：<input type="button" value="哈哈" @click="要操做的东西" />
• 绑定属性：
  • <a v-bind:href="message">连接连接</a> 还能够写成：<a :href="message">连接连接</a>
  • 事件和属性都在绑定的标签里写，能够直接操做Vue内的数据等
• 绑定class
  • 使用v-bind指令来设置元素的class属性，它们的属性值能够是表达式
  • 对象（字典）绑定：<h1 :class="{red:ok,ft:yes}">哈哈哈
  • 数组绑定:<h1 :class="[num==0?'red':'']">哈哈哈
• 条件渲染：经过条件指令能够控制元素的建立(显示)或者销毁(隐藏)
  • v-if能够控制元素的显示或删除：<h1 v-if="ok">哈哈啊哈 ok设置为true时标签显示，为false时标签删除

  • 还能够使用v-else-if和v-else

    <h1 v-if="num==0">0000
    <h1 v-else-if="num==1">1111
    <h1 v-else>2222

  • vue使用v-show来控制显示和隐藏：<h1 v-show="ok">这是vshow
• 列表渲染：经过v-for指令能够将一组数据渲染到页面中，数据能够是数组或者对象，v-for 指令须要使用 item in items 形式的特殊语法
  • 遍历数组：<li v-for="item in items">{{item}}
  已经定义了一个数组items，里面有六个元素，此时会生成六个标签并把数组内的元素打印出来
  • 还能够取出索引值<li v-for="(item,index) in items">{{item}} 哈哈 {{index}}
  这里索引必须在元素后面
  • 遍历对象（字典）：<li v-for="value in abc">{{value}}
  • 能够取出键值：<li v-for="(value,key) in abc">{{value}} 哈哈 {{key}}
• 函数调用

  • 要给事件调用的函数写在methods中，调用时<input type="button" value="按一下试试" @click="这里直接调用methods里写的函数"/>

    methods:{
    btn:function(){
    alert('hahaha')
    }
    }

• 表单输入绑定
  • 能够用 v-model 指令在表单 <input> 及 <textarea> 元素上建立双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素
  • 输入框获取输入值：<input type="text" v-model="mes"/>{{mes}}

  • 下拉框绑定

    <select v-model="sel">
          <option>北京</option>
          <option>上海</option>
          <option>纽约</option>
      </select>{{sel}}
                  var vm = new Vue({
                  el:'#app',
                  data:{
                      mes:'',
                      sel:'北京'
                  }
                      }
                   )