VUE学习（一）

一、模板语法

1、文本

<span> Message:{{msg}}</span>

原始HTML

<p>Using mustaches:{{rawHtml}}</p>
<p>Using v-html directiveL<span v-html = "rawHtml"></span></p>

特性

<div v-bind:id="dynamicId"></div>

表达式
{{number + 1}}{{ok?‘YES’:‘NO’}}{{message.split(’’).reverse().join(’’)}}

标题2、指令

<p v-if="seen">现在你看到我了</p>

修饰符

<form v-on:submit.prevent="onSubmit">...</form>

缩写

<a v-bind:href = "url">...</a>   <a:href="url">...</a>
<a v-on:click="doSomething">...</a>   <a @click="doSomething">...</a>

标题3、计算属性

computed
应用场景：具有依赖关系的数据监听

标题4、类与样式

对象语法：适合较多的class名或者动态的class
数组语法：适合较少的class名

绑定 HTML class
1、对象语法
我们可以传一个v-bind:class一个对象，方便动态地切换class：

<div v-bind:class="{ active: isActive }"></div>

当isActive为true时，有active类
当isActive为false时，没有类
2、数组语法
我们可以把一个数组传给 v-bind：class，以应用一个class列表：

<div v-bind:class="[activeClass, errorClass]"></div>

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

页面渲染结果为：

<div class="active text-danger"></div>

5、条件&列表

条件

v-if指令用于条件性地渲染一块内容，表达式为真时渲染。

v-else指令用来表示v-if的“else”块。

v-else-if指令用来充当v-if的“else-if块”，可以连续使用

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

列表
用v-for把一个数组对应成一组元素
我们可以用v-for 指令基于一个数组来渲染一个列表。v-for指令需要使用 item in items 形式的特殊语法，其中items是源数据数组，而 item 则是被迭代的数组元素的别名。

<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

结果为：

6、事件

1. 监听事件
   可以用v-on指令监听DOM事件，
   示例：

<template lang="html">
    <div class="events">
        <button type="button" name="button" v-on:click="msg('参数1',$event)">text</button>
    </div>
</template>
<script>
    export default{
        name: 'events',
		methods:{
			msg:function(a,event){
				window.console.log('事件生效了',a,event)
			}
		}
    }
</script>
<style lang="css"></style>

msg是方法名称，在’methods’对象中定义方法,可以传参数，以及访问原始的DOM事件，用特殊变量$event把它传入方法
结果：

• 事件修饰符

• .stop

• .prevent

• .capture

• .self

• .once

• .passive

<!-- 阻止单击事件继续传播 -->
<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>

示例：

<div class="parent" @click="parent">
	<p>parent</p>
	<p>parent</p>
	<p>parent</p>
	<div class="child" @click.stop="child">  <!-- stop是为了阻止冒泡 -->
		child
	</div>
</div>