vue.js精讲01
来源:互联网 发布:淘宝卖什么虚拟物品好 编辑:程序博客网 时间:2024/05/22 08:21
笔记及源码地址 : https://github.com/wll8/vue_note
01
view
一个 mvvm框架(库),和 ag 类似。
比较小巧,容易上手。
mvc:
mvp
mvvm
mvx(mv*)
vue 和 ag 的区别。
不用纠结什么好,项目适合什么就用什么。
vue
简单
中文文档
指令: v-xxx
例子: html + json + vue实例
维护: 个人
适合: 移动
ag
上手难
英文文档
指令: ng-xxx
例子: 把所有属性和方法挂到 $scope 上
维护: 谷歌
合适: pc
共同点:
不兼容低版本ie
回目录
vue雏形
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script> <div id="box">{{msg}}</div> <!-- html --> <script> var json={ /*json*/ el:'#box', data:{ msg:'vue' } } var c=new Vue(json); // vue实例 </script>
回目录
常用指令
指令: 扩展 html 标签功能,属性。v-model 一般用表单元素 input 上。注,教程失效部分: v-repeat 已改为 v-for $index 弃用,改为 `(value, index) in arr` 得到 index 变量。 $key 弃用,改为 `(value, key) in obj` 得到 key 变量。
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script> <div id="box"> <input v-model="msg"> {{msg}} <br> {{arr}} <br> {{obj}} <br> 数组<hr> <p v-for="value in arr">{{value}}</p> 下标,数组<hr> <p v-for="(value, index) in arr">{{index}}{{value}}</p> 对象<hr> <p v-for="value in obj">{{value}}</p> key,对象<hr> <p v-for="(value, key) in obj">{{key}}{{value}}</p> </div> <script> var json={ /*json*/ el:'#box', data:{ msg:'vue', arr:[1,2,3], obj:{a:1,b:2} } } var c=new Vue(json); // vue实例 </script>
回目录
事件
所有事件都写在 methods 中。
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script> <div id="box"> <button @click="show()">alert</button> </div> <script> var json={ el:'#box', methods:{ show:function(){ alert(1); console.log(this.$el); } } } var c=new Vue(json); // vue实例 </script>
回目录
vue + bootstrap 实现 todolist
todolist也被认为是留言版。
在线 bootstrap ,引入 -alpha 或 -beta 版本js会报错。
https://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.js Uncaught Error: Bootstrap dropdown require Popper.js https://cdn.bootcss.com/bootstrap/4.0.0-alpha.4/js/bootstrap.js Uncaught Error: Bootstrap tooltips require Tether https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js 正常使用。
回目录
相关源码
01.vue雏形
<script src="https://unpkg.com/vue"></script> <div id="box">{{msg}}</div> <!-- html --> <script> var json={ /*json*/ el:'#box', data:{ msg:'vue' } } var c=new Vue(json); // vue实例 </script>
02.常用指令
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script> <div id="box"> <input v-model="msg"> {{msg}} <br> {{arr}} <br> {{obj}} <br> 数组<hr> <p v-for="value in arr">{{value}}</p> 下标,数组<hr> <p v-for="(value, index) in arr">{{index}}{{value}}</p> 对象<hr> <p v-for="value in obj">{{value}}</p> key,对象<hr> <p v-for="(value, key) in obj">{{key}}{{value}}</p> 事件<hr> <button @click="show()">alert</button> <button @click="add()">arr push</button> v-show <hr> <button @click="show_btn=!show_btn">显示隐藏</button> <p v-show="show_btn">显示隐藏</p> </div> <script> var json={ /*json*/ el:'#box', /*html元素*/ data:{ /*变量*/ msg:'vue', arr:[1,2,3], counter:0, show_btn:true, obj:{a:1,b:2} }, methods:{ /*所有方法都放在里面,注意s*/ show:function(){ alert(1); console.log(this.$el); }, add:function(){ this.arr.push(1); } } } var c=new Vue(json); // vue实例 </script>
03.todolist
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css"> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js"></script> <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script> <script> window.onload=function(){ new Vue({ el:'#box', data:{ myData:[ ], username:'', age:'', nowIndex:-1, // 当前点击的数据 }, methods:{ add:function(){ this.myData.push({ name:this.username, age:this.age }); this.username=''; this.age=''; }, del:function(n){ if(n==-2){ this.myData=[]; }else{ this.myData.splice(n,1); // 删除数据中的第n位 } } } }) } </script> <div class="conatiner" id="box"> <form role="form"> <div class="form-group"> <label for="username">用户名:</label> <input v-model="username" type="text" id="username" class="form-control" placeholder="输入用户名"> </div> <div class="form-group"> <label for="age">年 龄:</label> <input v-model="age" type="text" id="age" class="form-control" placeholder="输入年龄"> </div> <div class="form-group"> <input type="button" value="添加" class="btn btn-primary" @click="add()"> <input type="reset" value="重置" class="btn btn-danger"> </div> </form> <hr> <table class="table table-bordered table-hover"> <caption class="h3 text-info text-center">用户信息表</caption> <tr class="text-danger"> <th class="text-center">序号</th> <th class="text-center">名字</th> <th class="text-center">年龄</th> <th class="text-center">操作</th> </tr> <tr class="text-center" v-for="(item, index) in myData"> <td>{{index+1}}</td> <td>{{item.name}}</td> <td>{{item.age}}</td> <td><button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer" @click="nowIndex=index">删除</button></td> </tr> <tr v-show="myData!=0"> <td colspan="4" class="text-right"> <button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#layer" @click="nowIndex=-2">删除全部</button> </td> </tr> <tr v-show="myData.length==0"> <td colspan="4" class="text-center text-muted"> <p>暂无数据...</p> </td> </tr> </table> <!-- 模态框,弹出框 --> <div role="dialog" class="modal fade" id="layer"> <div class="modal-content"> <div class="modal-header"> <button class="close" data-dismiss="modal"><span>×</span></button> <div class="modal-title">确认删除{{nowIndex==-2 ? '全部' : ''}}么?</div> </div> <div class="modal-body text-right"> <button data-dismiss="modal" class="btn btn-primary btn-sm">取消</button> <button data-dismiss="modal" class="btn btn-danger btn-sm" @click="del(nowIndex)">确认</button> </div> </div> </div> </div>
本文链接:http://www.cnblogs.com/daysme/p/7535197.html
转载请注明出处[我的过去_博客园]:http://www.cnblogs.com/daysme/
转载请注明出处[我的过去_博客园]:http://www.cnblogs.com/daysme/
阅读全文
0 0
- vue.js精讲01
- vue.js精讲02
- 01-Hello Vue.js
- vue.js的学习01
- vue.js
- vue.js
- vue.js
- Vue.js
- vue.js
- Vue.js
- vue.js
- vue.js
- vue.js
- Vue.js
- vue.js
- Vue.js
- Vue.js
- Vue.js
- ThreadLocal工作原理
- 尴尬……无人车美国赌城上路不到一小时就撞了
- 对话张潼 | 腾讯AI Lab周岁:规模飙至370人,要做后来居上的终结者
- Intent实现页面跳转和传值
- 联想高校AI精英挑战赛再下一城,10项目逐鹿华中科大,智能大数据平台夺冠
- vue.js精讲01
- 欢迎使用CSDN-markdown编辑器
- 腾讯225页报告:AI正取代互联网成为新引擎,马化腾提七大关键词
- vue.js精讲02
- 和好几天又开战!AMD显卡老大跳槽,要帮英特尔进军GPU
- Lab 5:面对面需求获取与原型设计
- 提高效率,eclipse上你可能不知道的技巧
- 医疗行业多层级复杂网络环境下的消息传输(远程会诊)架构与实现
- 数据结构实验之二叉树六:哈夫曼编码