珠峰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 ...
随机推荐
- 阿里钉钉Android实习面试也太太太太难了吧，对算法的要求堪比字节
本人研究生在读,在2月26日找了师兄内推阿里钉钉团队,28号接到了约1面的电话.幸好我提前准备了一个多月的样子,刷面试题.刷LeetCode(面了之后才觉得自己刷少了),对于我这样一个实习生来说题目还 ...
- RadioButton 自定义样式(带动画)
<Style x:Key="Radbtn" TargetType="{x:Type RadioButton}"> <Setter Proper ...
- MySQL-18-MHA+Atlas读写分离架构
Atlas介绍 Atlas是由Qihoo 360 Web平台部基础架构团队开发维护的一个基于MySQL协议的数据中间层项目 它是在mysql-proxy 0.8.2版本的基础上,对其进行了优化,增加了 ...
- pikachu Unsafe Filedownload 不安全的文件下载
不安全的文件下载概述文件下载功能在很多web系统上都会出现,一般我们当点击下载链接,便会向后台发送一个下载请求,一般这个请求会包含一个需要下载的文件名称,后台在收到请求后 会开始执行下载代码,将该文件 ...
- MATLAB—二维函数可视化
本文主要总结一下MATLAB的一些常用二维绘图指令. 文章目录 一.plot绘图指令 1.离散数据点形设置值 2.连续线型设置值 3.颜色设置值 4.常用属性和属性值 5.例题 二.subplot绘图 ...
- yum clean all大坑解决
在Centos7系统中执行yum clean all 之后,发现yum的其他执行都报错了: 要解决,关键在这里: 把/var/cache/yum/ 下面的文件删除了 接下来,如果执行yum repol ...
- Asp.NetCore 中Aop的应用
前言 其实好多项目中,做一些数据拦截.数据缓存都有Aop的概念,只是实现方式不一样:之前大家可能都会利用过滤器来实现Aop的功能,如果是Asp.NetCore的话,也可能会使用中间件: 而这种实现方式 ...
- jquery 操作checkbox是否选中的正确方法
对于checkbox,若要选中,需要用jquery的prop()方法,不要用attr(). <input type="checkbox" id="slide_che ...
- springboot项目中进行XSS过滤
简单介绍 XSS : 跨站脚本攻击(Cross Site Scripting),为不和层叠样式表(Cascading Style Sheets, CSS)的缩写混淆,故将跨站脚本攻击缩写为XSS.恶意 ...
- redis并发锁
1.应对并发场景 避免操作数据不一致 将对redis加锁 2.考虑到异常状况无法释放锁,导致死锁 将代码块进行try-catch处理 3.考虑try时宕机依然导致死锁 对锁添加时效性,添加过期时间 4 ...