[JavaScript知识库]vue语法

1、常见指令

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

v-if 是否展示

v-for 循环? ?

v-for =”(item ,index) of list"

双向绑定 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>
    `

修饰符

    @click.prevent = "handleClick"

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>
    `,

?

3、组件

父组件向子组件传值

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

//子组件
props:[content]