每个 Vue 应用都需要通过实例化 Vue 来实现。在 Vue 构造器中有一个el 参数,它是 DOM 元素中的 id
<div id="app"></div> new Vue({ el: '#app',data{ }});
data 用于定义属性,实例中有三个属性分别为:site、url、alexa
methods 用于定义的函数,可以通过 return 来返回函数值
{{ }} 用于输出对象属性和函数返回值
除了数据属性,Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $,以便与用户定义的属性区分开来。
修饰符是以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。
Vue.js 为两个最为常用的指令提供了特别的缩写:
<a v-bind:href="url"></a> <!--缩写--><a :href="url"></a>
<a v-on:click="doSomething"></a> <!--缩写--><a @click="doSomething"></a>
过滤器
“|”,过滤器函数接受表达式的值作为第一个参数。
条件判断
<!-- Handlebars 模板 -->
{{#if ok}}
<h1>Yes</h1>
{{/if}}
v-if,v-else,v-else-if,v-show="ok"
循环语句
v-for 指令需要以 site in sites 形式的特殊语法, sites 是源数据数组并且 site 是数组元素迭代的别名
计算属性
计算属性关键词: computed,属性:getter,setter, 例如截取字符串,反转字符串
我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。
监听属性
关键词:watch,用法:vm.$watch('xx', function(xx) { xx});
样式绑定
v-bind:class
v-bind:style
事件修饰符
.stop阻止冒泡,阻止所有冒泡 .prevent阻止默认事件 .capture添加事件侦听器时使用事件捕获模式 .self只当事件在该元素本身(比如不是子元素)触发时触发回调,只能阻止当前元素冒泡 .once事件只触发一次 事件修饰符是可以串联的,.once和其他修饰符连用的时候,不在乎先后顺序
按键修饰符
<input v-on:keyup.enter="submit">
<!-- 缩写语法 --> <input @keyup.enter="submit">
.enter
,.tab
,.delete
,.esc
,.space
,.up
,.down
,.left
,.right
,.ctrl
,.alt
,.shift,
.meta
表单
关键词:v-model,在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定,v-model 指令用来在 input、select、text、checkbox、radio 等表单控件元素上创建双向数据绑定,根据表单上的值,自动更新绑定的元素的值。
<!--自动输入值转为 Number 类型--><input v-model.number="age" type="number">
<!--在“change”而不是“input”事件中更新--><input v-model.lazy="msg">
<!--去除空格--><input v-model.trim="msg">