前端记录（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="[num==0?'red':'']">哈哈哈
• 条件渲染：通过条件指令可以控制元素的创建(显示)或者销毁(隐藏)
  • v-if可以控制元素的显示或删除：<h1 v-if="ok">哈哈啊哈 ok设置为true时标签显示，为false时标签删除
  • 还可以使用v-else-if和v-else

  <h1 v-if="num0">0000
  <h1 v-else-if="num1">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:'北京'
                  }
                      }
                   )