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>

若有不懂链接描述

    原文作者:悲伤繞指渘
    原文地址: https://segmentfault.com/a/1190000011990104
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