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

Posted 2021-05-01 web前端教室

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

////////

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

<script ></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简单点，哈。