一、Vue在前端重要性
认识Vue
Vue是一套用于 构建用户界面的渐进式 JavaScript框架
全称是Vue.js或Vuejs
它基于标准HTML CSS和JavaScript构建,并提供了一套声明式 组件化的编程模型;
高效开发用户界面
什么是渐进式框架?
我们可以在项目中一点点来引入和使用Vue 而不一定需要全部使用Vue来开发整个项目
二、引入Vue的方式
如何使用Vue?
Vue的本质就是一个Js库
安装和使用Vue这个Js库有哪些方式呢?
一:在页面中通过CDN的方式来引入;
二:下载Vue的Js文件,并且自己手动引入;
三:通过npm包管理工具安装使用它
四:直接通过Vue CLI创建项目 并且使用它
方式一:CDN引入
Vue的CDN引入:
JavaScript <script src="https://unpkg.com/vue@next"></script>
JavaScript 案例 <h2>哈哈哈</h2> <p>我是内容,哈哈哈哈</p> <div id="app"></div> <!-- CDN地址 --> <script src="https://unpkg.com/vue@next"></script> <script> // 使用Vue const app = Vue.createApp({ template: `<h2>Hello World</h2><span>哈哈哈哈哈</span>` }) // mount挂载s app.mount('#app') </script>
方式二:下载和引入
下载Vue的源码 直接打开CDN的链接:
打开链接 复制其中的代码
创建一个新文件 如vue.js 将代码复制进去;
通过script标签 引入刚才的文件
JavaScript <script src="./lib/vue.js"></script>
你好,Vue3 案例实现:
JavaScript <div id="app"></div> <!-- 本地引入 --> <script src="./lib/vue.js"></script> <script> // 1 创建app const app = Vue.createApp({ template: `<h1>你好 Vue3</h1>` }) // 2 挂载app app.mount('#app') </script>
三、Vue案例初体验
Vue初体验
案例一: 体验动态展示Hello World数据
案例二:展示列表的数据
案例三:计算机功能实现
JavaScript <div id="app"> <h2>{{title}}</h2> <h2>电影列表</h2> <ul> <li v-for="item in movies">{{item}}</li> </ul> </div>
JavaScript <script src="./lib/vue.js"></script> const app = Vue.createApp({ data() { return { title:"Hello Vue", movies:["大话西游","盗梦空间","星际穿越"] } } }) app.mount("#app")
案例三:计算机功能实现
JavaScript <div id="app"></div> <script src="./lib/vue.js"></script> <script> const app = Vue.createApp({ template: ` <h2>当前计数:{{counter}}</h2> <button @click="increment">+1</button> <button @click="decrement">-1</button> `, data: function () { return { counter: 0 } }, methods: { increment: function () { console.log("+1被点击了") this.counter++ }, decrement: function () { console.log("-1被点击了") this.counter-- } } }) app.mount('#app') </script>
四、命令和声明式编程
声明式 和 命令式
原生开发和Vue开发的模式和特点 发现是完全不同的,涉及到了两种不同的编程方式:
命令式编程和声明式编程
命令式编程关注的是 "how to do" 自己完成整个how的过程
声明式编程关注的是 "what to do" 由框架完成how的过程
在原生的实现过程中 我们是如何操作的?
我们每完成一个操作,都需要通过JavaScirpt编写一条代码,来给浏览器一个指令
这样的编写代码的过程 叫 命令式编程
早期的原生JS和JQ开发过程中 我们都是通过这种命令式的方式在编写代码.
在Vue的实现过程中,我们如何操作呢?
会在createApp传入的对象中声明需要的内容,模版template 数据data 方法methods
这样的编写代码的过程 叫做 声明式编程
目前 Vue React Angular 小程序的编程模式 称之为 声明式编程
MVVM模型
MVC和MVVM都是一种软件的体系结构
MVC是在前期被使用非常多的框架的架构模式 如 IOS 前端
MCCM是目前最流行的架构模式
通常情况下 我们也经常称Vue是一个MVVM的框架
Vue官方也说明,虽然并没有完全遵守MVVM的模型,但是整个设计是受它的启发
五、Vue的options
data属性(掌握)
data属性是传入一个函数,并且该函数需要返回一个对象:
在Vue2的时候 也可以传入一个对象(官方推荐是一个函数)
在Vue3的时候,必须传入一个函数,否则就会直接在浏览器中报错
data中返回的对象会被Vue的响应式系统劫持,之后对该对象的修改或访问 都会在劫持中处理
我们在template或者app中 通过 {{counter}}访问 counter 可以从对象中获取到数据
我们修改counter值时 app中的{{counter}}也会发生改变
methods属性
methods属性是一个对象 通常我们会在这个对象中定义很多的方法,
这些方法可以绑定到 模版中
我们可以使用this关键字来直接访问到data中返回的对象属性
不使用箭头函数的情况下,this到底指向的是什么?
问题一:不能使用箭头函数?
我们在methods中要使用data返回对象中的数据:
那么这个this是必须有的值,并且应该可以通过this获取到data返回对象中的数据
那么我们这个this能不能是window呢
不可以是window 因为window中我们无法获取到data返回对象中的数据
但是如果我们使用 箭头函数 那么这根this就会是window了
为什么是window呢?
这里涉及到箭头函数使用this的查找规则,它会在 自己的上层作用域中查找this
最终刚好找到的是script作用域中的this 所以就是window
问题二:this到底指向什么?
事实上Vue的源码当中就是对methods中的所有函数进行了遍历,并且通过bind绑定了this
