Vue 指令

vue指令

v-bind 样式绑定 - 对象 写法

<p style = "width: 100px;height: 100px;background: green;"></p>
<p :style = "{width: '100px',height: '100px',background: 'blue'}"></p>
<p :style = "{width: w,height: h,background: backg}"></p>

v-bind 样式绑定 -数组写法

<p :style = "[{width: '100px',height: '100px'},{background: 'pink'}]"></p>
<p :style = "[ styleObj,styleColor ]"></p>

v-bind 类名绑定 -数组写法

<p :class = "['size','bg']"></p>
<p :class = "[size,bg]"></p>

v-bind 类名绑定 -对象写法

<p class = "size bg"> </p>
<p :class = "{size: true,bg: true}"></p>
<p :class = "{[size]: true,[bg]: true}"></p>

推荐使用写法

<p :class = "{[size]: true,[bg]: true}"></p>
<p :class = "[ size,bg ]"></p>

引申写法

<p :class = "{ [size]: flag,[bg]: flag}" ></p>
<p :class = "[ size, flag?bg:color ]"></p>
<p :class = "[ size, flag && bg || color ]"></p>

这种写法类名不会覆盖

<p class = "text" :class = [size,bg]></p>

v-bind单向数据绑定

<input type="text" v-bind:value = "msg">
<!-- 简写 -->
<input type="text" :value = "msg">

双向数据绑定

<input type="text" v-model = "msg">

单向实现双向效果

<input type="text" :value = "msg" v-on:input = "change">
<!-- 简写 -->
<input type="text" :value = "msg" @input = "change">

事件有几种绑定形式

  1. js中绑定
    var input = document.querySelector('input')
    input.oninput = function () {}
    DOM2级事件   事件监听
  2. html结构中绑定
    function load () {}
    vue中事件格式： 
  举例：  <div v-on:eventType = '事件处理程序'></div>
  vue中写事件，记住先写逻辑在绑定

经验： 看到表单,想要得到它的value值，直接v-model

 vue事件传参
  new Vue({
el: '#app',
data: {
  val: ''
},
methods: {
  fn ( val ) {
    alert( val )
  }
}
  })

如果我们的fn函数接收2个参数，其中一个参数是事件对象，事件对象会丢失
解决方法：在调用方法时，传入一个实际参数

	<button @click = "fn( $event,val )"> 点击 </button>

事件修饰符

methods: 方法： 里面存放的是： 事件处理程序
methods: { 
      largeHandler ( e ) {
        alert( 'large' )
      },
      middleHandler ( e ) {
        alert( 'middle' )
      },
      smallHandler ( e ) {
        alert( 'small' )
      }
    }
    ###  stop self 都可以阻止事件的冒泡
	 <div class="large" @click.stop = "largeHandler">
     <div class="middle" @click.stop = "middleHandler">
    <div class="small" @click.stop = "smallHandler"></div>
      </div>

按键修饰符

	<input type="text" @keyup.13 = "fn( val )" v-model = 'val'>
    <hr>
    <input type="text" @keyup.enter = "fn( val )" v-model = 'val'>
    <hr>
    <input type="text" @keyup.p = "fn( val )" v-model = 'val'>

模板语法（双大括号语法）

数据类型有哪些？【 2种说法 】
1. 第一种类型说法
初始数据类型： number string null undefined boolean
引用数据类型: object
2. 第二种说法
基本数据类型L: number string boolean
复杂数据类型: object
特殊数据类型: null undefined

	    <p> number: {{ num }} </p>
	    <p> string: {{ str }} </p>
	    <p> boolean: {{ bool && 1 || 2 }}</p>
	    <p> null: {{ nul && 3 || 4 }}</p>
	    <p> undefined: {{ und && 5 || 6 }}  </p>
	    <p> array: {{ arr[1] }}</p>
	    <p> object: {{ obj.name }}</p>
	  - 所有的类型都是支持的，但是console.log   alert这些输出语法是不支持的

计算属性

计算属性computed中存放的都是方法
计算属性是一个 选项， 选项值是一个对象，对象中存放的是方法
方法必须要有返回值

computed: {
      newMsg () {
        return this.msg.split('').reverse().join('')
      }
    }
计算属性的使用直接将方法名当做全局变量一样直接使用
<p> {{ newMsg }} </p>

总结： 什么时候使用计算属性？
满足两个条件即可
必须有逻辑处理，还有返回值
我们使用的结果，要当做全局变量一样使用
计算属性一旦确定就不可更改了

watch 侦听属性

1. 以案例来学习watch - > 用户名写入

2. watch是一个选项， 选项值是一个对象

   • 对象中可以存放的类型有哪些
   • { [key: string]: string | Function | Object | Array }
   • 常用的是方法和对象

3. 总结：
   由一个数据改变，引起的新的数据请求
   侦听 谁？ 谁 -> 指的是data中的数据

    deep: true, //深度监听
    handler(val) { // 处理程序