美文网首页
Vue.js初步学习

Vue.js初步学习

作者: 次饭饭_2628 | 来源:发表于2019-03-06 19:23 被阅读0次

1 Vue官网

2 Mvvm模式

  • Model-View-View-Model模式,由MVC衍生而来
    View和ViewModel之间通过双向绑定(data-binding)建立联系。

3 现代的前端开发模式

  • 前端的三驾马车 :Angular、React、Vue

4 Vue.js 起步

  • 使用Vue.js 有两种方式:一种是通过引入CDN后直接使用或者下载后使用,另一种就是使用命令工具。
    尝试 Vue.js 最简单的方法是使用 JSFiddle 上的 Hello World 例子。你可以在浏览器新标签页中打开它,跟着例子学习一些基础用法。或者你也可以创建一个 .html 文件,然后通过如下方式引入 Vue:
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
image.png

v-model数据双向绑定练习

  • 通过以下代码体验Vue.js最核心的功能——数据的双向绑定


    image.png

使用v-bind属性绑定

image.png

条件与循环

  • 条件渲染指令:v-if,v-else-if,v-else
  • 列表渲染指令 v-for
  • v-else:可以根据表达式的值在DOM中渲染或销毁元素/组件,与v-show不同的是,v-if是真正的条件渲染,适合条件不经常变更的场景;而v-show只是简单的CSS属性切换,使用于频繁切换条件。
    两者结合实例:


    image.png

相关文章

网友评论

      本文标题:Vue.js初步学习

      本文链接:https://www.haomeiwen.com/subject/ckyzuqtx.html