vue基础学习ING
程序员文章站
2022-03-11 16:07:55
Vue 的基本介绍vue 是⼀个渐进式的框架。框架与库的区别：库：例如 jQuery，lodash，layui，easyui，库的特点在于，给我们提供了很多⽅法，我们直接使⽤这些⽅法来写代码即可。框架：从字⾯上可以理解为⼀个架⼦。最⼤的特点就是给开发者提供了⼀整套解决⽅案。我们在使⽤框架的时候，就需要遵循框架的规范和要求。什么是渐进式？如果只是想使⽤ vue 最基础的声明式渲染，那么 vue 完全可以当成⼀个模版引擎来使⽤。如果你想要使⽤组件化开发，那么可以使⽤ vue ⾥⾯的组件系统。....
- Vue 的基本介绍
vue 是⼀个渐进式的框架。
框架与库的区别：
库：例如 jQuery，lodash，layui，easyui，库的特点在于，给我们提供了很多⽅法，我们直接使⽤这
些⽅法来写代码即可。
框架：从字⾯上可以理解为⼀个架⼦。最⼤的特点就是给开发者提供了⼀整套解决⽅案。我们在使⽤框
架的时候，就需要遵循框架的规范和要求。
什么是渐进式？
如果只是想使⽤ vue 最基础的声明式渲染，那么 vue 完全可以当成⼀个模版引擎来使⽤。
如果你想要使⽤组件化开发，那么可以使⽤ vue ⾥⾯的组件系统。
如果想要开发单⻚应⽤，那么可以使⽤ vue ⾥⾯的客户端路由。
如果你的组件越来越多，组件之间需要传递数据，那么可以使⽤ vue 的状态管理⼯具 vuex。
vue 中⽂官⽹：https://cn.vuejs.org/ - 安装
官⽹中介绍了好⼏种 vue 安装的⽅式，对于我们初学者来说，先使⽤ cdn 的⽅式是最⽅便的。
接下来我们来看⼀个快速⼊⻔的示例：
<body>
<div id="app">
{{ name }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el : "#app",
data : {
name : "f67"
}
});
</script>
</body>
模板插值
上⾯的代码就是使⽤到了 vue 中的声明式渲染。这⾥我们就是将 vue 当作是⼀个模板引擎来使⽤。{{
name }} 就相当于是⼀个占位符。
<div id="app">
{{ name }}
</div>
构造器
每⼀个 vue 的应⽤都需要使⽤ Vue 构造函数来实例化出来⼀个 vue 的实例。
new Vue({
el : "#app",
data : {
name : "f67"
}
});
在实例化 vue 对象的时候，我们传⼊了⼀个选项对象。该选项对象中，包含了挂载元素和数据，当然，
还有更多的选项，例如⽣命周期、⽅法、计算属性等。
vue 实例上⾯的属性，为了区分⽤户⾃定义的属性和⽅法，vue 中的属性和⽅法⼀般前⾯会有⼀个 $ 符
号：
<body>
<div id="app">
{{ name }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el : "#app",
data : {
name : "f67",
score : 100
}
});
console.log(app.$el === document.getElementById('app'))
// 监听数据的改变
app.$watch('name',function(newValue, oldValue){
console.log(`更新前的值为${oldValue}`);
console.log(`更新后的值为${newValue}`);
})
</script>
</body>
上⾯的代码中，watch 表示监听某⼀个数据的变化。
本文地址：https://blog.csdn.net/weixin_38722130/article/details/107322231