珠峰2016，第9期 vue.js 笔记部份
在珠峰参加培训好年了，笔记原是记在本子上，现在也经不需要看了，搬家不想带上书和本了，所以把笔记整理下，存在博客中，也顺便复习一下
安装vue.js
因为方便打包和环境依赖，所以建意npm init -y
第一个示例：
<script src ="./node_modules/vue/dist/vue.js" ></script>
<div id="app">
{{msg==='hello'?1:0}}
</div>
</head>
<body>
<script>
let vm = new Vue({
el:'#app',
data:{
msg:'hello'
}
});
双向绑定及原理：又向绑定只需要在一个可以输入的控件中加入v-model = ""，如
<input type = "text v-model = "msg">
__________________________________________
let vm = new Vue({
el:'#app',
data:{
msg:'hello'
}
});
<!--Object.defineProperty--!>
老版本给对象属性定义方法是 var obj.a = "name" 而新版本的defineProperty 则可以在别人获取和得到属性时，触发事件，还有很多配置选项，这是老版本做不到的
新版本定义方法：
Object.defineProperry(obj.'nmae',{
configurable:True, // 是否能删除
writeble.true|false , //是否能写操作
enumerable:false, 是否能枚举
// defingProperty,上有二个重要的方法,get(),set() 在设置和 得到属性自动触发
get(){
*******************
}
set(){
**********************
}
value:1
age:2
})
_________________________________________________________________________________
比如在
get(){
return 1
}
那么在获取对象性时总是会返回1，在赋值时有一个坑，就是set(var){
obj.name = "xxx"
}
在赋值时又调用赋值，形成无限循环 ，通常不能在里面给自己赋值，用第三方变解决。。返回和设置时都操作第三方变量，
从而解决自己调用自己的无限循环。。
let obj = {}
let temp = {}
object.defineProperty(obj,"name",{get(){
get(){
return temp["name"]
}
set(val){
temp["name"]=val;
})
给绑定一个输入框的例子：仅是原理，工作中用不到
..........................................................
<input type="text" id="input"></input>
.........................................................
let obj = {},
let temp = {},
Object.defineProperty(obj,'name',{
get(){
return temp['name']
}
set(val){ // 给obj 赋值时触发
temp["name" = val]
input.value = obj.name
}
});
input.value = obj.name; //页面加载时，用调用get 方法
input.addEventListener('input',function(){
obj.name = this.value;
})
基础指令。。。。。。。。。。。。。。。。。。。。。。
v-text == {{}} //v-text 界面不闪烁
v-html == <p>xxxx</p>
v-model == "" 双向绑定
v-once 只绑一次
v-for
————————————————————————————————————————————————————————————————————————————
<div id = "app">
<ul>
<li v-for = "f in fruits">{{f.name}}</li>
//如果要得到index，循环时取二个值，要回括号
//<li v-for = "(f,index) in fruits"{{f.name}} {{index+1}}></li>
</ul>
</div>
<script scr = "......./vue.js"></script>
<script>
let vm = new Vue({
el:"#app",
data:{
fruits:[{name:'xxx'},{name:'yyy'},{name:'ggg'}]
}
})
</script
————————————————————————————————————————————————————————————————————————————
基础todo功能 表单回车后下列菜单自动增加
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id = "app">
<input type="text" v-model="val" @keyup = "add">
<ul>
<li v-for = "(a,index) in arr">{{a}}<button@click = "remove（index）">删除</button></li>
</ul>
</div>
</body>
<script src ="./node_modules/vue/dist/vue.js" ></script>
<script>
let vm;
vm = new Vue({
el: '#app',
methods: {
add(e){
if(e.keyCode === 13)this.arr.unshift(this.val);this.val = '';
}
},
data: {
arr: [],
val: '',
}
});
</script>
</html>
数据响应式变化：给对象加属性的三个方法。自动监听，调用自己的get set 方法
let vm = new Vue({
el :'#app',
data:{
a:{school:2} // 1,声明时写
}
});
vm.$set(vm.a,'school'，8） // 2.写在这儿
对于要设很多属性的话，可以替换原对象，
vm.a = {school:'zfpx',age:8,address:'xxx'} //3 重写方法
对于数组响应的话，数组元素改变监听不到，常规方法比如
vm.arr[0] = 100
vm.arr.length = -=2
这些变化响化不到数据，只能用变异方法，比如：pop push shift unshift sort reserve splice 能改变数组的方法才行
vm.arr.reverse();
vm.arr = vm.arr.map(item = >item*=3);
简易的todo 例子：
双向绑定实现表单和列表交互，，这儿不作过多解释，把代码复制一下就能看到效果，在一参看，很简单
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id = "app">
<input type="text" v-model="val" @keyup.crtl.enter = "add">
<ul>
<li v-for = "(a,index) in arr">{{a}} <button @click = "remove(index)">删除</button></li>
</ul>
</div>
</body>
<script src ="./node_modules/vue/dist/vue.js" ></script>
<script>
let vm;
vm = new Vue({
el: '#app',
methods: {
add(e){
this.arr.unshift(this.val);
this.val = "";
},
remove(i){this.arr = this.arr.filter((item,index)=>index!==i)}
},
data: {
arr: [],
val: '',
}
});
</script>
</html>
第一个AXIOS例子，因为回调函数的this 指向winows 所以用简头函数强制指向主体。
需要说明的二点，1，手工写的json 文件，需要用JSON.stringify() 方法调一下格式，2 忘了，等会补上，为了 节省篇章，代码收缩一下，
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id = "app"> </div>
</body>
<script src ="./node_modules/vue/dist/vue.js" ></script>
<script src = "./node_modules/axios/dist/axios.js"></script>
<script>
let vm;
vm = new Vue({
el: '#app',
created(){
axios.get('./lz.json').then(res=>{
this.products = res.data;
},err=>{
console.log(err);
});
},
data: {
products:[]
}
});
</script>
</html>
axios 的原理是利用promise-ajax:
promise是解决回调问题 传统的ajax方法回调太多代码不好看 例：
解决问题 一：
缓时二秒后给一个变量赋值 a = ‘zzz’,另外的函数打印：通常代码如下
let a = '';
funcion buy(){
setTimeout()=>{
let a = "zzzz";
},2000};
buy();
function cookie(){
//如何在这儿打印 a 的值 ，，技穷了吧！
}
cookie();
！解决这些问题js 只能用回调,,以下方法解决
let a = '';
function buy(callback){
setTimeout(()=>{
a = 'yss';
callback(a);
},2000);
}
buy(function cookie(val){
console.log(val);
})
以上方法代码不够直观，所以我们开始用要讲的promise 解决这个回调问题。。promise js 自带的，new promise 就能用
promise 的三个状态 成功，失败，等待
//resolve 成功态
//reject 失败态
let p = new Promise((resolve,reject)=>{
let a = ‘魔茹’;
# resolve(a); 成功和失败可以自定义，成功也可以调用reject方法
reject(a)
},2000)
#p.then((data)=>{console.log(data)},()=>{});
#换个调取方法
p.then((data)=>{console.log(data)},(err)=>{console.log('err')});
女朋友买包实例：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id = "app"> </div>
</body>
<!--<script src ="./node_modules/vue/dist/vue.js" ></script>-->
<!--<script src = "./node_modules/axios/dist/axios.js"></script>-->
<script>
function buyPack() {
return new Promise((resolve,reject)=>{
setTimeout(()=>{
if(Math.random()>0.5){
resolve('买')
}else{
reject('不买')
}
},Math.random()*10000)
});
}
buyPack().then(function(data){
console.log(data);
},function(data){
console.log(data);
}); </script>
</html>
浏览器调试运行查看结果
promise-ajax 手工封装ajax示列：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id = "app"> </div>
</body>
<script src ="./node_modules/vue/dist/vue.js" ></script>
<script src = "./node_modules/axios/dist/axios.js"></script>
<script>
function ajax({url = "",type='get',dataType = "json"}) {
return new Promise((resolve,reject)=>{
let xhr = new XMLHttpRequest();
xhr.open(type,url,true);
xhr.responseType =dataType;
xhr.onload = function(){
resolve(xhr.response)
console.log("........................")
};
xhr.onerror = function (err) {
reject(err)
};
xhr.send();
});
}
let vm = new Vue({
el:'#app',
created(){
ajax({url:'./lz.json'}).then((res)=>{
console.log(res)
},(err)=>{
})
},
data:{
products:[]
}
}) </script>
</html>
传统事件外理表单例子：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<div id = "app">
<div class="container">
<div class="row">
<table class="table table-hover table-bordered">
<caption class = "h2 text-warning text-center">珠峰购物车</caption>
<tr>
<th>全选<input type="checkbox"></th>
<td>商品</td>
<td>单价</td>
<td>数量</td>
<td>小记</td>
<td>操作</td>
</tr>
<tr v-for ="(product,index) in products">
<td><input type="checkbox" v-model="product.isSelected" @change="checkOne"></td>
<td><img :src = "product.productCover" :title="product.productCover"> {{product.productName}}</td>
<td>{{product.productPrice}}</td>
<td><input type="number" v-model.number = "product.productCount"></td>
<td>{{product.productCount*product.productPrice | toFixed(2)}}</td>
<td><button class="btn btn-danger" @click = "remove(product)">删除</button></td>
</tr>
<tr>
<td colspan="6">
总价格 : {{sum()| toFixed}}
</td> </tr>
</table>
</div>
</div>
</div>
</body>
<script src ="./node_modules/vue/dist/vue.js" ></script>
<script src = "./node_modules/axios/dist/axios.js"></script>
<script>
let vm = new Vue({
el:'#app',
filters:{
toFixed(input,param1){
return '$'+input.toFixed(param1)
}
},
created() {
this.getData();
},
methods:{
sum(){
return this.products.reduce((prev,next)=>{
if(!next.isSelected)return prev; return prev+next.productPrice*next.productCount;
},0)
}, checkOne(){
this.checkAll = this.products.every(item=>item.isSelected);
},
change(){
this.products.forEach(item=>item.isSelected = this.checkAll);
},
remove(p){
this.products = this.products.filter(item=>item !==p)
},
getData(){
axios.get('./lz.json').then(res=>{
this.products = res.data;
this.checkOne();
},err=>{
console.log(err);
});
}
},
data:{
products:[],
checkAll:false, }
}) </script>
</html>
计算属性外理表单例子：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<div id = "app">
<div class="container">
<div class="row">
<table class="table table-hover table-bordered">
<caption class = "h2 text-warning text-center">珠峰购物车</caption>
<tr>
<th>全选<input type="checkbox" v-model="checkAll"></th>
<td>商品</td>
<td>单价</td>
<td>数量</td>
<td>小记</td>
<td>操作</td> </tr>
<tr v-for ="(product,index) in products">
<td><input type="checkbox" v-model="product.isSelected"></td>
<td><img :src = "product.productCover" :title="product.productCover"> {{product.productName}}</td>
<td>{{product.productPrice}}</td>
<td><input type="number" v-model.number = "product.productCount"></td>
<td>{{product.productCount*product.productPrice | toFixed(2)}}</td>
<td><button class="btn btn-danger" @click = "remove(product)">删除</button></td>
</tr>
<tr>
<td colspan="6">
总价格 : {{sum|toFixed(2)}}
</td> </tr>
</table>
</div>
</div>
</div>
</body>
<script src ="./node_modules/vue/dist/vue.js" ></script>
<script src = "./node_modules/axios/dist/axios.js"></script>
<script>
let vm = new Vue({
el:'#app',
filters:{
toFixed(input,param1){
return '$'+input.toFixed(param1)
}
},
created() {
this.getData();
},
computed:{
checkAll:{
get(){
return this.products.every(p=>p.isSelected);
},
set(val){
this.products.forEach(p=>p.isSelected = val);
}
},
sum:{
get(){
return this.products.reduce((prev,next)=>{
if(!next.isSelected)return prev;
return prev+next.productPrice*next.productCount;
},0);
}
}
},
methods:{
remove(p){
console.log('toFixed(2)toFixed(2)'),
this.products = this.products.filter(item=>item !==p)
},
getData(){
axios.get('./lz.json').then(res=>{
this.products = res.data;
},err=>{
console.log(err);
});
}
},
data:{
products:[], }
}) </script>
</html>
vue.js动画处理部份
事件处理部份
珠峰2016，第9期 vue.js 笔记部份的更多相关文章
- vue.js笔记总结
一份不错的vue.js基础笔记!!!! 第一章 Vue.js是什么? Vue(法语)同view(英语) Vue.js是一套构建用户界面(view)的MVVM框架.Vue.js的核心库只关注视图层,并且 ...
- vue.js笔记
一.v-bind 缩写 <!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> &l ...
- Vue.js笔记 — vue-router路由懒加载
用vue.js写单页面应用时,会出现打包后的JavaScript包非常大,影响页面加载,我们可以利用路由的懒加载去优化这个问题,当我们用到某个路由后,才去加载对应的组件,这样就会更加高效,实现代码如下 ...
- Vue.js 笔记之 img src
固定路径(原始html) index.html如下,其中,引号""里面就是图片的路径地址 ```<img src="./assets/1.png"> ...
- vue.js笔记1.0
事件: 事件冒泡行为: 1.@click="show($event)" show:function (ev) { ev.cancelBubble=true; } 2.@click. ...
- vue.js 笔记
<!-- 多层for循环 --> <ul> <li v-for="(ite,key) in list2"> {{key}}-------{{it ...
- node npm vue.js 笔记
cnpm 下载包的速度更快一些. 地址:http://npm.taobao.org/ 安装cnpm: npm install -g cnpm --registry=https://registry.n ...
- Vue.js学习笔记（2）vue-router
vue中vue-router的使用:
- 【vue.js权威指南】读书笔记（第一章）
最近在读新书<vue.js权威指南>,一边读,一边把笔记整理下来,方便自己以后温故知新,也希望能把自己的读书心得分享给大家. [第1章:遇见vue.js] vue.js是什么? vue.j ...
随机推荐
- 微信小程序测试点
一.测试范围 1.权限测试 需要检查以下几种情况下微信用户访问的权限 1)未授权微信登录小程序 未授权时,一般使用一些业务功能的时候,都会弹出提醒:先授权再操作对应功能.or在提交数据到后台的时候,会 ...
- [NumPy]文件的保存和加载
如果想看.ipynb文件,那就借一步说话!
- CAS5.3服务器搭建与客户端整合SpringBoot以及踩坑笔记
CAS5.3服务器搭建与客户端整合SpringBoot以及踩坑笔记 cas服务器的搭建 导出证书(1和2步骤是找了课程,随便写了一下存记录,不过对于自己测试不投入使用应该不影响) C:\Users\D ...
- 【笔记】求数据的对应主成分PCA（第一主成分）
求数据的第一主成分 (在notebook中) 将包加载好,再创建出一个虚拟的测试用例,生成的X有两个特征,特征一为0到100之间随机分布,共一百个样本,对于特征二,其和特征一有一个基本的线性关系(为什 ...
- 使用JDBC(Dbutils工具包)来从数据库拿取map类型数据来动态生成insert语句
前言: 大家在使用JDBC来连接数据库时,我们通过Dbutils工具来拿取数据库中的数据,可以使用new BeanListHandler<>(所映射的实体类.class),这样得到的数据, ...
- 【网络编程】TCPIP-5-UDP
目录 前言 5. UDP 网络编程 5.1 UDP 的工作原理 5.2 UDP 的高效性 5.3 实现 UDP 服务端/客户端 5.3.1 概念 5.3.2 UDP 的数据 I/O 函数 5.3.3 ...
- SQL 练习2
查询同时存在" 01 "课程和" 02 "课程的情况 分析:分别先查询出包含有01课程和02课程 SELECT * from sc WHERE cid='01' ...
- 什么是.NET CLI CLR IL JIT GC,它们是如何工作的
参考网址: https://cloud.tencent.com/developer/article/1432891 1:什么是.NET? NET 是 Microsoft 的用以创建 XML Web 服 ...
- 简单实现 nodejs koa2 mysql 增删改查 制作接口
1.首先 在电脑上安装 nodejs (此处略过) 2.全局安装 koa2 (这里使用的淘宝镜像cnpm,有兴趣的同学可以自行搜索下) cnpm install koa-generator -g 3. ...
- 【开发工具】idea常用配置
1. 设置鼠标滚轮修改字体大小 我们可以勾选此设置后,增加Ctrl + 鼠标滚轮 快捷键来控制代码字体大小显示. 2. 设置鼠标悬浮提示 3. 设置自动导包功能 Add unambiguous im ...