Vue入门
[安装]
1)通过bower :npm install bower -g
mac:sudo npm install bower -g
[查看VUE版本:bower info vue]
[安装1.0:vue:bower install vue@1.0.28]
[安装最新版:vue:bower install vue]
2)通过npm :npm install vue
[数据绑定]
1)通过构造函数的方式得到一个Vue实例
var vm=new Vue()
2)el:规定当前这个vue实例的管辖范围[el:"#box"]
var vm=new Vue({
el:"#box"
})
管辖范围是id为box的元素及里面所有的内容
3)data{对象}要绑定的数据
var vm=new Vue({
el:"#box",
data:{
message1:"内容1"
message2:"内容二"
fn:function(){
console.log(this);
}
}
})
在html结构中如下↓
<body>
<div id="box">
{{message1}},
{{message2}},
{{fn}},
</div>
</body>
最终会在div中呈现绑定"内容1"和"内容2"的文本信息
如果想绑定结构标签那就在结构标签内加上vue的内置属性v-html就可以了
<div v-html="htmlStr"></div>
<script>
var vm=new({
data:{
htmlStr:
"<span>
内容3
</span>"
}
})
</script>
这样就会在结构中绑定了一个span标签,内容为"内容3"
在script中调用的话直接实例.属性名就可以了
调用
console.log(vm.message1)
或者修改
vm.message1="哈哈哈"
[双向数据绑定]
一般多用于input输入框
只需要给input加上v-model指令即可
<div id="box">
<input type="text" v-model="message">
<p>{{message}}</p>
</div>
<script>
var v1=new Vue({
el:"#box",
data:{
message:"hello word"
}
});
</script>
这样在页面的input框中有任何改动就会在p标签中同步显示
[原理类似oninput事件在p标签innerHTML输出input框的value]
[Vue表达式]
<script>
new Vue({
el:"#app",
data:{
list0:'',
list1:"1",
list2:"2"
}
})
</script>
只出现最后一个↓list2
<div id="app">
<p>{{list1,list2}}</p>
</div>
支持运算↓
list1:"1" , list2:"2"页面输出3
<p>{{list1*list2}}</p>
支持三元运算符↓
如果list0成立就输出list1的内容否则输出list2的内容
<p>{{list0?list1:list2}}</p>
不支持if(){}
<p>不可以写if(){}</p>
会报错
[Vue指令v-for]
var v1=new Vue({
el:"#app",
data:{
list:["a","b","c","d","a"],
listObj:{
name:"AA",
age:12,
n:1
}
}
})
v-for指令类似原生的forEach方法都有item和index参数
[循环谁就给谁加一个v-for指令]
如果有重复的项,就会报错,解决方法: track-by="$index" 会强行按照索引循环无视重复项
<li v-for="(item,index) in list" track-by="$index">
{{item}}:当前这一项
{{index}}:索引
</li>
<span v-for="val in listObj">
{{val}}:属性值
</span>
[嵌套循环]
比如循环数组中的每一个对象里的每一个属性↓
var v1=new Vue({
data:{
list:[{name:"A",age:12},{name:"B",age:22},{name:"C",age:32}]
}
})
//v1.$mount() 手动绑定视图 给他加上管辖范围
v1.$mount("#app");
==============================
<div id="app">
<ul>
li循环的是list
<li v-for="item in list">
span循环的是list中的每一项item
<span v-for="(val,key) in item">
{{key}}:{{val}}
</span>
</li>
</ul>
</div>
[事件]
绑定事件指令 v-on:事件 也可以简写成@事件
v-on:click --> @click
在绑定的方法中也有事件对象event->[$event]
好比:html标签上事件onclick="fn(event)"
vue绑定的事件也可以阻止事件的默认行为
@click.prevent:阻止默认行为
<a href="https://www.baidu.com/" @click.prevent="fn">baidu</a>
[其中添加的事件里面也会产生冒泡如何组织冒泡↓]
①给上一级的事件加一个修饰符self @click.self 这样就表示点那个就触发那个绑定的函数
②给当前元素的事件加一个修饰符stop @click.stop
[键盘事件]
给元素增加键盘事件@keyup
可以直接添加具体的某个键值或键位来触发函数
键位:enter,tab,esc,up,down,right,left,delete,space
例如给Enter键绑定函数→[@keyup.enter="fn"]
也可以写键值→[@keyup.13="fn"]
[例子↓]
<body id="app">
<input type="text" @keyup.enter="fn1">
<input type="text" @keyup.13="fn2">
</body>
<script>
var v1=new Vue({
el:"#app",
data:{},
methods:{
fn1(e){console.log(e)},
fn2(e){console.log(e)}
}
})
</script>
[this]
Vue函数中this就是当前实例也就是el:里面限定的视图范围
[filter]
filter 遍历数组,参数是个函数,有几项数组这个函数就执行几次,每一次执行都会默认传三个参数(item,index,input),每一次函数如果返回true保留当前项,如果返回false就就删除当前项filter不会改变原数组
new Vue({
el:"#list",
data:{
name:'',
price:"",
shopList:[{name:"衬衣",price:"299"},{name:"连衣裙",price:"499"},{name:"短裤",price:"199"},{name:"袜子",price:"9"},{name:"玩具",price:"99"}]
},
methods:{
remove(val){
console.log(this);
this.shopList=this.shopList.filter(item=>item!==val)},
removeAll(){
this.shopList=[]}
}
})
[v-show&v-if]
true显示,false隐藏
v-show="false" 隐藏display="none"会引起重绘
v-if="false" 移除标签 [会引起回流!!!]
<div id="app">
<div v-show="isShow">1234567890</div>
<div v-if="flag">000000000</div>
</div>
<script>
new Vue({
el:"#app",
data:{
isShow:[],
flag:false
}
})
</script>
[动态添加class]
指令为v-bind:class="class1"
指令也可简写成:class="class1"
[Vue动态添加类名的方式有很多↓]
<script>
new Vue({
el:"#app",
data:{
class1:"box1",
class2:"box2",
flag1:true,
flag2:false
}
})
</script>
-----------------------------
<div id="app">
VUE2.0中废除了class="{{class1}}"这种以绑定变量作为class的方法也包括下面这一种↓
<div class="{{class1}}">{{class1}}</div>
--------------------
第一种:直接指令绑定变量
<div v-bind:class="class1"></div>
第二种:混合拼接→"a box2"
<div class="a" :class="class2"></div>
第三种:如果变量不成立就不添加绑定
<div :class="{box1:flag2}"></div>
第四种:和第三种类似只是将两个类名组合拼接在一起
<div :class="{box1:flag1,box2:!flag2}"></div>
第五种:变量混合拼接绑定
<div :class="[class1,class2]"></div>
第六种:变量和类名判断的混合绑定
<div :class="[class1,{box2:flag2}]"></div>
第七种:三元运算符绑定
<div :class="[flag1?class1:class2]"></div>
</div>
[动态添加style]
与动态添加类名方法非常相似似
指令为v-bind:style=""同样也可简写为:style=""
[注!在这里添加的都是行内样式]
<div id="app">
第一种方法:直接写样式
<div :style="{color:'blue',fontSize:'30px'}">div1</div>
第二种方法:绑定单个变量
<div :style="style1">style1</div>
第三种方法:绑定多个变量组合
<div :style="[style1,style2]">[style1,style2]</div>
</div>
------------------
<script>
new Vue({
el:"#app",
data:{
注意!变量内必须是对象形式的键值对
style1:{color:"red"},
style2:{background:"yellow"}
}
})
</script>
