vue的学习过程

声明式渲染

<div id="app">

{{msg}} 渲染变量的值，不能有HTML
<span v-once>{{ msg }}</span> //渲染变量的值，只渲染一次，后期修改后不改变
<div v-html="rawHtml"></div> //渲染HTML的元素
<div v-bind:id="dynamicId"></div>//将dynamicId变量动态的绑定到id属性上

表达式
{{ number + 1 }} //表达式
{{ ok ? 'YES' : 'NO' }} //三元运算表达式
{{ message.split('').reverse().join('') }} //表达式
<div v-bind:id="'list-' + id"></div> //动态绑定值的时候也可以使用表达式, 字符串list-加上id变量

{{var a = 1}} 这是语句，不是表达式
{{ if (ok) { return message } }}控制也不会生效，请使用三元表达式

语法

<p v-if="seen">Now you see me</p>//if指令，seen为true则插入当前的这个标签，否则当前标签被移除
<a v-bind:href="url"></a> 动态绑定url变量到href属性
<a v-on:click="doSomething">绑定点击事件，事件处理函数是doSomething
<form v-on:submit.prevent="onSubmit"></form>//绑定提交事件，并阻止默认行为, .prevent是修饰符

过滤器

in mustaches
{{ message | capitalize }}//过滤器,message是变量，capitalize是一个过滤器函数，这个函数返回的值是最终的值
in v-bind
<div v-bind:id="rawId | formatId"></div>//rawId是一个变量，formatId是一个过滤器方法
{{ message | filterA | filterB }}//filterA和filterB都是过滤器
{{ message | filterA('arg1', arg2) }}//filterA过滤，过滤的时候并传递参数

语法完整与缩写

完整<a v-bind:href="url"></a>
缩写<a :href="url"></a>
完整<a v-on:click="doSomething"></a>
缩写<a @click="doSomething"></a>

isAction

<div v-bind:class="{ active: isActive }"></div> //当isActive为正时会添加active样式
<div class="static"
 v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>//当isActive为真是添加active样式，当hasError为真时添加text-danger样式
<div v-bind:class="classObject"></div>//classObject的值为{active: isActive, 'text-danger': hasError}
<div v-bind:class="[activeClass, errorClass]">//表示添加activeClass对应的字符串样式和errorClass对应的字符串样式

各种常用事件

<button v-on:click="counter += 1">增加 1</button>//绑定点击事件，直接让counter这个变量自加1

<!-- greet 是在下面定义的方法名 -->
<button v-on:click="greet">Greet</button>
<!-- 阻止单击事件冒泡 -->
//.stop修饰阻止冒泡
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>//阻止默认行为
<!-- 修饰符可以串联 -->
//阻止冒泡和默认行为
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>//阻止默认行为
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>//只侦听捕获阶段
<!-- 只当事件在该元素本身（比如不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>
<!-- 点击事件将只会触发一次 -->

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">
// 可以使用 v-on:keyup.f1
Vue.config.keyCodes.f1 = 112
<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>

若有不懂链接描述