Vue概述image.pngVue快速入门image.png

案例演示

创建web骨架项目
image.png

导入vue.js

:::info 创建js目录放入vue.js，并在html页面中引入 ::: image.png

编写Html页面

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  9. <div id="app">
  10.     <input v-model="username">
  11. <!--    差值表达式-->
  12.     {{username}}
  13. </div>
  15. <script src="js/vue.js"></script>
  16. <script>
  17.     //1.创建Vue核心对象
  18.     new Vue({
  19.         el:"#app",
  20.         data(){
  21.             return {
  22.                 username:""
  23.             }
  24.         }
  25.     });
  27. </script>
  29. </body>
  30. </html>

运行测试image.pngVue常用指令

image.pngimage.png

演示v-bind

编辑html

  1. <!DOCTYPE html>
  2. <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  9. <div id="app">
  11.     <a v-bind:href="url">点击一下</a>
  12. <!-- v-bind   简化写法-->
  13.     <a :href="url">点击一下</a>
  15. </div>
  17. <script src="js/vue.js"></script>
  18. <script>
  19.     //1.创建Vue核心对象
  20.     new Vue({
  21.         el:"#app",
  22.         data(){
  23.             return {
  24.                 username:"",
  25.                 url:"https://www.baidu.com"
  26.             }
  27.         }
  28.     });
  30. </script>
  32. </body>
  33. </html>

运行测试image.png

演示v-model

  • 双向绑定

    编辑htmlimage.png运行测试image.png演示

    小结

    image.png