Vue入门笔记

在html文件里面引入 vue。js，vue-resource。js，插件

把该逻辑写在 car。js 再引入该界面需要的逻辑的js-------------------------最简单的vue实例

$mount()手动挂载  

当Vue实例没有el属性时，则该实例尚没有挂载到某个dom中； 

假如需要延迟挂载，可以在之后手动调用vm.$mount()方法来挂载。 

<div id="app">

{{name}}

</div>

<button οnclick="test()">挂载</button>

<script>

var obj= {name: '张三'}

var vm = new Vue({

data: obj、、

})

function test() {

vm.$mount("#app");

}

beforecreated ：el 和 data 并未初始化 

created :完成了 data 数据的初始化，el没有

beforeMount ：完成了 el 和 data 初始化 

mounted  ：完成挂载

beforecreate  : 举个栗子：可以在这加个loading事件 

created  ：在这结束loading，还做一些初始化，实现函数自执行 放请求那数据，dom还没渲染，等数据请求过来一起渲染

mounted  ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情

beforeDestory ： 你确认删除XX吗？ destoryed ：当前组件已被删除，清空相关内容

数据要写在 return 里面而不是像文档那样子写

ps：es6与es5的语法

es5：

export.default={

data:function(){

return:{

greeting:"hello"

}

}

}

es6:

export default{

data(){

return {

greeting:"hello"

}

}

}

箭头方式函数：

（）=》{函数体} 0个参数用（）

x=》{函数体} 1个参数可以省略（）

（x，y）=》{函数体} 多个参数不能省略（）

v-model:主要在表单里面实现，文本框，下拉框，多选框，复选框，textarea 双向的功能 文本框输入以后模型也会改变，反之，模型改变， 文本框里面的内容也会改变

v-text：文本的渲染。

v-show:dom存在(跟display：none 一样)元素存在

v-if：也是判断dom是否显示，如果满足条件 显示，否则不显示（但是 不满足条件 dom都没有生成）

v-bind：给dom添加属性，如果动态添加图片的src地址，就要绑定src的属性，给src赋值

v-for：循环，渲染数组

v-on：事件绑定

vue创建出来里面的函数：

new Vue{

data：{//data里面的都是模型

message:"hello vue"

}，

filter：{

},

mounted:function(){

},

methods:{

},

}

过滤器 filter：对后台传过来的数据进行业务转换

组件component 实现代码的复用。

@click 给元素绑定事件 所有的事件绑定都写在 methods里面

monuted方法：相当于 document.ready方法，在实例创建完成，dom渲染完成之后需要查询一个接口，ajax写在这里面。为了确保vue实例已经插入文档，需要在写上 Vue.nextTick 这样 this就===vm

比如说一上来就要把 已经渲染的“hello vue”改成vue hello 就要在mounted里面写上方法

var vm=new Vue{

data：{

el:".continer"//控制在哪个范围内

message:"hello vue"

}，

filter：{

},

mounted:function(){

this.changeMsg()

},

mounted:function(){

Vue.$nextTick(function(){

vm.changeMsg()

})

},

methods:{

changeMsg:functin(){

this.message="vue hello"

}

},

}

使用 v-for 渲染购物车界面 使用到vue-resource访问接口 .then 返回数据 res.body这个是插件封装的

