Vue入门笔记
在html文件里面引入 vue。js，vue-resource。js，插件
把该逻辑写在 car。js 再引入该界面需要的逻辑的js-------------------------最简单的vue实例
$mount()手动挂载
当Vue实例没有el属性时，则该实例尚没有挂载到某个dom中；
假如需要延迟挂载，可以在之后手动调用vm.$mount()方法来挂载。
<div id="app">
{{name}}
</div>
<button onclick="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）的两个选项
卡片选好后 选择配送方式 默认为“标准配送”
以上是 Vue入门笔记 的全部内容， 来源链接： utcz.com/z/378167.html
