珠峰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 ...
随机推荐
- RHCE_DAY03
shell函数 在shell环境中,将一些需要重复使用的操作,定义为公共的语句块,即可称为函数(给一堆命令取一个别名) 函数可以使脚本中的代码更加简洁,增强易读性,提高脚本的执行效率 #函数定义格式1 ...
- python+pycharm+selenium+谷歌浏览器驱动 自动化环境部署（一）
准备工作: 第一步:安装python.打开网址https://www.python.org/downloads/windows/ 现在最新版本3.7,本人使用的是3.6. 第二步:安装pych ...
- xubuntu共享打印机
by 无若 1.查看系统中的打印机lpstat -ssystem default destination: HP-Color-LaserJet-CP1215device for HP-Color-La ...
- Spring源码阅读-BeanFactory体系结构分析
BeanFactory是Spring中非常重要的一个类,搞懂了它,你就知道了bean的初始化和摧毁过程,对于深入理解IOC有很大的帮助. BeanFactory体系结构 首先看一下使用IDEA生成的继 ...
- MySQL：JDBC批量插入数据的效率
平时使用mysql插入.查询数据都没有注意过效率,今天在for循环中使用JDBC插入1000条数据居然等待了一会儿 就来探索一下JDBC的批量插入语句对效率的提高 首先进行建表 create tabl ...
- const变量通过指针修改问题
const的变量在特定情况下可以通过指针修改,但是在另一些情况下是不能通过指针修改. 以下是VC6下才测试. 1. 不能修改的情况 #include int const a = 10; void ma ...
- Map的putAll方法验证
下面的程序验证了Map的putAll方法的行为特性,代码如下: import java.util.HashMap; public class Map_putAllTest { public stati ...
- 【加解密】使用CFSSL生成证书并使用gRPC验证证书
写在前面的话 CFSSL是CloudFlare旗下的PKI/TLS工具.可以用于数字签名,签名验证和TLS证书捆绑的命令行工具和HTTP API服务器. 是使用golang语言开发的证书工具. 官方地 ...
- NOIP 模拟 $28\; \rm 遗忘之祭仪$
题解 \(by\;zj\varphi\) 直接贪心模拟即可,对于每个点,如果它未被覆盖,直接在这覆盖一次. 每个黑点只会被扫一次,所以总复杂度为 \(\mathcal O\rm (nm)\) Code ...
- [ES6深度解析]15：模块 Module
JavaScript项目已经发展到令人瞠目结舌的规模,社区已经开发了用于大规模工作的工具.你需要的最基本的东西之一是一个模块系统,这是一种将你的工作分散到多个文件和目录的方法--但仍然要确保你的所有代 ...