2024/11/27日 日志 关于Vue && Element

-- Vue
-- ·Vue 是一套前端框架免除原生JavaScript中的DOM操作，简化书写
-- ·基于MVVM(Model-View-ViewModel)思想,实现数据的双向绑定,
--  将编程的关注点放在数据上
-- ·官网:https://cn.vuejs.org
-- 
-- Vue 快速入门
-- 1.新建 HTML 页面，引入 Vue.js文件
-- <script src="js/vue.js"></script>
-- 2.在JS代码区域，创建Vue核心对象，进行数据绑定
-- new Vue({
-- 	el: "#app",
-- 	data() {
-- 			return {
--    	username:""
--    	}
--  	}
-- });
-- 3. 编写视图
-- <div id="app">
-- <input name="username" v-model="username" >
-- {{username}}
-- </div>
-- 
-- Vue 常用指令
-- ·指令:HTML 标签上带有 v- 前缀的特殊属性，不同指令具有不同含义。
-- 	例如:v-if，v-for...
-- ·常用指令
-- 指令          作用
-- v-bind        为HTML标签绑定属性值，如设置 href，css样式等
-- v-model       在表单元素上创建双向数据绑定
-- v-on          为HTML标签绑定事件
-- v-if
-- v-else        条件性的渲染某元素，判定为true时渲染,否则不渲染
-- v-else-if
-- v-show        根据条件展示某元素，区别在于切换的是display属性的值
-- v-for         列表渲染，遍历容器的元素或者对象的属性
-- 
-- 
-- ·v-bind:
-- <a v-bind:href-"ur">百度一下</a>
-- <!--
-- v-bind 可以省略
-- -->
-- <a :href="url">百度一下</a>
-- 
-- ·v-model:
-- <input name="username" v-model="username">
-- 
-- ·html:
-- <input type="button" value="一个按钮" v-on:click="show()">
-- <input type="button" value="一个按钮" @click="show()">
-- ·vue:
-- new Vue({
-- 		el: "#app",
-- 		methods:{
-- 		show(){
-- 			alert("我被点了");
--    }
--   }
-- });
-- 
-- ·v-if:
-- <div v-if="count == 3">div1</div>
-- <div v-else-if"count == 2">div2</div>
-- <div v-else>div3</div>
-- 
-- ·v-show:
-- <div v-show="count == 3">div4</div>
-- 
-- ·v-for:
-- <div y-for="addr in addrs">
-- 	{{addr}}<br>
-- </div>
-- ·加索引
-- <div v-for="(addr,i) in addrs">
-- <!--i表示索引，从0开始-->
-- {i + 1} : {{addr}}<br>
-- </div>
-- 
-- Vue生命周期
-- 生命周期的八个阶段:每触发一个生命周期事件，会自动执行一个生命周期方法(钩子)
-- 状态             阶段周期
-- beforeCreate     创建前
-- created          创建后
-- beforeMount      载入前
-- mounted          挂载完成
-- beforeUpdate     更新前
-- updated          更新后
-- beforeDestroy    销毁前
-- destroyed        销毁后
-- 关键：
-- ·mounted:挂载完成，Vue初始化成功，HTML页面渲染成功:
-- 	发送异步请求，加载数据
-- 
-- 示例:
-- 	new Vue({
-- 		el:"#app"，
-- 		mounted(){
-- 		alert("vue 挂载完毕，发送异步请求");
-- 		} 
-- 	});
-- 

-- Element
-- 
-- ·Element:是饿了么公司前端开发团队提供的一套基于Vue的网站组件库，
--  	用于快速构建网页
-- ·组件:组成网页的部件，例如 超链接、按钮、图片、表格等等~
-- 
-- Element 快速入门
-- 1.引入Element 的css、js文件 和 Vue.js
-- <script src="vue.js"></script>
-- <script src="element-ui/lib/index.js"></script>
-- <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
-- 2.创建Vue核心对象
-- <script>
-- 	new Vue({
-- 		el:"#app
-- 	})
-- </script>
-- 3.官网复制Element组件代码
-- 
-- Element 布局
-- Element 中有两种布局方式
-- Layout 布局:通过基础的 24 分栏，迅速简便地创建布局
-- Container 布局容器:用于布局的容器组件，方便快速搭建页面的基本结构