通过CDN引入vue3
<!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>vue的cdn引入</title>
</head>
<body>
<div id="app"></div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const why={
template:'<h2>第一节课</h2>'
}
const app = Vue.createApp(why);//createApp要求传入对象
app.mount("#app");//app挂载的位置，例如挂载在<div id="app"></div>
//内部会根据"#app"这个字符串自己执行document.querySelect....
</script>
</body>
</html>
通过下载vue3源码来引入
在浏览器中打开这个链接https://unpkg.com/vue@next(打包之后的)
将获得的源码全部复制粘贴到项目中，然后引入
计数器案例实现的两种方式
原生
<!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>原生计数器案例</title>
</head>
<body>
<div class="number"></div>
<button class="add"></button>
<button class="little"></button>
<script>
const number=document.querySelector('.number');
const add=document.querySelector('.add');
const little=document.querySelector('.little')
let counter=10;
number.innerHTML=counter;
add.addEventListener('click',()=>{
counter +=1;
number.innerHTML=counter;
})
little.addEventListener('click',()=>{
counter -=1;
number.innerHTML=counter;
})
</script>
</body>
</html>
计数器案例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>
<script src="../vuejs/vue.js"></script>
<script>
const app = Vue.createApp({
template:`
<h1>{{counter}}</h1>
<button @click="add"></button>
<button @click="little"></button>
`,
data(){
return{
counter:10,
}
},
methods: {
add(){
this.counter++;
},
little(){
this.counter--;
}
},
});
app.mount('#app');
</script>
</body>
</html>
前者为命令式编程：我们每完成一个操作，都需要通过javascript编写一条代码，来给浏览器一个指令，
后者为声明式编程：我们会在createApp传入的对象中声明需要的内容，模板template,数据data,方法methods;
MVC MVVM
MVC是model-view-controller的简称，是在前期被使用非常多的架构模式，比如ios、前端
MVVM是model-view-viewModel的简称，是非常流行的架构模式
我们也经常称vue是mvvm的框架
vue其实并没有完全遵守MVVM的模型，但是整个设计是收到它启发的
vue在这里就相当于viewModel;
template
表示的是vue需要帮助我们渲染的模板信息
mustache
{{}}
v-once指令
用于是定元素或者组件只渲染一次
如图所示，当counter++时，上面的会改变，而下面的不会，v-once可以用于性能优化
v-text
<h1 v-text="message"></h1>
等价与
<h1>{{messsage}}</h1>
v-html
默认情况下，如果我们展示的内容本身是html的，那么vue并不会对其进行特殊的解析，如果我们希望这个内容被VUE可以解析出来，那么可以使用v-html来展示
v-pre
用于跳过元素和它子元素的编译过程，显示原始的mustache,跳过不需要编译的节点，加快编译的速度
1049
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
