• Vue学习:Hello小案例

    使用Vue的目的：构建用户界面（需要使用容器 摆放这个界面的内容）

    favicon.ico:1     GET http://127.0.0.1:5500/favicon.ico 404 (Not Found) 没有页签图标

    在者服务器中 http://127.0.0.1:5500没有/favicon.ico

     

    强制刷新网页：shift+网页上的刷新图标

    这是因为我们使用vs的open with liver server 

    会打开当前所处的页面，会在你的本机5500端口号上开一个小服务器，将整个工程的文件或者文件夹作为这台服务器的根资源（去里面找页签图标 没有就出错）

     自己设置一个这个图标在根目录

     ​​​

     使用{{}}    

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5. 	<meta charset="UTF-8">
    6. 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    7. 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    8. 	<title>Documenttitle>
    9. 	<script src="./js引入/测试版本/vue.js">script>
    10. 	
    11. head>
    12.  
    13. <body>
    14. 	
    15. 	<div id="root">
    16. 		<h1>hello,{{name}}h1>  
    17. 	div>
    18. 	<script>
    19. 		//创建vue实例
    20. 		new Vue({ //const x = new Vue是多余的 直接new就可以
    21. 			el:'#root',//找到容器 通常为css选择器 选择对象
    22. 		  //el:document.getElementById('root'),//
    23. 		  //变化的内容给实例 然后使用配置项目配置
    24. 		  data:{//用户存储数据，数据供给el所指定的容器去使用
    25. 			name:'张三',
    26. 		
    27. 		  },
    28.  
    29. 		});//传递一个参数 参数是一个对象 传递配置对象
    30.  
    31. 	script>
    32. body>
    33.  
    34. html>

    此时vue的小图标亮 

     想让vue工作，需要new创建一个vue实例，且只要传入一个配置对象。

    容器里面的内容符合html规范。

    混入了特殊的vue语法。容器里面的代码被称之为vue模板

    解析流程：先有的容器，然后有的实例，当实例开始工作的时候，发现了容器，

            然后知道整个容器需要全部拿下，开始解析（解析扫描有没有自己的特殊语法）。

            拿到需要的内容，将需要替换的内容全部替换了（张三）

             生成全新的容器 div id=root的容器，里面的vue特殊语法的内容不在是原先的，而是张三。

            将解析完成的容器，放入页面，替换整个容器

    VUE模板：提供模板。将vue工作成果知道往哪里放

  • 相关阅读:
    nginx配置-gzip
    配置OpenGL
    【iMessage相册推位置推软件】实现 Greetbale 的类型Compiler Error编译器将返回错误Compiler Error
    (2022杭电多校三)1011.Taxi（曼哈顿最值+二分）
    数据的异常值和重复值怎么处理？拿去抄作业！
    正则表达式高阶（一）
    在 Visual Studio 2022 中使用文件对比
    【计算机网络】传输层（一）—— 传输层概述
    营业执照识别易语言代码
    20.ROS编程学习：通信的各种进阶使用python
  • 原文地址：https://blog.csdn.net/weixin_47295886/article/details/128174641