珠峰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 ...
随机推荐
- C运算符（算数运算符）
运算符是一种告诉编译器执行特定的数学或逻辑操作的符号.C 语言内置了丰富的运算符,并提供了以下类型的运算符: 算术运算符 关系运算符 逻辑运算符 位运算符 赋值运算符 杂项运算符 1 //实列 2 3 ...
- 2021年最新字节跳动Android面试真题解析
概述 时间过得是真TM快,回想自己是16年从学校毕业,现在是出来工作的第五个年头啦.在不同的大小公司都待过,就在前段时间顺利的完成了一次跳槽涨薪,面试了几家公司,最终选择了字节跳动.今特此前来跟大家进 ...
- 【Android面试查漏补缺】之Handler详解，带你全面理解Handler消息机制
在安卓面试中,关于 Handler 的问题是必备的,但是这些关于 Handler 的知识点你都知道吗? 一.题目层次 Handler 的基本原理 子线程中怎么使用 Handler MessageQue ...
- Promise教程及用法
目录 1,介绍 2,特点 3,缺点 4,基本用法 5,then 6,catch 7,finally 8,all() 9,race() 10,allSettled() 11,any() 12,现有对象转 ...
- shell——sort、uniq、tr、cut和eval命令
一.排序命令sort 以行位单位对文件内容进行排序,也可以根据不同的数据类型进行排序 格式:sort [选项] 参数 格式:cat file | sort 选项 1.2常用选项 选项说明 -f 忽略大 ...
- Azure Bicep 开发利器
Bicep 是一种用于声明式部署Azure资源的领域特定语言.它的目标是通过更清晰的语法.改进的类型安全性.以及对模块化和代码重用的更好支持,彻底简化编写体验. Bicep 其实是对 ARM 模板的透 ...
- Java通过SSLEngine与NIO实现HTTPS访问
Java使用NIO进行HTTPS协议访问的时候,离不开SSLContext和SSLEngine两个类.我们只需要在Connect操作.Connected操作.Read和Write操作中加入SSL相关的 ...
- 题解 Merchant
传送门 可以发现如果我们最终选择的物品集合已经确定,就很好求了 \(\sum k*t+\sum b \geqslant s\) ,二分即可 但现在我们无法确定该选哪些物品 因此我们只需要check一下 ...
- Groovy+Spock单元测试
一.导入依赖 Spock是基于JUnit的单测框架,提供一些更好的语法,结合Groovy语言,可以写出更为简洁的单测. <!-- groovy依赖 --> <dependency&g ...
- Windows安装Linux虚拟机（CentOS7）
一.在电脑上安装虚拟机,百度搜索vmware,下载后傻瓜式安装即可. 二.CentOS下载,阿里云镜像:http://mirrors.aliyun.com/centos/7/isos/x86_64/. ...