vue基础笔记
vue
vue基础
-
javascript 框架
-
简化Dom操作
-
响应式数据驱动
第一个vue程序：
导入开发版本的vue.js
创建Vue实例对象，设置el属性和data属性
使用简洁的模板语法把数据渲染到页面上
el：挂载点
{{message}}
var app=new Vue({
el:'#app'，
data:{
message:'挂载的信息将被渲染在页面上'
}
})
Vue实例的作用范围是什么
Vue会管理el选项命中的元素及其内部的后代元素
是否可以使用其他的选择器
可以使用其他的选择器，但是建议使用id选择器
是否可以设置其他的dom元素呢
可以使用其他的双标签 不能使用html和body
-
el是用来设置Vue实例挂载（管理）的元素
-
Vue会管理el选项命中的元素以及内部的后代元素
-
可以使用其他的选择器，但是建议使用id选择器
-
可以使用其他的双标签 不能使用html和body
data：数据对象
-
vue中遇到的数据定义在data中
-
data中可以写复杂类型数据
-
数组 {{itemname[0]}}
-
-
渲染复杂类型数据时，遵循js的语法即可
本地应用
Vue指令
-
内容绑定，事件绑定
(购物车的物品数量加减)
-
v-text
设置标签的文本值（textContent）
var app=new Vue({
el:"#app",
data:{
message:"将成为h2的信息"
}
})默认的写法会替换全部内容 使用插值表达式{{}}可以替换指定内容
内部支持表达式
-
v-html
设置标签的v-html
var app=new Vue({
el:"#app",
data:{
//content:'在p标签的内容'
content:"p标签内的a标签"
}
})v-html指令的作用是：设置元素的innerHTML
内容中有html结构会被解析为标签
v-text指令无论内容是什么，只会解析为标签
解析文本使用v-text 需要解析html解构使用v-html
-
v-on基础
为元素绑定事件
v-on缩写@
">
{{food}}
?
var app=new Vue({
el:'#app',
data:{
food:"西藍花炒蛋"
}
methods:{
dolt:function(){
//逻辑
alert('做IT')
},
changeFood:function(){
console.log(this.food)
}
}
})事件名不需要些on
指令可以简写为@
绑定的方法定义在methods属性中
方法内部通过this关键字可以访问定义在data中的数据
计数器
逻辑：点击按钮的时候执行 -----操作数字----->给按钮绑定点击事件
加与减：逻辑与方法定义在methods里面
数据显示在span内部
数据定义在data中
?
{{num}}
var app=new Vue({
el:"#app",
data:{
num:1
},
methods:{
add:function(){
//console.log('aaa')
if(this.num<10){
this.num++;
}else{
alert('别点了最大了')
}
},
sub:function(){
if(this.num>0){
this.num--;
}
}
}
})-
data中定义数据：比如num
-
methods中添加两个方法：比如add(递增)，sub（递减）
-
使用v-text将num设置给span标签
-
使用v-on将add,sub分别绑定给+，-
-
累加的逻辑：小于10累加，否则会提示、
-
递减的逻辑：大于0递减，否则就提示
-
显示切换，属性绑定
（swiper）
-
v-show
根据表达式的真假，切换元素的显示隐藏
（广告，遮罩层）
?
var app=new Vue({
el:"#app",
data:{
isShow:flase,
age:16
},
methods:{
changeIsShow=!this.isShow;
}
})原理是修改元素的display，实现显示隐藏
指令后面的内容，最终都会解析为布尔值
值为true元素显示，值为false元素隐藏
数据改变之后，对应元素的显示状态会同步更新
-
v-if
根据表达式的真假，切换元素的显示和隐藏（操作dom元素）
我是一个p标签
我被隐藏的那个p标签
我是一个p标签
?
var app=new VUe({
el:'#app',
data:{
isShow:false
},
methods:{
toggleIsShow:function(){
this.isShow=!this.isShow;''
}
}
})本质是通过操纵dom元素来切换显示状态
表达式的值为true，元素存在于dom树中，为false，从dom树中移除
频繁的切换使用v-show
反之使用v-if前者的切换消耗小
v-bind
设置元素的属性（src、title、class...)
语法：
v-bind：属性名=表达式
?
var app=new Vue({
el:'#app',
data:{
imgSrc:'图片地址'，
imgTitle:'图片信息'，
isActive:false
}
}).active{
border:1px solid red;
}
?
var app=new Vue({
el:'#app',
data:{
imgSrc:'图片地址'，
imgTitle:'图片信息'，
isActive:false
},
methods:{
toggleActive:function(){
}
}
})完整写法是：v-bind：属性名
简写：属性名
需要动态的增删class建议使用对象的方式
图片切换 轮播图
?
var app=new Vue({
el:"#app",
data:{
imgArr:[],
index:0
},
methods:{
prev:function(){
}
next:function(){
}
}
?
?
?
?
})
?
var app=new Vue({
el:"#app",
data:{
imgArr:[
"xx/00.png",
"xx/01.png",
"xx/02.png"
],
index:0
},
methods:{
prev:function(){
this.index--;
}
next:function(){
this.index++;
}
}
?
?
?
?
})定义图片数组
添加索引
v-bind 绑定src属性
v-on 图片切换逻辑
v-show条件
列表数据使用数组保存
v-bind指令可以设置元素属性 src
v-show v-if都可以切换元素的显示状态 频繁切换使用v-show
列表循环，表单元素绑定
（记事本）
-
v-for
v-for 指令的作用是：根据数据生成列表结构
{{index}}{{item}}
?
var app=new Vue({
el:'#app',
data:{
arr:[1,2,3,4,5,6],
objArr:[
{name:'jack'},
{name:'rose'}
]
}
})
?
{{index+1}}:{{item}}
{{item.name}}
?
var app=new Vue({
el:'#app',
data:{
arr:["北京","上海","广州"],
foods:[
{name:"番茄炒蛋"},
{name:"青椒土豆丝"}
]
},
methods:{
add:function(){
this.foods.push({name:"红烧肉"})
},
remove:function(){
this.foods.shift()
}
}
})数组经常和v-for结合使用
语法是：（item，index）in 数据
item和index可以结合其他指令一起使用
数组长度的更新会同步到页面上，是响应式的
-
v-on补充
传递自定义参数，事件修饰符
?
var app=new Vue({
el:"#app",
methods:{
doIt:function(p1,p2){},
sayHi:function(){}
}
})
?
var app=new Vue({
el:"#app",
methods:{
doIt:function(p1,p2){
console.log(p1);
console.log(p2)
},
sayHi:function(){}
}
})
?
var app=new Vue({
el:"#app",
methods:{
doIt:function(p1,p2){
console.log(p1);
console.log(p2)
},
sayHi:function(){
alert("吃了没")
}
}
})事件绑定的方法写成函数调用的形式，可以传入自定义参数
定义方法时需要定义形参来接收传入的实参
事件的后面跟上 .修饰符可以对事件进行限制
.enter可以限制触发事件的按键为回车
事件修饰符有多种
-
v-model
获取和设置表单元素的值（双向数据绑定）
{{message}}
var app=new Vue({
el:'#app',
data:{
message:'与表单中model里面绑定的数据保持一致'
}
})获取input里面的值
{{message}}
var app=new Vue({
el:'#app',
data:{
message:'与表单中model里面绑定的数据保持一致'
},
methods:{
getMsg:function(){
alert(this.message)
},
setMsg:function(){
this.message="更改后的值，检查是否会改变value里面的值"
}
}
})便捷的设置和获取表单元素的值
绑定的数据会和表单元素值相关联
绑定的数据 <--->表单元素的值
记事本
新增
-
生成列表结构
-
v-for 数组
-
-
获取用户输入
-
v-model
-
-
回车，新增数据
-
v-on enter 添加数据 事件修饰符
-
-
-
-
-