vue入门：简单指令介绍

这是我参与 8 月更文挑战的第 11 天，活动详情查看： 8月更文挑战

1.为什么使用vue

• 业务越来越复杂，更多操作在前段进行。
• 渐进式
• 不需要操作dom
• 双向绑定
• 环境构建方便
• 组件开发
• 社区活跃

2.vue入口

main.js为主入口

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App }, //指定进入app.vue
  template: '<App/>'
})

3.基本指令

1.{{}}与v-html

用于打印与输出。

<template>
<div>
<!-- 表达式 -->
<p>{{1+1>1 ? '是':'否'}}</p>
{{msg}}
<div v-html = "msg"></div>
</div>
</template>

<script>
export default {
name: 'HelloWorld',
el: '#app',

data () {
  return {
    msg:'<h1>我是消息</h1>'
}
}
}
</script>

2.v-bind

v-bind就是用于绑定数据和元素属性的。

<template>
<div v-bind:class = "active" v-bind:id=id>
{{msg}}  
</div>
</template>

<script>
export default {
name: 'HelloWorld',
el: '#app',
data () {
  return {
    msg:'<h1>我是消息</h1>',
    active:"active",
    id:19
}
}
}
</script>

3.class与style

class的绑定方式。

<template>
<div>
<p v-bind:class="{ active: isActive }" v-bind:id=id>aaa</p>
<p v-bind:class="{ active: 10>1?true:false,test:true }" >bbb</p>
<p v-bind:class='[msg]' >ccc</p>
<p v-bind:class="[{active :0 > 1},'test']" >ddd</p>
<ul>
<li v-bind:class ="[{active :index/2==0},'test']" v-for = "(item,index) in names">
{{item.name}}
</li>
</ul>
<p v-bind:style="{color: activeColor, fontSize: fontSize + 'px' }">eee</p>
</div>
</template>

<script>
export default {
name: 'HelloWorld',
el: '#app',
data () {
  return {
    msg:'<h1>我是消息</h1>',
    isActive:false,
    names:[{
      name:"aaa"
    },{
      name:"bbb"
    },{
      name:"ccc"
    }],
    activeColor: 'red',
    fontSize: 30
}
}
}
</script>

4.观察指令method和computed

method和computed区别：

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 msg还没有发生改变，多次访问 showMessage计算属性会立即返回之前的计算结果，而不必再次执行函数。

函数执行需要 数据属性里面的 message 值作为参数。

● 如果使用 methods 执行函数，vue 每次都要重新执行一次函数，不管msg的值是否有变化；

● 如果使用computed 执行函数，只有当msg这个最初的数据发生变化时，函数才会被执行。（依赖-监测数据变化） 

<template>
<div id="example">
  {{ msg.split('').reverse().join('') }}
  {{ showMessage}}
</div>
</template>

<script>
export default {
name: 'HelloWorld',
el: '#app',
data () {
  return {
    msg:'我是消息'
}
},
computed: {
  showMessage(){
    return this.msg.split('').reverse().join('')
  }
}
}
</script>

5.条件渲染

v-if,v-else顾名思义，判断是否可以显示。

<template>
<div >
<p v-if="sign">1111</p>
<p v-else>2222</p>
</div>
</template>

<script>
export default {
name: 'HelloWorld',
el: '#app',
data () {
  return {
    sign:true,
    msg:'<h1>我是消息</h1>',
    active:"active",
    id:19
}
}
}
</script>

• v-if：每次都会重新删除或创建元素，具有较高的切换性能消耗；
• v-show：每次切换元素的 display：none 样式，具有较高的初始渲染消耗。
• v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故v-show性能更好一点。

<template>
<div >
<p v-show="sign">1111</p>
</div>
</template>

<script>
export default {
name: 'HelloWorld',
el: '#app',
data () {
  return {
    sign:true,
    msg:'<h1>我是消息</h1>',
    active:"active",
    id:19
}
}
}
</script>

6.列表输出

v-for用于循环列表。

<template>
<div >
<ul>
<li v-bind:key ="index" v-for = "(item,key,index) in names">
{{item.age}}-{{item.name}}-{{index}}||{{item}}||{{key}}
</li>
</ul>
</div>
</template>

<script>
export default {
name: 'HelloWorld',
el: '#app',
data () {
  return {
    sign:true,
    msg:'<h1>我是消息</h1>',
    names:[{
      name:"aaa",
      age:19,
      sex:"1"
    },{
      name:"bbb",
      age:20,
      sex:"1"
    },{
      name:"ccc",
      age:21,
      sex:"1"
    }]
}
}
}
</script>

7.数组更新

注意：filter()、concat() 和 slice()不发生更新。

<template>
<div >
<ul>
<li v-bind:key ="index" v-for = "item in names">
{{item.name}}
</li>
</ul>
<button v-on:click = "clickbutton" name = "button" type = "button">按钮</button>
</div>
</template>

<script>
export default {
name: 'HelloWorld',
el: '#app',
data () {
  return {
    sign:true,
    msg:'<h1>我是消息</h1>',
    names:[{
      name:"aaa"
    },{
      name:"bbb"
    },{
      name:"ccc"
    }]
}
},
methods: {
  clickbutton(event){
        this.names.push({name:"ddd"})
  }
},
}
</script>

8.事件处理

v-on：当执行xx动作时执行xx函数。

<template>
<div>
<button v-on:click = "count +=1" type = "button" name = "button">按钮</button>
<p>{{count}}</p>
<button v-on:click = "clickhandle" type = "button" name = "button">按钮2</button>
<p>{{demoshow}}</p>
<button v-on:click = "chance" type = "button" name = "button">按钮3</button>
<button v-on:click.once = "senddate('你好',$event)" type = "button" name = "button">按钮4</button>
</div>
</template>

<script>
export default {
name: 'HelloWorld',
el: '#app',
data () {
  return {
    count:1,
    demoshow:"帅小伙"
}
},
methods: {
  clickhandle(event){
    console.log("触发")
  },
  chance(event){
    this.demoshow = "我不是帅小伙"
  },
  senddate(data,event){
    console.log(data,event)
  }
}
}
</script>

9.事件修饰

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

10.键盘事件

<template>
<div>
<input  v-on:keyup.enter = "showlog" name = "button">输入框</button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
el: '#app',
data () {
  return {
    count:1
}
},
methods: {
  showlog(event){
     console.log(event)
  }
}
}
</script>

其余键盘操作介绍：

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta 
等 请参考文档

11.表单输入

双向数据绑定指令lazy，number，trim。

<template>
<div>
<input v-model.lazy="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
<button v-on:click = "getMsg" type = "button" name = "button">按钮</button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
el: '#app',
data () {
  return {
    message:"这是一个消息"
}
},
methods: {
  getMsg(event){
     console.log(this.message)
  }
}
}
</script>

.lazy
在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步：
<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >

.number
如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：
<input v-model.number="age" type="number">
这通常很有用，因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。


.trim
如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：
<input v-model.trim="msg">