Vue.js
核心实现
:
- 响应式的数据绑定：当数据发生改变，视图可以自动更新，不用关心DOM操作，而专心数据操作。（高度封装框架的特点是不需要关心dom操作，js jQuery很多都是对dom的一个操作，使用这个框架之后就不需要对dom操作了，视图的框架需要我们去写，数据也需要我们去维护）
- 可组合的视图组件:把视图按照功能切分成若干基本单元，可维护，可重用，可测试等特点。（很强大的组件功能，一个一个组件嵌套）
- 响应式，双向数据绑定，即MVVM。是指数据层（Model）-视图层（View）-数据视图 （ViewModel 它其实是控制器，是做数据和视图之间的一个桥梁，数据更新和数据的交换，数据层和视图层之间的一个桥梁）的响应式框架。
vue2语法：
components 它要引入的组件
- data是定义html里面要使用的变量，也就是定义html里面要使用的变量，它就是去定义变量的，定义好变量之后在html里面去使用，变量发生了变化html会去重新渲染，这就是定义数据的。
- computed是去做计算的
- watch 当去监听user的数据，这个数据要在return里面是要有的，监听它，如果发生了变化，要去执行什么，这个就是监听
- method是去定义一些方法，去使用
- mounted是生命周期，挂载完成生命周期的一个阶段
上面就是选项方式的api，用到哪块就去使用哪块。这不是一个固定的写法。
vue3语法：
它在js定义的时候有一个setup，但是几个功能定义是大差不差的，比如watch，变量的定义，方法的定义。
引入Vue.js
参考文档: https://v3.cn.vuejs.org/guide/installation.html
- 在HTML中以CDN包的形式导入
<script src="https://unpkg.com/vue@3"></script>
- 下载JS文件保存到本地再导入
- 使用npm安装
npm install @vue/[email protected]
npm install -g @vue/cli
- 使用官方VueCli脚手架构建项目（不建议新手直接使用）
vue create vue
-
demo
Hello World
示例
:
简单vue示例如下：
最后需要挂载才能够实现最后的效果，也就是哪个html里面哪个区域去使用这个vue，那么就挂载到哪个区域。正常情况下是挂载到整个body的区域。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
<link href="" type="text/css" rel="stylesheet"/>
<script src="https://unpkg.com/vue@3"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="vue">
<!--引入并且使用变量-->
{
{ message }}
</div>
<script type="text/javascript">
const HelloVueApp = {
data(){
return{
message: "Hello vue!"
}
}
}
//挂载到html当中
Vue.createApp(HelloVueApp).mount('#vue')
</script>
</body>
</html>声明式渲染
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
整个html页面就是一个dom树，每个标签相对的元素都是它的每一个节点。
就和上面的例子一样将定义的变量渲染到dom节点里面去。
首先一定要先挂载在最外层，然后才可以去使用vue定义的这些变量，方法。
现在数据和
DOM
已经被建立了关联，所有东西都是
响应式（也就是变量的值发生了变化，页面数据也就发生了变化）
的，可通过下面示例确认
:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
<link href="" type="text/css" rel="stylesheet"/>
<script src="https://unpkg.com/vue@3"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="vue">
<!--引入并且使用变量-->
counter:{
{ count }}
</div>
<script type="text/javascript">
const HelloVueApp = {
data(){
return{
count: 0
}
},
mounted(){
setInterval(() => {
this.count++
}, 1000);
}
}
//挂载到html当中
Vue.createApp(HelloVueApp).mount('#vue')
</script>
</body>
</html>模板语法
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层组件实例的数据。 所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。（其实就是将vue里面的模板语法，最终渲染为一个html）
数据绑定最常见的形式就是使用
“
双大括号
”
语法在
HTML
中插入文本
:
<span>Message: {
{ msg }}</span> 数据绑定就是使用变量的时候使用的是两个花括号
{
{msg}}
将被替代对应组件实例中
msg
属性的值。无论何时，绑定的组件实例上
msg
属性发 生改变， 插值处内容都会更新。