this.$http.get(“datamessage.json”,{"id":"123"}）.then(function(res){}）

this.$http.jsonp(“datamessage.json”,{"id":"123"}）.then(function(res){}）//jsonp跨域

在vue实例里面 所有的this都指向vue实例

data：{//data里面的数据 是要放在 html页面里面的 跟小程序 一样

list:{}，

money：0

}，

mounted:function(){

this.changeMsg()

},

methods:{

changeMsg:functin(){

var _this=this;//为了在xhr内部使用 但是使用es6箭头函数的话 这一步就不用了，因为箭头函数会把this只想最外层

this.$http.get(“datamessage.json”,{"id":"123"}）.then(function(res){

_this.list=res.body.result.list//不能直接使用this，因为作用域已经发生改变 list{}里面有值了 就可以v-for渲染到界面了

_this.money=res.body.result.money

})//this代表 vue-resource这个插件已经集成到vue里面了 所以要在 vm这个vue实例里面使用$http这个方法

}

},

<li v-for="item in list"> 如果想要使用索引 <li v-for="（item，index ）in list">

<span>{{item.listname+“===”+index}}</span>//每一项list的name

<div v-for="products in item.products" v-text="{{products.partsname}}">//每一项list里面有好多商品的名称 也需要遍历 可以使用v-text 当然也是可以使用 下面{{}}的写法

{{products.partsname}}

</div>

<img src={{item.image}} v-bind：_src={{item.image}} />//不能遍历上去 渲染不出来 必须使用 v-bind 绑定个属性

+ input

- input

个数<input type="text" disabled value="0" v-model="item.number"/ >//v-model双向数据绑定 才可以实时的监控数量

单价 <div>{{item.danjia}}</div>

总金额<div>{{item.danjia*item.number}}</div>

</li>

使用v-on绑定事件 实现动态金额的计算

过滤器的使用

对金额进行￥+两位小数的转换（格式化）额外补充：一般来说小数点都应该有后台传过来的，因为如果前端做js转换的话会有数据的丢失，比如13.278 使用toFixed(2)会转化成13.28 进行四舍五入。

全局过滤器：所有vue的实例，所有的页面都可以使用

局部过滤器：当前实例化的vue可以使用

js里面 添加

filters：{//局部过滤器

filterMoney:function(value){//需要传入一个值

return “￥”+value.toFixed(2)+type//传入的值 return出来

}

}

//全局过滤器 第一个参数是过滤器的名称，第二参数是回调("值"，“添加的参数”)也可以只有一个值（”值“）

Vue.filter("filterMoney"，function（value，type）{

return “￥”+value.toFixed(2)+//传入的值 return出来

})

总金额<div>{{item.danjia*item.number | filterMoney（"元"）}}</div>

html里面 必须使用 |

单价 <div>{{item.danjia | filterMoney}}</div>

总金额<div>{{item.danjia*item.number | filterMoney}}</div>

通过+ 使得商品的个数增加 从而使得商品的单价 变成相应的 倍数 总金额做相应的变化

html：

- input <input type="text" value="+" v-on:changeMoney（item,-1）>//item传入商品信息，-1或者1传入点击的是+还是-

<input type="text" disabled value="0" v-model="item.number"/ >//只要这里的值发生改变，总金额也会改变，因为是*运算

+ input <input type="text" value="+" @click:changeMoney（item,1）>

methods:{

changeMoney:function(product，way){

if(way>0){

product.number++//双向数据绑定 v-model里面的值

}else{

product.number--；

if(product.number<1){

product.number=1;//数量小于1的时候 不能再减了

}

}

}

}

实现 单选，全选，取消全选的操作

首先 给class添加新的class名称 不能直接在原来的类名后面加上{{}} 要跟src一样 只要涉及到属性，就使用 v-bind 并不会覆盖之前的class名称 绑定class比较特殊，一定是一个object对象 {}，或者【】

<div class="class1" v-bind="{‘checked’:'item.checked'}">

<svg></svg>//利用svg实现选择按钮

//如果item。checked==true的

话就添加上checked类，否则不添加。这个案例中 拿到的后台的json字符串里面并没有 checked这个属性 所以可以通过点击方法判断状态往json字符串里面添加checked的参数

@click=selectedProduct(item)>

</div>

methods：{

selectedProduct:function(item){

if(typeOf item.checked=='undefined')//判断checked参数是否存在

Vue.set(item,"checked",true)//如果不存在，可以使用Vue全局设置“checked”参数

this.$set(item,"checked",true)//这是局部设置 使用$

}else{//如果checked参数==true 那就取反 checked==false；

item.checked==!item.checked

}

}

实现全选

全选 不在循环里面

<div class="class2" v-bind="{‘checked’:'checkedAllFlag'}" @click=checkedAll()>//如果没有参数加不加（）都可以

<svg></svg>//利用svg实现选择按钮

<span>全选</span>

</div>

可以在data：{

list:{}，

checkedAllFlag：false，//因为不在循环中 在循环中拿不到item 所不能在data里面声明

}

methods:{

checkedAll:function(){

this.checkedAllFlag=!this.checkedAllFlag//点击一次就进行取反了

var _this=this

this.list.forEach(item,index){//遍历商品列表

if(typeOf item.checked=='undefined'){//如果一上来就选择全选，单项选中还没有往json字符串里面 添加checked参数，所以还是要判断，json字符串里面是否有checked参数

_this.$set(item,"checked",_this.checkedAllFlag)//true

}else{

item.checked==!_this.checkedAllFlag//false

}

}

}

}

取消全选：

//<div class="class2" @click='this.checkedAllFlag=false'>//可以直接写表达式， 一元表达式或者三元表达式 不可以写逻辑和声明变量

取消全选

</div>

单项选择的选中标识也要去掉

//<div class="class2" @click='checkedAll（false）'>//要在函数里面加上参数 告诉是全选 还是取消全选

取消全选

</div>

<div class="class2" v-bind="{‘checked’:'checkedAllFlag'}" @click=checkedAll(true)>//如果没有参数加不加（）都可以

<svg></svg>//利用svg实现选择按钮

<span>全选</span>

</div>

具体实现自己写逻辑

methods：{

checkedAll:function(flag){

this.checkedAllFlag=flag//全选的时候 是true 取消全选的是 false

var _this=this

this.list.forEach(item,index){//遍历商品列表

if(typeOf item.checked=='undefined'){//如果一上来就选择全选，单项选中还没有往json字符串里面 添加checked参数，所以还是要判断，json字符串里面是否有checked参数

_this.$set(item,"checked",_this.checkedAllFlag)//true

}else{

item.checked==_this.checkedAllFlag//false

}

}

}

}

商品总金额发生改变

data：{

titloPrice:0

}

methods:{

selectedProduct:function(item){

if(typeOf item.checked=='undefined')//判断checked参数是否存在

Vue.set(item,"checked",true)//如果不存在，可以使用Vue全局设置“checked”参数

this.$set(item,"checked",true)//这是局部设置 使用$

}else{//如果checked参数==true 那就取反 checked==false；

item.checked==!item.checked

}

this.titloPriceAll()//单选的时候调用计算总金额的方法 全选的时候也要调用 这里就不写了

}

titloPriceAll:function(){

var _this=this;

this.titloPrice=0

this.list.forEach(item,index){

if(item.checked){

_this.titloPrice+=item.danjia*item.number

}

}

}

}

删除

点击删除的icon会有个弹框和遮罩 yes、no 根据class雷名来判断 v-bind:class="{itemShow:showflag}" @click=‘delConfirm(item)’

在data里面

showflag=false；

currentProduct=[];//存储当前的item的

delConfirm：function（item）{//传入item告诉是删除哪一项

this.showflag=true;

this.currentProduct=item;

}

遮罩根据 v-if=“showflag==true”来判断

在“yes”的按钮里面生明函数 delProdect（）

delProdect:function(){

var index=this.list.indexOf(this.currentProduct)//在items循环列表里面找到当前item的当前索引

this.list.splice(index,1)//从items里面删除掉当前item 这样就不会在页面上渲染出来了，

splice代表 从当前所以开始删除1个

其实这个删除 应改掉后台接口的,把item的id 传给后台让他们删除 ，删除成功返回一个字段，告诉我们已经删除成功，再进行渲染

this.$http.get()

this.showflag=false;

}

点击no和×会消失，@click=“showflag=false”点击yes会执行相应的操作，

地址栏的选配，默认显示三条收件人地址的卡片 点击“更多” 渲染出来全部的收货人地址信息的卡片。

1，渲染全部的收货人信息 卡片全部显示出来

2，只显示三条数据 点击“more”查看全部数据

使用过滤函数

、、

computed：{//实时计算函数 可以直接在html文件里面写，相当于 data里面的对象，可以直接在html里面写，object型，这样才可以 return

}

截取0-3条数据 computed里面 的filterAddress会返回一个全新的数组。

点击“更多”改变 limitNum的值 为数组的长度

可以直接在click里面写 一元表达式 但是不要出现this(在指令里面一律不能使用this) 所以上面会没效果 改为 limitNum=addressList.length

点击哪一个卡片哪一个卡片有被选中的效果

实现如下 ： 在data里面定义一个currentIndex：0，代表选中的索引，判断选中的索引跟数组的索引是否一致，如果一致那就添加 被选中状态的类名

设置默认和默认地址 这是互斥（使用v-if）的两个选项

卡片选好后 选择配送方式 默认为“标准配送”