智享笔记 Vue
-
父组件向子组件传值的基本使用
<body> <div id="app"> <div>{{pmsg}}</div> <menu-item title='来自父组件的值'></menu-item> <menu-item :title='ptitle' content='hello'></menu-item> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript
-
Vue调试工具测试
<head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .root { background-color: orange; } .second { background-color: lightgreen; } .third { background-color: lightblue; } </style></head><body> <div id="app" class="root">
-
局部组件用法
<body> <div id="app"> <hello-world></hello-world> <hello-tom></hello-tom> <hello-jerry></hello-jerry> <test-com></test-com> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"&
-
组件注册注意事项下
<body> <div id="app"> <button-counter></button-counter> <hello-world></hello-world> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* 组件注册注意事项 如果使用驼峰式命名组件，那么在使用组件的时候，只能在字符串模板中用驼峰的方式使用组件，但是 在普
-
组件注册注意事项上
<body> <div id="app"> <button-counter></button-counter> <button-counter></button-counter> <button-counter></button-counter> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* 组件注册注
-
组件基本使用
<body> <div id="app"> <button-counter></button-counter> <button-counter></button-counter> <button-counter></button-counter> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* 组件注册
-
图书管理案例-常用特性应用场景
<head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .grid { margin: auto; width: 530px; text-align: center; } .grid table { border-top: 1px solid #C2D89A; width: 100%; border-collapse: collapse; } .grid th,td { padding: 10; border: 1px dashed #
-
图书管理案例-删除图书
<head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .grid { margin: auto; width: 530px; text-align: center; } .grid table { border-top: 1px solid #C2D89A; width: 100%; border-collapse: collapse; } .grid th,td { padding: 10; border: 1px dashed #
-
图书管理案例-修改图书
<head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .grid { margin: auto; width: 530px; text-align: center; } .grid table { border-top: 1px solid #C2D89A; width: 100%; border-collapse: collapse; } .grid th,td { padding: 10; border: 1px dashed #
-
图书管理案例-添加图书
<head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .grid { margin: auto; width: 530px; text-align: center; } .grid table { border-top: 1px solid #C2D89A; width: 100%; border-collapse: collapse; } .grid th,td { padding: 10; border: 1px dashed #
-
图书管理案例-列表展示
<head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .grid { margin: auto; width: 500px; text-align: center; } .grid table { width: 100%; border-collapse: collapse; } .grid th,td { padding: 10; border: 1px dashed orange; height: 35px; line-heigh
-
动态响应式数据处理
<body> <div id="app"> <ul> <li v-for='item in list'>{{item}}</li> </ul> <div> <div>{{info.name}}</div> <div>{{info.age}}</div> <div>{{info.gender}}</div> </div> </div> <script type="text/javascript" src="js/
-
变异方法和替换数组
<body> <div id="app"> <div> <span> <input type="text" v-model='fname'> <button @click='add'>添加</button> <button @click='del'>删除</button> <button @click='change'>替换</button> </span> </div> <ul> <li :key='index' v-f
-
实例的生命周期
<body> <div id="app"> <div>{{msg}}</div> <button @click='update'>更新</button> <button @click='destroy'>销毁</button> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* Vue实例的生命周期 */ v
-
带参数的过滤器案例
<body> <div id="app"> <div>{{date | format('yyyy-MM-dd hh:mm:ss')}}</div> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* 过滤器案例：格式化日期 */ // Vue.filter('format', function(value, arg) { // if(arg == 'yyy
-
过滤器基本用法
<body> <div id="app"> <input type="text" v-model='msg'> <div>{{msg | upper}}</div> <div>{{msg | upper | lower}}</div> <div :abc='msg | upper'>测试数据</div> </div> <script type="text/javascript" src="js/vue.js"></script> <script
-
侦听器案例
<body> <div id="app"> <div> <span>用户名：</span> <span> <input type="text" v-model.lazy='uname'> </span> <span>{{tip}}</span> </div> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/
-
侦听器基本用法
<body> <div id="app"> <div> <span>名：</span> <span> <input type="text" v-model='firstName'> </span> </div> <div> <span>姓：</span> <span> <input type="text" v-model='lastName'> </span> </div> <div>{{fu
-
计算属性与方法的区别
<body> <div id="app"> <div>{{reverseString}}</div> <div>{{reverseString}}</div> <div>{{reverseMessage()}}</div> <div>{{reverseMessage()}}</div> </div> <script type="text/javascript" src="js/vue.js"></script> <script typ