脚本宝典收集整理的这篇文章主要介绍了

Vue起步

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

1. 兼容性

Vue不兼容IE8以及以下。

Vue Devtools

https://github.com/vuejs/vue-...

2. 安装

1.直接<script>标签引用, Vue会被注册成为一个全局变量。
2.npm
注:开发版本下不要使用压缩版本,不然会失去一些错误相关的警告。

起步

vue是一套构建用户界面的渐进式框架。vue被设计为可以自底向上逐层应用,vue的核心只关注视图层,

3. 声明式渲染 {{ text }}/v:bind

Vue的核心是允许采用简洁的模板语法来声明式的将数据渲染进DOM系统:

<div>
{{ message }}
</div>

如上,数据和DOM已经建立了关联,所有东西都是响应式的。

<p v-bind:title="message">鼠标悬停几秒</p>

如上,采用指令的形式应用在已经渲染的DOM上面,而且给DOM应用特殊的响应式行为。这里是将"message"绑定到p元素的title属性上面。

条件与循环 v-if/v-for

<p v-if="seen">现在可以看到我了么?</p>

v-if不仅可以把数据绑定到DOM文本或特性,还可以绑定到DOM结构。

<ul>
    <li v-for="todo in todos"> {{ todo.text }} </li>
</ul>

如上,v-for可以渲染一个列表。

处理用户输入v-on/v-model

可以使用v-on指令添加事件监听器。

<button v-on:click="reverseHandle">click Me</button>

v-model可以实现表单和应用状态之间的双向绑定

<input v-model="message">

组件化应用构建

Vue里面,一个组件本质上是一个拥有预定义选项的一个Vue实例。在Vue中注册组件很简单:

Vue.component('todo-item', {
    props: ['todo'] //接受一个props, 类似一个自定义特性。这个props名为todo
    template: '<li>{{ todo.text }}</li>'
})

总结

以上是脚本宝典为你收集整理的

Vue起步

全部内容,希望文章能够帮你解决

Vue起步

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过