介绍
Vue与React本质上是一个javascript库，不用想的特别复杂，我们就把它理解成一个已经帮助我们封装好的库。
Vue在前端处于的地位
npm下载量
Vue安装与使用方式
- CDN(内容分发网络)引入（入门我们会使用这个方式）
- 下载vue.js文件，手动导入
- 通过npm工具安装
- 通过VueCli(脚手架)创建项目并使用
通过CDN引入
Hello World
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 定义一个id为app的dom元素 -->
<div id="app"></div>
<!-- 引入CDN -->
<script src="https://unpkg.com/vue@next"></script>
<script>
const harry = {
template:'<h2>Hello World</h2>'
}
// const app = Vue.createApp(对象);
const app = Vue.createApp(harry);
app.mount('#app') //挂载
</script>
</body>
</html>
这里有个地方可以简写
const app = Vue.createApp({
template:`<h2>Hello World</h2>`
}).mount('#app');
计数器，如果用传统的dom开发
传统的dom开发我们也称之为命令式编程，用户给予指令，机器一步一步做。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 命令式编程 -->
<!-- view -->
<h2 class="counter">0</h2>
<button class="increment">+1</button>
<button class="decrement">-1</button>
<!-- controller -->
<script>
//1.获取所有元素
const counterEl = document.querySelector('.counter')
const incrementEl = document.querySelector('.increment')
const decrementEl = document.querySelector('.decrement')
//2.定义变量 Model
let counter = 100
counterEl.innerHTML = counter
// 3.箭头按钮的点击
incrementEl.addEventListener('click',()=>{
counter += 1
counterEl.innerHTML = counter
})
decrementEl.addEventListener('click',()=>{
counter -= 1
counterEl.innerHTML = counter
})
</script>
</body>
</html>
计数器，使用vue开发
Vue与React采用的是声明式编程。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="https://unpkg.com/vue@next"></script>
<script>
Vue.createApp({
template:`
<div>
<h2>{{message}}</h2>
<h2 class="counter">{{counter}}</h2>
<button @click="increament">+1</button>
<button @click="decreament">-1</button>
</div>
`,
data:function(){
return {
message:'hello world',
counter:100
}
},
//方法
methods:{
increament(){
this.counter++
},
decreament(){
this.counter--
}
},
}).mount('#app')
</script>
</body>
</html>
直接将内容写在template里面，甚至连高亮都没有，这样非常糟糕！所以我们可以采取以下的方式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<!-- 制定模板(x-template) -->
<script type="x-template" id="harry">
<div>
<h2>{{message}}</h2>
<h2 class="counter">{{counter}}</h2>
<button @click="increament">+1</button>
<button @click="decreament">-1</button>
</div>
</script>
<script src="../js/vue.js"></script>
<script>
Vue.createApp({
template:'#harry', // document.querySelector('#hary')通过这个找到的(内部做的操作)
data:function(){
return {
message:'hello world',
counter:100
}
},
//方法
methods:{
increament(){
this.counter++
},
decreament(){
this.counter--
}
},
}).mount('#app')
</script>
</body>
</html>
或者采取这样的方式,包裹一个template标签，注意，template会被渲染，但是没有任何的样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<!-- 浏览器知道有template存在，但是template不会被渲染,它没有任何样式 -->
<!-- 能用div吗？可以的，但是这样子多了个div，开发里我们不会这样干 -->
<!-- <div id="harry">
<div>
<h2>{{message}}</h2>
<h2 class="counter">{{counter}}</h2>
<button @click="increament">+1</button>
<button @click="decreament">-1</button>
</div>
</div> -->
<template id="harry">
<div>
<h2>{{message}}</h2>
<h2 class="counter">{{counter}}</h2>
<button @click="increament">+1</button>
<button @click="decreament">-1</button>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
Vue.createApp({
template:'#harry',
data:function(){ //vue3里你不传函数传对象，直接报错。
return {
message:'hello world',
counter:100
}
},
//方法
methods:{
// method中不能用箭头函数，因为箭头函数是没有this,你写了就GG了
increament(){
this.counter++
},
decreament(){
this.counter--
}
},
}).mount('#app')
</script>
</body>
</html>
vue的mvvm架构
vue虽然并没有遵循mvvm的模型，但是整个设计都是受它启发的。通常情况下，我们也经常称Vue是一个MVVM的框架。通俗点来看包括view(DOM) ViewModel(Vue对象属性啊，method啊啥的) Model（模型，@click那些)。
对比React（同样的计数器）
从以下的代码来看，React对于开发者js要求更高，并且react的jsx语法相对于vue的template而言也略显复杂。所以对于初学者而言，Vue其实更加适合首次学习。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<!-- 添加React依赖 -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
class App extends React.Component{
constructor(props){
super(props)
this.state = {
counter:0
}
}
render(){
return(
<div>
<h2>当前计数:{this.state.counter}</h2>
{/*react内部调用的，他不知道this,这个函数不是我们调用的*/}
<button onClick={this.increament.bind(this)}>+1</button>
<button onClick={this.decreament.bind(this)}>-1</button>
</div>
)
//这里onClick函数里不需要加括号，这里是将函数传入，然后再react内部进行回调（apply）调用，并传入undefined
//https://juejin.cn/post/7024319599956983815 这里有文章解释
}
increament(){
// console.log(this); //undefined
// bind以后this就是App了
this.setState({ //没有定义怎么能调用呢？，父类里面有个setState方法！
counter:this.state.counter + 1
})
}
decreament(){
this.setState({
counter:this.state.counter - 1
})
}
}
ReactDOM.render(<App/>,document.querySelector('#app'))
</script>
</body>
</html>
