2024/11/27日 日志 关于Vue && Element
Vue
点击查看代码
-- 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
--
-- ·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 布局容器:用于布局的容器组件，方便快速搭建页面的基本结构
