vue基础笔记

1：v-bind绑定变量（字符串的一部分）

<div id="app-9">
  <p v-bind:id="'list-'+num">
    v-bind绑定一部分变量
  </p>
</div>


  var app9 = new Vue({
    el: "#app-9",
    data: {
      num: 1
    }
  })

2： v-on:click 简写 @click


    .stop - 调用 event.stopPropagation()。
    .prevent - 调用 event.preventDefault()。
    .capture - 添加事件侦听器时使用 capture 模式。
    .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
    .{keyCode | keyAlias} - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
    .native - 监听组件根元素的原生事件。


3:  调用计算表达式如果message不变，将调用缓存

<div id="app-1">
  <p>{{getDate}}</p>
</div>

  var app1 = new Vue({
    el: "#app-1",
    data: {
      message: "日期"
    },
    computed: {
      getDate: function(){
        return this.message + ": " + Date.now()
      }
    }
  })

app1.getDate 多次调用时，调用的是缓存.如果message的值改变，那么app1.getDate返回值才会更新

4: computed中添加set和get方法自定义赋值和读取表达式

<div id="app-1">
  <p>{{fullName}}</p>
</div>

  var app1 = new Vue({
    el: "#app-1",
    data: {
      firstName: "zhang",
      lastName: "cai yan"
    },
    computed: {
      fullName: {
        get: function(){
          return this.firstName + "  1   " + this.lastName
        },
        set: function(newValue){
          this.firstName = newValue.split(" ")[0]
          this.lastName = newValue.split(" ")[1]
        }
      }
    }
  })

5: watch

<div id="app-1">
  你来自什么星球： <input v-model="question"><br/>

  <span>{{answer}}</span>
</div>

  var app1 = new Vue({
    el: "#app-1",
    data: {
      question: "",
      answer: "请回答问题...."
    },
    watch: {
      question: function(){
        this.answer = "回答中...."
      }
    }
  })

6: v-bind:class 传入对象

1):
<div id="app-1">
  <div class="star" v-bind:class="{active: isActive, current: isCurrent}">对象语法</div>
</div>

  var app2 = new Vue({
    el: "#app-1",
    data: {
      isActive: true,
      isCurrent: true
    }
  })

2):
<div id="app-1">
  <div class="name" v-bind:class="classObject">对象语法</div>
</div>


  var app1 = new Vue({
    el: "#app-1",
    data: {
      classObject: {
        'active': true,
        'text-danger': true
      }
    }
  })

3):
<div id="app-1">
  <div class="name" v-bind:class="classObject">对象语法</div>
</div>


  var app1 = new Vue({
    el: "#app-1",
    data: {
      classObject: {
        'active': true,
        'current': true
      }
    },
    computed: {
      classObject: function(){
        return{
          active: this.isActive,
          current: this.isCurrent
        }
      }
    }
  })


4)：

<div id="app-1">
  <div class="name" v-bind:class="[active, {blue: isBlue}, isCurent ? 'current' : '']">对象语法</div>
</div>

  var app1 = new Vue({
    el: "#app-1",
    data: {
      active: 'active',
      isBlue: true,
      isCurrent: true
    }
  })


7: 组件 注意: 使用组件时，组件添加了class样式后，会添加到组件中的模板class，如下

<div id="app-2">
  <my-template class="blue" v-bind:class="{green: isGreen}"></my-template>
</div>

  Vue.component("my-template", {
    template: "<p class='red' style='color:red;'>组建</p>"
  })

  var app2 = new Vue({
    el: "#app-2"
  })

8: v-bind:style 和 v-bind:class的使用方式差不多，对象中有数组、hash形式，并且在数组中可以使用表达式，不一样的是v-bind:class中的hash是样式名称对应布尔型数据，而v-bind:style中的hash是style的样式名称和值的对应，class中数组的元素是class样式名称的变量，而style中的数组元素是对象，class中的样式对象是直接添加。


<div id="app-2">
  <p v-bind:style="[sizeObject, weightObject, {color: red, height: height+'px'}]">对象</p>
</div>


  var app1 = new Vue({
    data: {
      red: 'green',
      height: 25,
      sizeObject: {
        fontSize: '20px'
      },
      weightObject: {
        fontWeight: 'bold'
      }
    },
    el: "#app-1"
  })

9:  v-if、v-else-if、v-else、v-show,v-show和v-if的区别是，v-if如果为true才渲染，false不会渲染，v-show是display，无论是否为true都会渲染

<div id="app-3">
  <p v-if="isSmall">small</p>
  <p v-else-if="isMiddle">middle</p>
  <p v-else>big</p>
</div>

  var app3 = new Vue({
    el: "#app-3",
    data: {
      isSmall: false,
      isMiddle: true
    }
  })

10:  vue尽可能复用元素，这样就可以提高渲染效率，如果不要复用，而强制重新渲染。

<div id="key-example" class="demo">
  <template v-if="loginType === 'username'">
    <label>Username</label>
    <input placeholder="Enter your username" key="username-input">
  </template>
  <template v-else>
    <label>Email</label>
    <input placeholder="Enter your email address" key="email-input">
  </template>
  <button v-on:click="toggleLoginType">切换</button>
</div>

  new Vue({
    el: '#key-example',
    data: {
      loginType: 'username'
    },
    methods: {
      toggleLoginType: function () {
        return this.loginType = this.loginType === 'username' ? 'email' : 'username'
      }
    }
  })


11: v-for: 数组、对象


1）<li v-for="item in items">{{item.message}}</li>

2）<li v-for="(item, index) in items">{{index}}  {{item.message}}</li>

