欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue基础学习ING

程序员文章站 2022-06-22 20:25:12
Vue 的基本介绍vue 是⼀个渐进式的框架。框架与库的区别:库:例如 jQuery,lodash,layui,easyui,库的特点在于,给我们提供了很多⽅法,我们直接使⽤这些⽅法来写代码即可。框架:从字⾯上可以理解为⼀个架⼦。最⼤的特点就是给开发者提供了⼀整套解决⽅案。我们在使⽤框架的时候,就需要遵循框架的规范和要求。什么是渐进式?如果只是想使⽤ vue 最基础的声明式渲染,那么 vue 完全可以当成⼀个模版引擎来使⽤。如果你想要使⽤组件化开发,那么可以使⽤ vue ⾥⾯的组件系统。....
  1. Vue 的基本介绍
    vue 是⼀个渐进式的框架。
    框架与库的区别:
    库:例如 jQuery,lodash,layui,easyui,库的特点在于,给我们提供了很多⽅法,我们直接使⽤这
    些⽅法来写代码即可。
    框架:从字⾯上可以理解为⼀个架⼦。最⼤的特点就是给开发者提供了⼀整套解决⽅案。我们在使⽤框
    架的时候,就需要遵循框架的规范和要求。
    什么是渐进式?
    如果只是想使⽤ vue 最基础的声明式渲染,那么 vue 完全可以当成⼀个模版引擎来使⽤。
    如果你想要使⽤组件化开发,那么可以使⽤ vue ⾥⾯的组件系统。
    如果想要开发单⻚应⽤,那么可以使⽤ vue ⾥⾯的客户端路由。
    如果你的组件越来越多,组件之间需要传递数据,那么可以使⽤ vue 的状态管理⼯具 vuex。
    vue 中⽂官⽹:https://cn.vuejs.org/
  2. 安装
    官⽹中介绍了好⼏种 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>

上⾯的代码中,elvueel 表示 vue 的挂载元素,watch 表示监听某⼀个数据的变化。

本文地址:https://blog.csdn.net/weixin_38722130/article/details/107322231