• Vue入门

    目录

    一、Vue.js是什么？

    二、Vue优点

    三、安装Vue

    3.1.cdn下载(需连接网络)

    3.2.手动下载

    四、使用Vue

    一、Vue.js是什么？

    Vue是一个构建用户界面(UI)的[渐进式]JavaScript框架。


    什么是渐进式：
             渐进式的意思就是 "主张最少"。每个框架都会有自己的一套编码方式，从而对使用者有一定的要求，这些要求就是主张/约束，主张有强有弱，它的强势程度会影响业务开发中的使用方式。
             通俗理解渐进式的意思就是：你可以只用我的一部分，而不是用了我这一部分就必须用我的所有部分。
     


    二、Vue优点

            a.轻量级的框架：只关注视图层，是一个构建数据的视图集合，大小只有几十kb。Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统。


            b.简单易学：国人开发，中文文档，不存在语言障碍，易于理解和学习。


            c.双向数据绑定：同时也是vue.js最大的优点，通过MVVM思想实现数据的双向绑定，让开发者不用再操作dom对象，有更多的时间去思考业务逻辑。


            d.组件化：在前端应用里我们是否也可以像面向对象编程一样把模块封装呢？这就引入了组件化开发的思想。Vue.js通过组件，把一个单页应用中的各种模块拆分到一个一个单独的组件(component)中，我们只要先在父级应用中写好各种组件标签(占坑)，并且在组件标签中写好要传入组件的参数(就像给函数传入参数一样，这个参数叫做组件的属性)，然后再分别写好各种组件的实现(填坑)，然后整个应用就算做完了。


            e.视图&数据&结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作。


            f.运行速度快。

    三、安装Vue

    3.1.cdn下载(需连接网络)

         
         
     
         
         

    1. 进入BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务（或把 bootcdn.cn 复制到浏览器），在搜索栏搜索 vue ，查询出 vue 后点击进入；

    ​

    2.选择 vue 的版本，点击右边的 复制

         
         

     1.进入Vue.js官网（或把 cn.vuejs.org 复制到浏览器），点击 起步 ； 

    ​

    2.点击 安装 ，找到 开发版本 下载；

    ​

    3.下载后导入 js 文件夹内；

    ​

    4.在界面直接引入；

    ​

    四、使用Vue

    案例一：输出Hello Vue!

    1. html>
    2. <html>
    3.     <head>
    4.         <meta charset="utf-8" />
    5.         <title>Hello Vue!title>
    6.         
    7.         <script type="text/jscript" src="./js/vue.js">script>
    8.     head>
    9.     <body>
    10.         
    11.         <h1 id="aa">{{msg}}h1>
    12.     <script type="text/jscript">
    13.         // 创建Vue实例
    14.         var vue = new Vue({
    15.             el:"#aa",// 挂载点/管理边界
    16.               // 两种方式
    17.               data:{// 1.JSON格式
    18.                  msg:"Hello Vue!"
    19.               }
    20.             
    21.             // data:function(){// 2.方法
    22. 			//     return{
    23. 			//         msg:"Hello Vue!"
    24. 			//     }
    25. 			// }
    26.             // data(){// 2.方法 写法二
    27. 			//     return{
    28. 			//         msg:"Hello Vue!"
    29. 			//     }
    30. 			// }
    31.         });
    32.     script>
    33. html>

    控制台打印：

    ​

    1.JSON格式的另一种写法：

    ​

    案例二：调用绑定事件及方法

    1. html>
    2. <html>
    3.     <head>
    4.         <meta charset="utf-8" />
    5.         <title>调用绑定事件及方法title>
    6.         
    7.         <script type="text/jscript" src="./js/vue.js">script>
    8.     head>
    9.     <body>
    10. 	<div id="aa">
    11.     	
    12.     	<h1>{{msg}}h1>
    13. 		
    14. 		
    15. 		<button v-on:click="fa">fa按钮（触发点击事件）button>
    16. 	div>
    17.     <script type="text/jscript">
    18.         // 创建Vue实例
    19.         var vue = new Vue({
    20.             el:"#aa",// 挂载点/管理边界
    21.               data:{// 1.JSON格式
    22.                   msg:"Hello Vue!"
    23.               },
    24. 			  methods:{// 2.定义方法，所有方法放在fail属性里面
    25. 				fa:function(){
    26. 					console.log("你点了我（fa函数！）");
    27. 				}
    28. 				// fa(){ 方法写法二（去掉:function）
    29. 				// 	console.log("你点了我（fa函数！）");
    30. 				// }
    31. 			}
    32.         });
    33.     script>
    34. html>

    控制台打印：

    ​

    案例三：双向数据绑定

    1. html>
    2. <html>
    3.     <head>
    4.         <meta charset="utf-8" />
    5.         <title>双向数据绑定title>
    6.         <script type="text/javascript" src="js/vue.js">script>
    7.     head>
    8.     <body>
    9. 		<div id="aa">
    10. 			
    11. 			姓氏：<input type="text" v-model="xs" />
    12. 			<br/>
    13. 			
    14. 			名字：<input type="text" v-model="mz" />
    15. 			<br/>
    16. 			
    17. 			姓名：<h1>{{xs}}{{mz}}h1>
    18. 		div>
    19.     <script type="text/jscript">
    20.         // 创建Vue实例
    21.         var vue = new Vue({
    22. 			el:'#aa',// 挂载点
    23. 			data:{// JSON格式
    24. 				xs:'',
    25. 				mz:''
    26. 			}
    27. 		});
    28.     script>
    29. html>

    运行：

    双向数据绑定

    案例四：单向数据绑定（用v-once指令进行单向绑定，一般不用）

    1. html>
    2. <html>
    3.     <head>
    4.         <meta charset="utf-8" />
    5.         <title>单向数据绑定title>
    6.         <script type="text/javascript" src="js/vue.js">script>
    7.     head>
    8.     <body>
    9. 		<div id="aa">
    10. 			
    11. 			姓氏：<input type="text" v-model="xs" />
    12. 			<br/>
    13. 			
    14. 			名字：<input type="text" v-model="mz" />
    15. 			<br/>
    16. 			
    17. 			姓名：<h1 v-once>{{xs}}{{mz}}h1>
    18. 		div>
    19.     <script type="text/jscript">
    20.         // 创建Vue实例
    21.         var vue = new Vue({
    22. 			el:'#aa',// 挂载点
    23. 			data:{// JSON格式
    24. 				xs:'xs',
    25. 				mz:'mz'
    26. 			}
    27. 		});
    28.     script>
    29. html>

    运行：

    单向数据绑定

    完。

  • 相关阅读:
    Linux学习之MySQL主键、外键、索引
    bash调试方法总结
    代码随想录 Day41 动态规划09 LeetCode T121 买卖股票的最佳时机 T122 买卖股票的最佳时机II
    重写与重载笔记
    简单工厂模式的实践
    Nginx启用Geoip2模块实现国家城市识别 —— 筑梦之路
    Python字典和集合操作指南：创建、获取值、修改和删除键值对，复制和遍历方法全解析
    Applied Time Series Analysis with R
    43、vue导出pdf文件，并解决滚动条外内容无法获取的问题
    Jenkins--部署--01--打包Maven项目为Docker镜像并运行
  • 原文地址：https://blog.csdn.net/weixin_62332711/article/details/126062549