3）
<li v-for="item in object">  {{item}}</li>
<li v-for="(value, key) in object"> {{key}} {{value}}</li>
<li v-for="(value, index, key) in object">{{index}} {{key}} {{value}}</li>

  var app1 = new Vue({
    el: '#app-1',
    data: {
      object: {
        firstName: "zhang",
        lastName: "san"
      }
    }
  })

4) <li v-for="n in 10">{{n}}</li>

  var app1 = new Vue({
    el: '#app-1',
    data: {
      object: {
        firstName: "zhang",
        lastName: "san"
      }
    }
  })

5) <li v-for="n in newNumbers">{{n}}</li>

var app1 = new Vue({
  el: '#app-1',
  data: {
    numbers: [1,2,3,4,5]
  },
  computed: {
    newNumbers: function(){
      return this.numbers.filter(function(number){
        return number % 2 === 0
      })
    }
  }
})

12: 数组中添加的方法： push, unshift, pop, shift, splice, slice, filter, sort, reverse, concat

直接使用下标添加数组元素，Vue无法检测到数组的变动,可以使用set方法来实现Vue.set(app1.todos, 9, "b")

13: v-mode 实现文本框数据双向绑定

1):
<div id="app-1">
  <input type="checkbox" id="checkbox" v-model="checked">
  <p>{{checked}}</p>
</div>

var app1 = new Vue({
  el: "#app-1",
  data: {
    checked: true
  }
})

2): 绑定为一个数组

<div id="app-1">
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
</div>

var app1 = new Vue({
  el: "#app-1",
  data: {
    checkedNames: []
  }
})

3): 绑定到单选按钮中(radio)

<div id="app-2">
  <input type="radio" v-model="picked" value="One">
  <label>One</label>
  <br/>
  <input type="radio" v-model="picked" value="Two">
  <label>Two</label>
  <br/>
  <span>Picked: {{picked}}</span>
</div>


var app2 = new Vue({
  el: "#app-2",
  data: {
    picked: "One"
  }
})


4) select下拉框绑定值


<div id="app-1">
  <select v-model='selectValue'>
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="c">c</option>
  </select>
  <span>selectValue: {{ selectValue }}</span>
</div>

var app1 = new Vue({
  el: "#app-1",
  data: {
    selectValue: 'c'
  }
})


5) multiple select

<div id="app-1">
  <select v-model='selectValue' multiple>
    <option value="a" v-for="option in options" v-bind:value="option.value">{{option.text}}</option>
  </select>
  <span>selectValue: {{ selectValue }}</span>
</div>


var app1 = new Vue({
  el: "#app-1",
  data: {
    selectValue: ['C'],
    options: [
      {text: "One", value: "A"},
      {text: "Two", value: "B"},
      {text: "Three", value: "C"}
    ]
  }
})

6) 修饰符
number  自动转换为数字
trim  自动过滤两边的空格

<div id="app-1">
  <input v-model.number="msg">
  <span>msg: {{ msg }}</span>
</div>

var app1 = new Vue({
  el: "#app-1",
  data: {
    msg: "111"
  }
})

typeof app1.msg 

14: 组件  全局和局部,使用模板可以直接使用模板名称或者通过is指定，组件中可以使用Vue构造器中的大多数选项，但是使用data的时候一定要是函数。

1)
全局：
<div id="app-1">
  <my-component></my-component>
</div>

Vue.component("my-component", {
  template: "<div>模板</div>"
})

var app1 = new Vue({
  el: "#app-1",
})


2)
局部：

<div id="app-2">
  <my-component2></my-component2>
  或
  <div is="my-component2"></div>
</div>


var app2 = new Vue({
  el: "#app-2",
  components: {
    "my-component2": {
      template: "<div>模板2</div>"
    }
  }
})


3) 组件中使用data

<div id="app1">
  <my-component></my-component>
  <my-component></my-component>
  <my-component></my-component>
</div>


  Vue.component('my-component', {
    template: '<button v-on:click="counter+=1">{{name}}: {{ counter }}</button>',
    data: function(){
      return {
        name: "点击加一",
        counter: 0
      }
    }
  })

  new Vue({
    el: '#app1'
  })

4) props传递参数

<div id="app1">
  <my-component v-bind:message="message1" v-bind:count="count1"></my-component>
  <my-component v-bind:message="message2" v-bind:count="count2"></my-component>
</div>


  Vue.component('my-component', {
    template: '<button v-on:click="counter+=count">{{message}} {{counter}}</button>',
    props: ["message", "count"],
    data: function(){
      return {
        counter: 0
      }
    }
  })

  new Vue({
    el: '#app1',
    data: {
      message1: "点击加一",
      message2: "点击加二",
      count1: 1,
      count2: 2
    }
  })

5)  自定义prop中的type类型，默认值 String、Number、Boolean、Function、Object、Array

数组／对象的默认值应当由一个工厂函数返回

<div id="app1">
  <input v-model="message">
  {{message}}
  <my-component v-bind:message="message" v-bind:message1="message1" v-bind:count="count1"></my-component>
</div>


  Vue.component('my-component', {
    template: '<button v-on:click="counter+=count">{{message}} {{message1}} {{counter}} {{names}} {{user.name}}</button>',
    props: {
      message: String,
      message1: [String, Number],
      count: {
        type: Number,
        default: 1
      },
      names: {
        type: Array,
        default: function(){
          return [1,2,3]
        }
      },
      user: {
        type: Object,
        default: function(){
          return {
            name: "zhang san"
          }
        }
      }
    },
    data: function(){
      return {
        counter: 0
      }
    }
  })

  new Vue({
    el: '#app1',
    data: {
      message: "",
      message1: "点击加一",
      count1: 1
    }
  })