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引入:
<script src="https://unpkg.com/vue@next"></script>
案例
<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标签 引入刚才的文件
<script src="./lib/vue.js"></script>
你好,Vue3 案例实现:
<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数据
案例二:展示列表的数据
案例三:计算机功能实现
<div id="app">
<h2>{{title}}</h2>
<h2>电影列表</h2>
<ul>
<li v-for="item in movies">{{item}}</li>
</ul>
</div>
<script src="./lib/vue.js"></script>
const app = Vue.createApp({
data() {
return {
title:"Hello Vue",
movies:["大话西游","盗梦空间","星际穿越"]
}
}
})
app.mount("#app")
案例三:计算机功能实现
<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