vue 之每天进步一点点

之前所在的公司使用的react

但是对于vue的好奇和探索没有停止过虽然了解过vue,
也可以写一点小demo但是笼统的学习并没有进行过

首先我们需要去了解一下vue是什么

vue官网 https://cn.vuejs.org

vue是一款渐进式JavaScript框架
也就是说上手难易度 vue会相对于react 简单很多
可以支持各种库十分的方便

如何使用vue

<div id='app'>
  {{ msg }}
</div>


<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
 <!-- 引入vue.js 在这里我们引入的开发版,里面有更加详细的命令行警告 -->
<script>
new Vue ({    //new一个vue的实例 
  el:'#app', //el选项相当于原生中的dom选择器,选中的节点就是接下来我们的舞台  
  data {   // 初始化数据 在html中使用 {{}} 的语法 就可以渲染
    msg:'Holle Vue'
  }
}) 

</script>

接下来我们要去学习vue常用的一下指令
https://www.jianshu.com/p/f1600b2cdaa0

vue的基本属性

1 methods 自定义使用v-on绑定的函数必须在 Vue.js 中的 methods 属性下添加

2 computed 计算属性 :
计算属性具有依赖性,所依赖的数据不发生变化他就不会执行多次
计算属性中放的是函数,而且必须有返回值,
复杂的逻辑运算都放在计算属性中,而不是 {{}} 内
与 methods 的区别 :
无论调用多少次,只要不改变他所依赖的数据,就只会执行一次,
比较节省性能

3 watch 侦听属性:
侦听一个数据的变化并且 执行函数
函数会有两个参数
一个代表变化之前的值 (new)
一个代表变化之后的值 (old)
利用这两个值 可以 做一些逻辑运算

new Vue({
  el:'#app',
  data: 

  },
  methods: { //这里执行定义好的函数,以及dom操作
  },
  components: {// 计算属性 在这里进行逻辑运算
  },
  watch: { //侦听属性

  }
})

下一期学习生命周期和vue的脚手架

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容