Vue 指令相关用法

Vue相关用法：

v-text 绑定数据，等价于 {{}}

如下：
<span v-text="msg"></span>
<span>{{ msg }}</span>

v-once 一次性插值，不会更新

<span v-once> {{ msg }}</span>

原始html

v-html 解析文本为html代码

v-bind设置dom的id、disable等特性(接收参数):缩写 “:”

<p v-bind:id="pId"></p>
<a v-bind:href="url">链接</a>

--动态参数：
<p v-bind:[message]="value"><p>
data: {
    message: 'style',
    value: 'color: red'
}

--动态切换class：
<div v-bind:class="{{ active: isActive, 'text-danger': hasError }}"></div>
data: {
    isActive: true,
    hasError: false
}
结果为：<div class="isActive"></div>

--绑定样式style：
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
    activeColor: 'red',
    fontSize: 30
}
或
<div v-bind:style="styleObject"></div>
data: {
	styleObject: {
        color: 'red',
        fontSize: '13px'
	}
}

v-on 绑定方法，监听事件，缩写：’@‘

<a v-on:click='doSomething'>..<a>
缩写：<a @click='doSomething'>..<a>	

--例子：
<div id = 'wId'>
	<button v-on:click="say('hi')">Say hi</button>
</div>

new Vue({
    el: 'wId',
    methods: {
        say: function (message) {
            alert(message)
        }
    }
})

--事件修饰符
.stop
.prevent
.capture
.self
.once
.passive

--按键修饰符

computed 计算属性：

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

条件渲染：v-if v-else v-else-if v-show

v-show:通过切换元素css属性display来展示元素

列表渲染：v-for

<ul id = 'example'>
	<li v-for='(item, index) in items'>
		{{ parentMsg }} - {{ index }} - {{ item.msg }}
	</li>
</ul>

var example = new Vue({
    el: '#example',
    data: {
        parentMsg: 'parent',
        items: [
            { msg： 'Foo' },
            { msg： 'Bar' }
        ]
    }
})
输出：
parent-0-Foo
parent-1-Bar

v-model 表单输入绑定,

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
当在input框中输入数据时，会在下方p标签中展示出来。

v-slot 提供插槽，缩写： ‘#’，注意：template:``,符号不是引号，是tab上面的按钮符号

<span v-text="msg"></span>
	<child-component></child-component>
<span>{{ msg }}</span>

<script>

import Vue from 'vue'
Vue.component('child-component', {
    template: `
      <div>Hello, I am slot.</div>
    `
})

export default {
  data() {
    return {
      msg: '你好啊',
      };
  }
};
</script>
--输出：
你好啊
Hello, I am slot.
你好啊

--具名插槽：
 <child-component>
 <template slot="girl">
 漂亮、美丽动人 
 </template>
 <template slot="boy">
 帅气、努力
 </template>
 <div>
 我是默认的插槽
 </div>
 </child-component>
 
 Vue.component('child-component', {
    template: `
      <div>
        <h4>Hello, I am slot.</h4>
        <slot name="girl"></slot>
        <slot></slot>
        <slot name="boy"></slot>
      </div>
    `
})

--输出：位置和插槽名称对应
Hello, I am slot.
漂亮、美丽动人
我是默认的插槽
帅气、努力

作用域插槽：在组件上的属性可以在组件元素内使用

--作用域插槽：
<child :lists="nameList">
    <template slot-scope="a">
        <div v-if="a.obj.id==1">你好：<span>{{a.obj.name}}</span></div>
        <div v-else>{{a.obj.name}} -- {{a.obj.id}}</div>
    </template>
</child>

Vue.component('child', {
  props: ['lists'],
  template: `
    <div>
      <ul>
        <li v-for="list in lists">
          <slot :obj="list"></slot>
        </li>
      </ul>
    </div>
  `
})

export default {
  data() {
    return {
      nameList: [
      {id:1, name: '孙七'},
      {id:2, name: '许六'},
      {id:3, name: '王五'},
      {id:4, name: '李四'},
      {id:5, name: '张三'},
    ]
    }
    
  }
};

--输出：
你好：孙七
许六 -- 2
王五 -- 3
李四 -- 4
张三 -- 5

引用：https://www.cnblogs.com/chinabin1993/p/9115396.html