Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统;
指令带有前缀 v-,以表示它们是 Vue 提供的特殊特性;
v-for 指令可以绑定数组的数据来渲染一个项目列表;
为了让用户和你的应用进行交互,我们可以用 v-on 指令添加一个事件监听器,通过它调用在 Vue 实例中定义的方法;
Vue 还提供了 v-model 指令,它能轻松实现表单输入和应用状态之间的双向绑定。
可以使用 v-bind 指令将待办项传到循环输出的每个组件中;
一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例,以及可选的嵌套的、可复用的组件树组成。
除了数据属性,Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $,以便与用户定义的属性区分开来。
一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。
当 v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级。
<div v-for="item in items" :key="item.id">
<!-- 内容 -->
</div>
建议尽可能在使用 v-for 时提供 key,除非遍历输出的 DOM 内容非常简单,或者是刻意依赖默认行为以获取性能上的提升。
可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。
示例:
<div id="example-1">
<button v-on:click="counter += 1">Add 1</button>
<p>The button above has been clicked {{ counter }} times.</p>
</div>
var example1 = new Vue({
el: '#example-1',
data: {
counter: 0
}
})
v-on:click.prevent.self
会阻止所有的点击,而 v-on:click.self.prevent
只会阻止对元素自身的点击。
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>
<div v-on:scroll.passive="onScroll">...</div> |
这个 .passive 修饰符尤其能够提升移动端的性能。
不要把 .passive 和 .prevent 一起使用,因为 .prevent 将会被忽略,同时浏览器可能会向你展示一个警告。请记住,.passive 会告诉浏览器你_不_想阻止事件的默认行为。
<!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -->
<input v-on:keyup.13="submit">
.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。
<!-- 即使 Alt 或 Shift 被一同按下时也会触发 --> |
数据显示绑定:
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
多行文本:
<span>Multiline message is:</span> |
(js代码 省略)
单个复选框,绑定到布尔值:
<input type="checkbox" id="checkbox" v-model="checked"> |
多个复选框,绑定到同一个数组:
<div id='example-3'> |
new Vue({ |
单选按钮:
<div id="example-4"> |
new Vue({ |
选择框:
单选时:
<div id="example-5"> |
new Vue({ |
<select> 标签的 multiple 属性规定可同时选择多个选项。
多选时 (绑定到一个数组):
<div id="example-6"> |
new Vue({ |
用 v-for 渲染的动态选项:
<select v-model="selected"> |
new Vue({ |
对于单选按钮,复选框及选择框的选项,v-model
绑定的值通常是静态字符串 (对于复选框也可以是布尔值):
如果想自动将用户的输入值转为数值类型,可以给 v-model 添加 number 修饰符:
<input v-model.number="age" type="number"> |
这通常很有用,因为即使在 type="number" 时,HTML 输入元素的值也总会返回字符串。
如果要自动过滤用户输入的首尾空白字符,可以给 v-model 添加 trim 修饰符:
<input v-model.trim="msg"> |
size.trim().toLowerCase() trim(): 它的作用是:去除字符串前后的空格.
toLowerCase 方法 (JavaScript): 将字符串中的所有字母字符转换为小写形式。
自 2.3.0 起,异步组件的工厂函数也可以返回一个如下的对象:
const AsyncComp = () => ({ |
注意,当一个异步组件被作为 vue-router 的路由组件使用时,这些高级选项都是无效的,因为在路由切换前就会提前加载所需要的异步组件。另外,如果你要在路由组件中使用上述写法,需要使用 vue-router 2.4.0 以上的版本。
在 HTML 模板中,请使用 kebab-case:
<!-- 在 HTML 模板中始终使用 kebab-case --> |
组件在它的模板内可以递归地调用自己。不过,只有当它有 name 选项时才可以这么做:
name: 'unique-name-of-my-component' |
当你利用 Vue.component 全局注册了一个组件,全局的 ID 会被自动设置为组件的 name。
Vue.component('unique-name-of-my-component', { |
如果稍有不慎,递归组件可能导致死循环:
name: 'stack-overflow', |
上面组件会导致一个“max stack size exceeded”错误,所以要确保递归调用有终止条件 (比如递归调用时使用 v-if 并最终解析为 false)。
假设你正在构建一个文件目录树,像在 Finder 或资源管理器中。你可能有一个 tree-folder
组件, 以及一个 tree-folder-contents
组件
另一种定义模板的方式是在 JavaScript 标签里使用 text/x-template 类型,并且指定一个 id。例如:
<script type="text/x-template" id="hello-world-template"> |
Vue.component('hello-world', { |
这在有很多大模板的演示应用或者特别小的应用中可能有用,其它场合应该避免使用,因为这将模板和组件的其它定义分离了。
我也是初学vue,新人总结不全满,还望谅解~
来源:oschina
链接:https://my.oschina.net/u/4391811/blog/3286224