前端记录（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:'北京'
                }
                    }
                 )

转载于:https://www.cnblogs.com/being-a-tester/p/10403143.html