| 篇章 | 知识点 |
|---|---|
| Vue3之邂逅 (一) | 初识Vue3，使用Vue3，体验Vue3，声明式与命令式编程，MVVM模型，Vue的options |
| Vue3之模版语法(二) | Mustache插值语法，常见基本指令，v-bind绑定属性，绑定class和style，v-on绑定事件，Vue的条件渲染 |
构建用户界面的渐进式JavaScript框架基于标准HTML、CSS和JavaScript构建，并提供了一套声明式的、组件化的编程模型
帮助我们高效地开发用户界面，无论是简单还是复杂
更好的性能、更小的包体积、更好的TS集成、更优秀的API设计。就是一个JavaScript的库：刚开始我们不需要把它想象的非常复杂；我们就把它理解成一个已经帮助我们封装好的库；在项目中可以引入并且使用它即可。
<script src="@next"></script>
<body><h2>哈哈哈</h2> <p>我是内容, 呵呵呵呵</p><div id="app"></div><!-- CDN地址 --><script src="@next"></script><script>// 使用Vueconst app = ateApp({template: `<h2>Hello World</h2><span>呵呵呵</span>`})// 挂载unt("#app")</script>
</body>
<script src="./lib/vue.js"></script>
div id="app"></div><script src="./lib/vue.js"></script><script>// 1.创建appconst app = ateApp({template: `<h1>Hello Vue</h1>`})// 2.挂载unt("#app")</script>
差值语法：{{date}}
<div id="app"></div><script src="./lib/vue.js"></script><script>const app = ateApp({// 插值语法: {{title}}template: `<h2>{{message}}</h2>`,data: function() {return {title: "Hello World",message: "你好啊, Vue3"}}})unt("#app")</script>
列表渲染 v-for
<div id="app"></div><script src="./lib/vue.js"></script><script>const app = ateApp({template: `<h2>电影列表</h2><ul><li v-for="item in movies">{{item}}</li></ul>`,data: function() { return {message: "你好啊, 李银河",movies: [ "大话西游", "星际穿越", "盗梦空间", "少年派", "飞驰人生" ]}}})unt("#app")</script>
如果我们希望实现一个计数器的案例：
<div id="app"></div><script src="./lib/vue.js"></script><script>const app = ateApp({template: `<h2>当前计数: {{counter}}</h2><button @click="increment">+1</button><button @click="decrement">-1</button>`,data: function() {return {counter: 0}},methods: {increment: function() {unter++},decrement: function() {unter--}}})unt("#app")</script>
当触发点击事件改变了data中的counter数据后，会重新渲染dom
上个案例用了template模版，但在用字符串来写标签一定程度上会不方便，我们可以不用template配置项，将dom标签写在挂载mount的对应的渲染模版app上
我们可以选择很多种方式来实现：
在这里我们来对比原生和Vue的实现方式的不同。
声明式编程<div id="app"><h2>当前计数: {{counter}}</h2><button @click="increment">+1</button><button @click="decrement">-1</button></div><script src="./lib/vue.js"></script><script>const app = ateApp({data: function() {return {counter: 0}},methods: {increment: function() {unter++},decrement: function() {unter--}}})unt("#app")
命令式编程<h2>当前计数: <span class="counter"></span></h2><button class="add">+1</button><button class="sub">-1</button><script>// 1.获取domconst h2El = document.querySelector("h2")const counterEl = document.querySelector(".counter")const addBtnEl = document.querySelector(".add")const subBtnEl = document.querySelector(".sub")// 2.定义一个变量记录数据let counter = Content = counter// 2.监听按钮的点击lick = function() {counter+&#Content = lick = function() {Content = counter}</script>
命令式编程和声明式编程；“how to do”自己完成整个how的过程；“what to do”，由框架(机器)完成 “how”的过程；JavaScript编写一条代码，来给浏览器一个指令；命令式编程；声明式编程声明式编程MVC是Model – View –Controller的简称，是在前期被使用非常框架的架构模式，比如iOS、前端；
MVVM是Model-View-ViewModel的简称，是目前非常流行的架构模式；
Vue2.x的时候，也可以传入一个对象（虽然官方推荐是一个函数）Vue3.x的时候，必须传入一个函数，否则就会直接在浏览器中报错Vue的响应式系统劫持(放到响应式系统中)，之后对该对象的修改或者访问都会在劫持中被处理：通过 {{counter}} 访问counter，可以从对象中获取到数据修改counter的值时，app中的 {{counter}}也会发生改变 <div id="app"><h2>{{message}}</h2><button @click="changeMessage">改变message</button></div><script src="./lib/vue.js"></script><script>const app = ateApp({// data: option apidata: function() {return {message: "Hello Data"}},// methods: option apimethods: {changeMessage: function() {ssage = "你好, 师姐!"}}})unt("#app")</script>
绑定到模板中；使用this关键字来直接访问到data中返回的对象的属性箭头函数his是必须有值的，并且应该可以通过this获取到data返回对象中的数据箭头函数，那么这个this就会是window了，这会导致我们无法通过window来获取data返回对象中的数据 // methods: option apimethods: {increment: function() {unter++},// 强调: methods中函数不能写成箭头函数// increment: () => {// console.log(this)// }}
this到底指向什么？本文发布于:2024-02-01 23:58:03，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170680867740002.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
