前端|初学vue

1.1进入vue官网了解vue到底是啥

Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

1.2安装

创建一个vue.html文件

引入 Vue:

引入:

<script src="https://cdn.jsdelivr.net/npm/vue"></script>或<script  src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

1.3申明是渲染

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

<div  id="app">  {{ message }}</div>
var app =  new Vue({  el: '#app',  data: {    message: 'Hello Vue!'  }})

这样我们成功船舰了一个Vue,可以得到一个Hello Vue!,数据和 DOM 已经就建立了关联,所有东西都是响应式的。注意我们不再和 HTML 直接交互了。一个 Vue 应用会将其挂载到一个 DOM 元素上 (对于这个例子是#app) 然后对其进行完全控制。HTML 是我们的入口,但其余都会发生在新创建的 Vue 实例内部。

个人认为为了方便理解:我可以理解为。HTML其实就是一个单纯的入口,起到关键作用的是Vue,因为其余都会发生在新创建的 Vue 实例内部,Vue实例内部才有真正的数据。是关联的DOM元素也就是这里的(#app)将入口和Vue示例内部(也就是数据和一些实际的操作)联系了起来。

② 除了文本插值,我们还可以像这样来绑定元素attribute:

<div  id="app-2">  <span  v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息!  </span></div>
var app2 = new  Vue({  el: '#app-2',  data: {    message: '页面加载于 ' + new Date().toLocaleString()  }})

v-bind attribute 被称为指令。指令带有前缀 v-,以表示它们是 Vue 提供的特殊 attribute。它们会在渲染的 DOM 上应用特殊的响应式行为。在这里表示:将这个元素节点的 title attribute 和 Vue 实例的messageproperty保持一致。

1.4条件循环

<div id="app-3">  <p v-if="seen">现在你看到我了</p></div>
var app3 =  new Vue({  el: '#app-3',  data: {    seen: true  }})

这样就会显示现在你看到我了。输入 app3.seen =false,你会发现之前显示的消息消失了。这个例子演示了我们不仅可以把数据绑定到 DOM 文本或 attribute,还可以绑定到 DOM 结构。

②Vue 还提供一个强大的过渡效果系统,可以在 Vue 插入/更新/移除元素时自动应用过渡效果。还有其它很多指令,每个都有特殊的功能。例如,v-for 指令可以绑定数组的数据来渲染一个项目列表:

<div  id="app-4">  <ol>    <li v-for="todo in  todos">      {{ todo.text }}    </li>  </ol></div>
var app4 =  new Vue({  el: '#app-4',  data: {    todos: [      { text: '学习 JavaScript' },      { text: '学习 Vue' },      { text: '整个牛项目' }    ]  }})

输入 app4.todos.push({text: '新项目' }),你会发现列表最后添加了一个新项目。本文是参考vue官网加上一些自己的理解完成的,如理解有误还请指教。

END

本文分享自微信公众号 - 算法与编程之美(algo_coding),作者:舒寒同行JT

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-08-01

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JAVA|循环和遍历

    众所周知循环和遍历是一个程序的核心,不管你是什么程序、什么语言编写的程序,基本都离不开循环和遍历。所以今天小编就在本文中给大家整理了Java中的循环和遍历。

    算法与编程之美
  • 微信小程序|动态时钟

    近期,网络上流行了一个“时间管理”的梗,想要做好时间管理,清楚把握时间才是关键点,那么借着这个“时间管理”,来介绍一个小程序实现动态时钟的案例吧。

    算法与编程之美
  • 微信小程序|调用tensorflow自定义模型

    在成功调用官网打包好的tensorflowjs模型后,怎么调用自己的模型呢?又需要做哪些处理呢?

    算法与编程之美
  • 渐进式 JavaScript 框架 Vue.js,精华都在这了

    Vue.js,这个软件可是当下最火的 JavaScript 框架之一,相比其他框架,Vue.js 显得可以更加快速地上手并使用,如果你是前端开发人员,想知道入...

    疯狂的技术宅
  • AngularJS vs Vue.js:对于两个流行前端框架的比较

    多年来,Web的前端开发经历了各种各样的发展,新框架不断的涌现。如您所想,为了保持竞争优势,框架都是东拼西凑来开发的。在当今的环境下,Angul...

    萌兔IT
  • Vue常用特性

    a)、Input单行文本。   b)、textarea多行文本。   c)、select下拉多选。   d)、radio单选框。   e)、checkbox多选...

    别先生
  • chrome 开发者工具的 11 个骚技巧

    对于每个前端从业者来说,除了 F5 键之外,用的最多的另外一个键就是 F12 了。

    小生方勤
  • Vue 3 最值得期待的五项重大更新

    Vue 团队非常擅长改进框架 API。Evan You 总结了 Vue 3 的几大改进目标:

    Java帮帮
  • 【Vuejs】397- Vue 3最值得期待的五项重大更新

    我非常重视性能,所以在探索具体的 API 之前我想谈一谈 Vue 3 的性能。可讲的东西是很多的!几乎每个角落都能找到明显的改进!

    pingan8787
  • 2018 我所了解的 Vue 知识大全(一)

    Vue ,React ,Angular 三大主流框架,最后我选择学习 Vue ,接触过 React ,自己感觉学习曲线有些陡峭,进而我选择了学习 Vue ,他的...

    sunseekers

扫码关注云+社区

领取腾讯云代金券