之前所在的公司使用的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的脚手架