Vue

Vue 简介 Vue 是一套构建用户界面的渐进式前端框架。只关注视图层，并且非常容易学习，还可以很方便的与其它库或已有项目整合。通过尽可能简单的 API来实现响应数据的绑定和组合的视图组件。特点易用：在有HTML CSS JavaScript 的基础上，快速上手。灵活：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。性能：20kb min+gzip运行大小、超快虛拟DOM、最省心的优化。 Vue 入门 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>快速入门</title> </head> <body> <div id="div"> {{msg}} </div> </body> <script src="js/vue.js"></script> <script> // 脚本 new Vue({ el:"#div", data:{ msg:"Hello Vue" } }) </script> </html> Vue 核心对象: 每一个Vue程序都是从一个Vue核心对象开始的 let vm = new Vue({ 选项列表; }) Vue的程序包含视图和脚本两个核心部分选项列表 el选项: 用于接收获取到页面中的元素.(根据常用选择器获取) data选项: 用于保存当前Vue对象中的数据. 在视图中声明的变量需要在此处赋值 methods选项: 用于定义方法. 方法可以直接通过对象名调用, this代表当前Vue对象数据绑定在视图部分获取脚本部分的数据 {{变量名}} <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>快速入门升级</title> </head> <body>  <div id="div"> <div>姓名:{{name}}</div> <div>班级:{{classRoom}}</div> <button onclick="hi()">打招呼</button> <button onclick="update()">修改班级</button> </div> </body> <script src="js/vue.js"></script> <script> // 脚本 let vm = new Vue({ el:"#div", data:{ name:"张三", classRoom:"不一班" }, methods:{ study(){ alert(this.name + "正在" + this.classRoom+"好好学习") } } }) // 定义打招呼的方法 function hi(){ vm.study(); } function update(){ vm.classRoom = "地球人" } </script> </html> Vue 常用指令指令: 是带有v-前缀的我死属性, 不同指令具有不同含义. 例如v-html, v-if, v-for 使用指令时，通常编与在标签的属性上，值可以使用JS的表达式。常用指令指令作用 v-html 把文本解析为HTML代码 v-bind 为HTML标签绑定属性值 v-if 条件性的渲染某元素,判定为true时渲染,否则不渲染 v-else 条件性的渲染某元素,判定为true时渲染,否则不渲染 v-else-if 条件性的渲染某元素,判定为true时渲染,否则不渲染 v-show 根据条件展示某元素, 区别在于切换的是display属性的值 y-for 列表渲染, 遍历容器的元素或者对象的厲性 v-on 为HTML标签绑定事件 v-model 在表单元素上创建双向数据绑定文本插值 v-html: 把文本解析为HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文本插值</title> </head> <body> <div id="div"> <div>{{msg}}</div> <div v-html="msg"></div> </div> </body> <script src="../js/vue.js"></script> <script> let vm = new Vue({ el:"#div", data:{ msg:"<b>Hello Vue</b>" } }) </script> </html> 绑定属性 v-bind:为HTML标签绑定属性值 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>绑定属性</title> <style> .my{ border: 1px solid red; } </style> </head> <body> <div id="div"> <a v-bind:href="url">百度一下</a> <br> <a :href="url">百度一下</a> <br> <div :class="cls">我是div</div> </div> </body> <script src="../js/vue.js"></script> <script> new Vue({ el:"#div", data:{ url:"http://www.baidu.com", cls: "my" } }) </script> </html> 条件渲染 v-if: 条件性的渲染某元素, 判定为真时渲染,否则不渲染 v-else:条件性的渲染 v-else-if:条件性的渲染 v-show:根据条件展示某元素,区别在于切换的是display属性的值 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>条件渲染</title> </head> <body> <div id="div">  <div v-if="num % 3 == 0">div1</div> <div v-else-if="num % 3 == 1">div2</div> <div v-else>div3</div> <div v-show="flag">div4</div> </div> </body> <script src="../js/vue.js"></script> <script> new Vue({ el:"#div", data:{ num:2, flag:false } }) </script> </html> 列表渲染 v-for:列表渲染,遍历窗口的元素或者对象的属性 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表渲染</title> </head> <body> <div id="div"> <ul> <li v-for="name in names"> {{name}} </li> <li v-for="value in student"> {{value}} </li> </ul> </div> </body> <script src="../js/vue.js"></script> <script> new Vue({ el: "#div", data:{ names:["张三","李四","王五"], student:{ name:"张三", age:23 } } }) </script> </html> 事件绑定 v-on: 为HTML标签绑定事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件绑定</title> </head> <body> <div id="div"> <div>{{name}}</div> <button v-on:click="change">改变div的内容</button> <button v-on:dblclick="change">改变div的内容</button> <button @click="change">改变div的内容</button> </div> </body> <script src="../js/vue.js"></script> <script> new Vue({ el:"#div", data:{ name:"来了呀, 老弟!" }, methods:{ change(){ this.name = "来了" } } }) </script> </html> 表单绑定, 只能表单使用 v-model:在表单元素上创建双向数据绑定双向数据绑定更新data数据, 页面中的数据也会更新更新页面数据, data数据也会更新 MVVM模型(Model View ViewModel)：是MVC模式的改进版在前端页面中，JS对象表示 Model，页面表示View，两者做到了最大限度的分离。将Model和View 关联起来的就是ViewModel，它是桥梁。 ViewModel 负责把 Model 的数据同步到 View 显示出来，还负责把 View 修改的数据同步回 Model. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单绑定</title> </head> <body> <div id="div"> <form autocomplete="off"> 姓名: <input type="text" name="username" v-model="username"> <br> 年龄: <input type="number" name="age" v-model="age"> </form> </div> </body> <script src="../js/vue.js"></script> <script> new Vue({ el:"#div", data:{ username:"张三", age:23 } }) </script> </html> Element 组件库 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>快速入门</title> <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css"> <script src="../js2/vue.js"></script> <script src="../element-ui/lib/index.js"></script> </head> <body> <button>我是按钮</button> <br> <div id="div"> <template> <el-row class="mb-4"> <el-button>Default</el-button> <el-button type="primary">Primary</el-button> <el-button type="success">Success</el-button> <el-button type="info">Info</el-button> <el-button type="warning">Warning</el-button> <el-button type="danger">Danger</el-button> <el-button>中文</el-button> </el-row> <br> </template> </div> </body> <script> new Vue({ el:"#div" }) </script> </html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基础布局</title> <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css"> <script src="../js2/vue.js"></script> <script src="../element-ui/lib/index.js"></script> <style> .bg-purple-dark { background: #99a9bf; } .bg-purple { background: #d3dce6; } .bg-purple-light { background: #e5e9f2; } .grid-content { border-radius: 4px; min-height: 36px; } </style> </head> <body> <div id="div"> <template> <el-row> <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col> </el-row> <el-row> <el-col :span="12"><div class="grid-content bg-purple"></div></el-col> <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col> </el-row> <el-row> <el-col :span="8"><div class="grid-content bg-purple"></div></el-col> <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col> <el-col :span="8"><div class="grid-content bg-purple"></div></el-col> </el-row> </template> </div> </body> <script> new Vue({ el:"#div" }) </script> </html> 布局方式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>容器布局</title> <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css"> <script src="../js2/vue.js"></script> <script src="../element-ui/lib/index.js"></script> <style> .el-header, .el-footer { background-color: #B3C0D1; color: #333; text-align: center; line-height: 60px; } .el-aside { background-color: #D3DCE6; color: #333; text-align: center; line-height: 300px; } .el-main { background-color: #E9EEF3; color: #333; text-align: center; line-height: 600px; } </style> </head> <body> <div id="div"> <el-container> <el-header>Header</el-header> <el-container> <el-aside width="300px">Aside</el-aside> <el-container> <el-main>Main</el-main> <el-footer>Footer</el-footer> </el-container> </el-container> </el-container> </div> </body> <script> new Vue({ el:"#div" }) </script> </html> 表单组件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>容器布局</title> <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css"> <script src="../js2/vue.js"></script> <script src="../element-ui/lib/index.js"></script> <style> </style> </head> <body> <div id="div"> <el-form ref="form" :model="form" label-width="80px"> <el-form-item label="活动名称"> <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item label="活动区域"> <el-select v-model="form.region" placeholder="请选择活动区域"> <el-option label="区域一" value="shanghai"></el-option> <el-option label="区域二" value="beijing"></el-option> </el-select> </el-form-item> <el-form-item label="活动时间"> <el-col :span="11"> <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker> </el-col> <el-col class="line" :span="2">-</el-col> <el-col :span="11"> <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker> </el-col> </el-form-item> <el-form-item label="即时配送"> <el-switch v-model="form.delivery"></el-switch> </el-form-item> <el-form-item label="活动性质"> <el-checkbox-group v-model="form.type"> <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox> <el-checkbox label="地推活动" name="type"></el-checkbox> <el-checkbox label="线下主题活动" name="type"></el-checkbox> <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox> </el-checkbox-group> </el-form-item> <el-form-item label="特殊资源"> <el-radio-group v-model="form.resource"> <el-radio label="线上品牌商赞助"></el-radio> <el-radio label="线下场地免费"></el-radio> </el-radio-group> </el-form-item> <el-form-item label="活动形式"> <el-input type="textarea" v-model="form.desc"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="onSubmit">立即创建</el-button> <el-button>取消</el-button> </el-form-item> </el-form> </div> </body> <script> new Vue({ el:"#div", data() { return { form: { name: '', region: '', date1: '', date2: '', delivery: false, type: [], resource: '', desc: '' } } }, methods: { onSubmit() { console.log('submit!'); } } }) </script> </html> 表格组件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格组件</title> <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css"> <script src="../js2/vue.js"></script> <script src="../element-ui/lib/index.js"></script> </head> <body> <div id="div"> <template> <el-table :data="tableData" stripe style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="name" label="姓名" width="180"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> <el-table-column label="操作" width="100"> <el-button size="mini" type="warning">编辑</el-button> <el-button size="mini" type="danger">编辑</el-button> </el-table-column> </el-table> </template> </div> </body> <script> new Vue({ el:"#div", data() { return { tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' }] } } }) </script> </html> 顶部导航栏组件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>顶部导航栏组件</title> <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css"> <script src="../js2/vue.js"></script> <script src="../element-ui/lib/index.js"></script> </head> <body> <div id="div"> <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"> <el-menu-item index="1">处理中心</el-menu-item> <el-submenu index="2"> <template slot="title">我的工作台</template> <el-menu-item index="2-1">选项1</el-menu-item> <el-menu-item index="2-2">选项2</el-menu-item> <el-menu-item index="2-3">选项3</el-menu-item> <el-submenu index="2-4"> <template slot="title">选项4</template> <el-menu-item index="2-4-1">选项1</el-menu-item> <el-menu-item index="2-4-2">选项2</el-menu-item> <el-menu-item index="2-4-3">选项3</el-menu-item> </el-submenu> </el-submenu> <el-menu-item index="3" disabled>消息中心</el-menu-item> <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item> </el-menu> <div class="line"></div> <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"> <el-menu-item index="1">处理中心</el-menu-item> <el-submenu index="2"> <template slot="title">我的工作台</template> <el-menu-item index="2-1">选项1</el-menu-item> <el-menu-item index="2-2">选项2</el-menu-item> <el-menu-item index="2-3">选项3</el-menu-item> <el-submenu index="2-4"> <template slot="title">选项4</template> <el-menu-item index="2-4-1">选项1</el-menu-item> <el-menu-item index="2-4-2">选项2</el-menu-item> <el-menu-item index="2-4-3">选项3</el-menu-item> </el-submenu> </el-submenu> <el-menu-item index="3" disabled>消息中心</el-menu-item> <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item> </el-menu> </div> </body> <script> new Vue({ el:"#div", data() { return { activeIndex: '1', activeIndex2: '1' }; }, methods: { handleSelect(key, keyPath) { console.log(key, keyPath); } } }) </script> </html> 侧边导航栏 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>侧边导航栏</title> <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css"> <script src="../js2/vue.js"></script> <script src="../element-ui/lib/index.js"></script> </head> <body> <div id="div"> <el-row class="tac"> <el-col :span="3"> <h5>自定义颜色</h5> <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"> <el-submenu index="1"> <template slot="title"> <i class="el-icon-location"></i> <span>导航一</span> </template> <el-menu-item-group> <template slot="title">分组一</template> <el-menu-item index="1-1">选项1</el-menu-item> <el-menu-item index="1-2">选项2</el-menu-item> </el-menu-item-group> <el-menu-item-group title="分组2"> <el-menu-item index="1-3">选项3</el-menu-item> </el-menu-item-group> <el-submenu index="1-4"> <template slot="title">选项4</template> <el-menu-item index="1-4-1">选项1</el-menu-item> </el-submenu> </el-submenu> <el-menu-item index="2"> <i class="el-icon-menu"></i> <span slot="title">导航二</span> </el-menu-item> <el-menu-item index="3" disabled> <i class="el-icon-document"></i> <span slot="title">导航三</span> </el-menu-item> <el-menu-item index="4"> <i class="el-icon-setting"></i> <span slot="title">导航四</span> </el-menu-item> </el-menu> </el-col> </el-row> </div> </body> <script> new Vue({ el:"#div", methods: { handleOpen(key, keyPath) { console.log(key, keyPath); }, handleClose(key, keyPath) { console.log(key, keyPath); } } }) </script> </html>

Vue和Element二 Li.072

Vue和Element一 Li.071