专栏首页web前端教室学点vue.js的东西,什么都得学点,面试时说不定对方会问什么

学点vue.js的东西,什么都得学点,面试时说不定对方会问什么

说vue呢也是关注视图层的框架,它嫌react太绕了,redux太麻烦了,然后就说自己很简单,说自己还有双向绑定,好的很,不是小好,是大好。那我今天就写点vue的东西,写教程其实就是最好的学习。咱们开始吧

////////

先得安装vue,其实就跟jq一样,用<script>标签引入,就算安装完了。就这样:

<script src="js/vue.min.js"></script>

我看网上许多还有什么vue项目目录结构,什么脚手架,...,我个人主观建议大家,别去看那些东西,什么目录结构,什么脚手架。你学什么,你就看什么,你学的是vue,那你就看vue的资料。

////////

刚才说装好了vue.js,然后搞个hello world吧,...看看资料,说是vue使用了基于html的模板语法,能把dom绑定到数据上。(我看有vue的文章说,react的jsx太麻烦,不直观,说jsx把js和html混在一起不好。结果vue一样把dom混到数据里。这就是文无第一,武无第二,别人都不自己)

vue的模板语法,就是 {{...}}

<div>{{我是老尚}}</div>
然后用v-html来输出html,
<div v-html="news"></div>
<script>
new Vue({
  el: '#app',
  data: {
    message: '<h1>我是老尚</h1>'
  }
})
</script>

这就把文字放到div里了。

////////

html的属性的值使用v-bind来进行响应式的更新,然后双向绑定用v-model,然后这二个东西合在一起就可以做一个简单的切换,就这样:

其实就是用true和false来判断是否使用sty1的样式。

////////

感觉是比ng简单点,哈。

本文分享自微信公众号 - web前端教室(webfeel),作者:老尚

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

原始发表时间:2017-05-26

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • WEB前端零基础课-1022本周总结

    v-if,根据true或是false,来决定是否插入到页面当中,dom节点,不在页面中

    web前端教室
  • 本周日-先行者课程小总结

    本周日的先行者课程,是用vue.js做一个点菜结账pos类的应用。 里面使用了vue-cli做为脚手架,使用了ElementUI做为前端组件库,主要的知识点包括...

    web前端教室
  • 【转】vue.js响应式原理解析与实现

    这篇文章觉得非常好,主要是把vueJs的响应式原理说的很清楚,没有在文章中夹杂其它的知识点,文章的脉络非常的清晰,推荐阅读。

    web前端教室
  • Vue的学习(一)创建一个vue的项目,并且在浏览器打开项目

    一天不写程序难受
  • vue[0x01] -- Hello World

    如果你看过一千部以上的电影,你就会发现,这世间根本没有什么离奇的事。为什么从后端或者说网页三剑客过来的哥们,会有觉得vue上手快,容易学的错觉?很大程度上,在早...

    丰臣正一
  • 前后端通吃,vue大全Mark一下

    仓库地址:https://github.com/opendigg/awesome-github-vue

    java乐园
  • vue实践之采用vue-cli3.x创建项目

    vue.js 官方文档 https://cn.vuejs.org/v2/guide/

    陨石坠灭
  • Vue 3.0将正式发布,对我们有哪些改变?

    那么我们今天就带着大家了解下 vue3.0,到底进化了什么,会对我们的开发有什么影响?

    前端迷
  • 【程序源代码】Vue开源项目库汇总

    最近在学习VUE,感觉确实不错的前端框架。但光学习基本有点太慢,时间太长,主要是为了项目上手使用,所以在网上找了找比较好的VUE框架开发的项目实例。分享给大家。...

    程序源代码
  • 12 手写配置启动一个 vue2 项目

    2019年10月5日,vue 团队发布了 Vue3.0 预览版源码,预计到 2020 年第一季度将发布 3.0 正式版。3.0 包涵了许多激动人心的新特性。

    李艺

扫码关注云+社区

领取腾讯云代金券