vue语法（上）

创建vue实例，new vue()，兵传入对象的参数

1、常见指令

v-on  事件绑定  v-on:click可以缩写成@click

v-if 销毁DOM  适用于不频繁隐藏，否则影响性能

<div v-if = "conditionOne">if</diV>
<div v-else-if = "conditionTwo">else if</diV>
<div v-else>else</diV>

v-show 隐藏DOM  适用频繁隐藏

v-if 是否展示

v-for 循环   

循环数组

v-for =”(item ,index) of list" ：key = {{index}}

循环对象 

listOnject = {
    firstName: 'dell',
    lastName: 'lee',
    job: 'teacher'
}
v-for =”(value ,key , index ) in listObject"

1、循环的时候增加唯一的key，vue底层发现DOM的key值没变时，就不再重新渲染页面，提高i性能 

2、v-for 与v-if 不能同时加在一个标签上，v-for的优先级高于v-if的优先级，加在同一个标签上v-if不起作用 

使用template占位

<template
    v-for = "(value,key,index) in listObject"
    :key = "index"
>
    <div v-if = "key !== 'lastname'">
        {{value}} -- {{key}}
    </div>
<template>

双向绑定 v-model = "inputValue"

v-bind 一个标签上 v-bind:title 可简写成:titke

      <button
        v-bind:title = "inputValue"
      >
      增加
      <button>

的属性想和数据发生绑定 v-bind:title = "inputValie"

若在标签外面绑定一个变量直接插值表达式即可

     <button>
         增加{{inputValue}}
      <button>

2、常用语法

 动态属性

    data(){
        return {
            name:'title',
            event:'click'
        }
    },
    template:`
        <div
            @click = "handleclick"
            @[event] = "handleclick"
        >
        </div>
    `

修饰符

//事件修饰符 stop prevent capture self once passive
    @click.prevent = "handleClick" //阻止冒泡
    @click.self = "handleDivClick" //只有点击自己本身有用，点击子元素没用
    @click.once = “handleDivClick"//事件只绑定一次
    @click。cpture = “handleDivClick"//变成捕获事件
//按键修饰符 enter tab delete esc up down left right 
    @keydown.enter = “handleKeyDown" //按下enter键触发事件 
    @keydown.tab = “handleKeyDown" //按下tab键触发事件
//鼠标修饰符
    @click.left = "handleClick"
    @click.right = "handleClick"
    @click.middle = "handleClick"
//精确修饰符
@click.ctrl.exact = "handleClick"  //必须是按住ctrl 再点击

computed methods

计算属性依赖的值不变时不会重新计算

方法里面的计算，只要页面重新渲染，就会重新计算

    computed: {
        data(){
            return Date.now() + this.count;
        }
    },
    methods:{
        getTotal(){
            return Date.now();
        }
    }

watch监听器：解决异步操作

样式绑定

    data(){
        return {
            classString:'red',
            classObject: {red:false,green:true},//类名
            classArray:['red','green',{brown:false}]//类名
        }
    },
    template:`
        <div :class = "classArray">hello world</div>
    `
 

父组件给子组件加样式

<demo class="green"/>

子组件
<div :class = "$attrs.class">ones</div>

 行内样式

  methods: {},
  data() {
    return {
      classString: "red",
      classObject: { red: false, green: true },
      classArray: ["red", "green", { brown: false }],
      styleObject:{
          color:'green',
          background:'blue',
      }
    };
  },
  template: `
        <div :class = "classArray">hello world</div>
            <div :style = "styleObject">
                 hello world
            </div>
    `,

事件绑定

//如果不传参数，则用event接收原生参数
methods: {
    handleBtnClick(event){
        console.log(event);
        console.log(event.target)//输出 <button>Button</button>
    }
},

template:`
    <div>
        {{counter}}
        <button @click = "handleBtnClick">Button</button>
    </div>




//当一个函数需要传参数的同时，还要把原生事件传过去，则用$event参数，使用event接收原生事件
methods: {
    handleBtnClick(num , event){
        console.log(event);
        this.counter += num;
    }
},

template:`
    <div>
        {{counter}}
        <button @click = "handleBtnClick(2,$event)">Button</button>
    </div>
`

//如果想要绑定多个函数，用括号加逗号写
 <button @click = "handleBtnClick()，handleBtnClick1()">Button</button>

 阻止事件冒泡

methods: {
    handleDivClick(){
        alert('div clicked')
    },
    handleBtnClick(){
        this.count +=1;
    },
}
template:·
    <div>
        {{counter}}
        <div @click = "handleDivClick">
            <button @click.stop = "handleBtnClick">button</button>
        </div>
    </div>
`

---

双向绑定 

<input v-modal = "message"/>
<textarea v-modal = "message"/>
<input type = "checkbox" v-modal = "message" value = "jack"/> //message为[] value = "jack"告诉往message里添加什么内容

<input type = "radio" v-modal = "message" value = "jack"/> //radio为单选，message为'' value = "jack"告诉往message里添加什么内容

{{message}}<input type = "checkbox" v-modal = "message" true-value = "hello" false-value = "world"/> //true-value属性自定义message为真时展示的值

 v-modal 修饰符:lazy  number trim 

v-modal.lazy = "message"

下拉框

<select v-modal = "message" multiple>
    <option disabled value =‘’>请选择内容</option>
    <option value = "A">A</option>
    <option value = "B">B</option>
    <option value = "C">C</option>
</select>

3、父组件向子组件传值

//父组件
v-bind:content = "item"

//子组件
props:[content]