Vue.js前端开发实战（第2版）-教学课件 第2章 Vue.pptx

;;;;;;;单文件组件;;;;;template

!--此处编写组件的结构--

/template

script

/*此处编写组件的逻辑*/

/script

style

/*此处编写组件的样式*/

/style;;;;;;保存上述代码后，在浏览器中访问http://127.0.0.1:5173/，Demo组件的页面效果如下图所示。;数据绑定;;2.2.1 初识数据绑定;2.2.1 初识数据绑定;2.2.1 初识数据绑定;2.2.1 初识数据绑定;2.2.1 初识数据绑定;2.2.1 初识数据绑定;2.2.1 初识数据绑定;2.2.1 初识数据绑定;2.2.1 初识数据绑定;保存上述代码后，在浏览器中访问http://127.0.0.1:5173/，数据绑定的页面效果如下图所示。;2.2.1 初识数据绑定;2.2.1 初识数据绑定;2.2.1 初识数据绑定;;2.2.1 初识数据绑定;;2.2.2 响应式数据绑定;2.2.2 响应式数据绑定;;;保存上述代码后，在浏览器中访问http://127.0.0.1:5173/，初始页面效果如下图所示。;等待2秒后的页面效果如下图所示。;2.2.2 响应式数据绑定;;;保存上述代码后，在浏览器中访问http://127.0.0.1:5173/，初始页面效果如下图所示。;等待2秒后的页面效果如下图所示。;2.2.2 响应式数据绑定;;;保存上述代码后，在浏览器中访问http://127.0.0.1:5173/，初始页面效果如下图所示。;等待2秒后的页面效果如下图所示。;2.2.2 响应式数据绑定;;;保存上述代码后，在浏览器中访问http://127.0.0.1:5173/，初始页面效果如下图所示。;等待2秒后的页面效果如下图所示。;指令;;;标签名v-text=数据名/标签名;;;保存上述代码后，在浏览器中访问http://127.0.0.1:5173/，v-text的运行结果如下图所示。;标签名v-html=数据名/标签名;;;保存上述代码后，在浏览器中访问http://127.0.0.1:5173/，v-html的运行结果如下图所示。;;标签名v-bind:属性名=数据名/标签名;;;保存上述代码后，在浏览器中访问http://127.0.0.1:5173/，v-bind的运行结果如下图所示。;;标签名v-on:事件名=事件处理器/标签名;;;保存上述代码后，在浏览器中访问http://127.0.0.1:5173/，单击“输出信息”按钮后的页面效果和控制台如下图所示。;;标签名v-model=数据名/标签名;inputv-model=info;2.3.4 双向数据绑定指令;;;保存上述代码后，在浏览器中访问http://127.0.0.1:5173/，v-model的初始页面效果如下图所示。;在输入框中输入“xiaoming”，页面效果如下图所示。;;;保存上述代码后，在浏览器中访问http://127.0.0.1:5173/，未使用.number修饰符的初始页面效果如下图所示。;改变n1的值为“198”，查看n1+n2的值。改变n1的值为“198”的页面效果如下图所示。;;改变n1的值为“198”，查看n1+n2的值。使用.number修饰符后改变n1的值为“198”的页面效果如下图所示。;;;1.v-if;2.3.5 条件渲染指令;;;保存上述代码后，在浏览器中访问http://127.0.0.1:5173/，v-if的初始页面效果如下图所示。;单击“切换成优秀”按钮后的页面效果如下图所示。;2.v-show;;;保存上述代码后，在浏览器中访问http://127.0.0.1:5173/，v-show的初始页面效果如下图所示。;单击“显示/隐藏”按钮后的页面效果如下图所示。;;;2.3.6 列表渲染指令;divv-for=