前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >学点vue.js的东西,什么都得学点,面试时说不定对方会问什么

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

作者头像
web前端教室
发布2018-02-06 17:50:04
7660
发布2018-02-06 17:50:04
举报
文章被收录于专栏:web前端教室web前端教室

说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的模板语法,就是 {{...}}

代码语言:js
复制
<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简单点,哈。

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2017-05-26,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 web前端教室 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档