• 【VUE】

    概念

    VUE是一个用于构建用户界面的渐进式框架

    构建用户界面：基于数据渲染出用户看到的界面

    渐进式：声明式渲染->组件系统->客户端路由->大规模状态管理->构建工具

    框架：一套完整的项目解决方案

    VUE使用方式：

    1.局部模块改造，用Vue核心包开发

    2.整站开发，用Vue核心包&Vue插件&工程化开发

    创建实例

    1.创建Vue实例，初始化渲染

    准备容器

    1. <div id="app">
    2.         
    3.     </div>

    引包

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

    创建Vue实例

    el：指定挂载点

    data：提供数据

    1. const app = new Vue({
    2.         el: '#app',
    3.         data: {
    4.             msg: 'hello'
    5.         }
    6.     })

    指定配置项

    1. <div id="app">
    2.         {{msg}}
    3.     </div>

    插值表达式

    {{        }}：利用表达式进行插值，渲染到页面

    注意点

    1.使用数据必须存在

    2.支持表达式，但不支持语句

    3.不能在标签属性中使用{{}}插值

    响应式特性

    响应式：数据变化，视图自动更新

    访问

    app.msg

    修改数据

    app.msg="bye"

    开发者工具

    指令

    带前缀的特殊标签属性

    v-html

    作用：设置元素的innerHTML

    语法：v-html="表达式"

    1. <body>
    2.     <div id="app">
    3.        <div v-html="msg"></div>
    4.     </div>
    5. </body>
    6. <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    7. <script>
    8.     const app = new Vue({
    9.         el: '#app',
    10.         data: {
    11.             msg: 'baidu'
    12.         }
    13.     })
    14.     
    15. </script>

    v-show

    作用：控制元素显示隐藏

    语法：v-show="表达式"，表达式为true显示，false隐藏，但在源码中显现

    场景：频繁切换显示隐藏的场景

    v-if

    作用：控制元素显示隐藏（条件渲染）

    语法：v-if="表达式"，表达式为true显示，false隐藏，不在源码中显现

    场景：要么显示，要么隐藏

    v-on

    作用：注册事件=添加监听+提供处理逻辑

    语法：

    1.v-on:事件名="内联语句" 或者@事件名="内联语句"

    2.v-on:事件名="methods中的函数名" 或者@事件名="methods中的函数名"

    v-else

    作用：辅助v-if进行判断渲染

    语法：v-else="表达式"，要紧挨v-if使用

    v-else-if

    见上

    v-bind

    作用：动态地设置html的标签属性

    语法：v-bind:属性名="表达式"

    v-for

    作用：基于数据循环（数组，对象，数字~），多次渲染整个元素

    语法：v-for="(item,index) in 数组"，要加key属性

    v-model

    作用：给表单元素使用，双向数据绑定，快速获取设置表单元素内容

    语法：v-model="表达式"

    vue的格式

    1. const app=new vue({
    2. 		// 绑定的容器
    3. 		el:'',
    4. 		// 储存的数据
    5. 		data:{
    6. 			obj:{
    7. 				name:'',
    8. 				id:''
    9. 			}
    10. 		},
    11. 		// 计算属性设置
    12. 		computed:{
    13. 			// 本质和data里面储存的数据一样
    14. 			totalCount(){
    15. 				num=0
    16. 				return num
    17. 			}
    18. 		},
    19. 		// 监视器
    20. 		watch:{
    21. 			obj:{
    22. 				deep:true,
    23. 				handler(newValue){
    24. 					// 数据改变后执行的行为
    25. 					console.log()
    26. 				}
    27. 			},
    28. 			// 对象内的属性监听，简单写法
    29. 			'obj.id'(newValue){}
    30. 		}
    31. 	})

    Vue文件（.vue）

    规范：

    1.属性绑定，src="{{url}}升级为"src="url"

    2.事件绑定，bindtap="eventName"升级为@tap="eventName"

    3.支持Vue常用指令

    Vue生命周期和生命周期的四个阶段

    生命周期：一个Vue实例从创建到销毁的过程，分别是创建（初始化，响应式数据，如data：{}），挂载（渲染模板，绑定容器，插入数据），更新（数据修改，更新视图），销毁（销毁实例）

    生命周期钩子

    Vue生命周期过程中，会自动运行一些函数，被称为【生命周期钩子】→ 让开发者可以在【特定阶段】运行自己的代码。

     

    ElementUI

    基于Vue2.0的桌面端组件库

    1. <!-﹣引入ElementUI样式 -->
    2. <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    3. <Script src="https://unpkg.com/vue/dist/vue.js"></script>
    4. <!-﹣引入ElementUI组件库﹣->
    5. <script src="https://unpkg.com/element-ui/lib/index.js">x/script>

    常用组件 

    container

  • 相关阅读:
    JavaScript阻塞与非阻塞
    IDEA实现命令行传参快捷方法传参
    SpringMVC和实际案例
    光流法动目标检测
    软件工程 阶段测试三
    管理好自己，才是一个人最大的本事
    如何获得一个Oracle 23c免费开发者版
    Systrace 线程 CPU 运行状态分析技巧 - Running 篇
    北斗导航 | RAIM算法之最小二乘残差法（原理讲解，附代码链接：可用性判定）
    windows系统服务管理命令sc
  • 原文地址：https://blog.csdn.net/David_Hzy/article/details/132700017