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

时间:2022-04-27
本文章向大家介绍学点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简单点,哈。