Vue复习笔记（一）
vue的基本语法
1.初始化模板
<div id="app">
{{message}}
</div>
<script>
const app=new Vue({
el:'#app'
data:{
message:'你好啊'
}
})
</script>
2.mustache语法中，不仅仅可以直接写变量，也可以写一些简单的表达式
<div id="app">
{{message+' '+message}} 鸣人
</div>
<script>
const app=new Vue({
el:'#app'
data:{
message:'你好啊'
}
})
</script>
3.一些指令（标签的属性位置）
- v-once对值只进行第一次赋值
- v-html 把{{message}}里面的内容当做html去解析
- v-text="message"将标签内的数据用message替换，（不灵活，很少用）
- v-pre 不解析标签内的语法，也就是说，显示的文本是{{message}}
- v-cloak 把这个给div以后。new Vue() vue解析之前div有一个属性v-cloak。vue解析以后这个属性就会消失。所以可以在style样式里面利用属性选择器写样式 [v-cloak]{display:none;}这样避免了，如果还没有解析，会出现{{message}}这种东西的尴尬
- 标签的属性里面不可以使用双括号的语法
4.重要的指令
- v-bind 有时候需要把一些数据动态绑定到标签的属性里面比方说src。哪个属性需要解析，就在哪个属性前加上v-bind: 。比如 v-bind: src="imageURL"这个时候就imageURL当做变量了（简写：就是属性前面加个冒号 :class="{类名1:true,类名2:false}" 这里的值可以放个对象，对象里面是键值对的形式，可以把值换成变量去控制bool，来返回相应的类名）
- v-on:click="btnClick"
点击按钮控制显示颜色
<h2 v-bind:class="‘active’:isActive,‘line’:isLine"></h2>
<button v-on:click="btnclick">按钮</button>
<script>
const app=new vue({
el:'#app',
data:{
isActive:true,
isLine:true
},
methods:{
btnclick:function(){
this.isActive=!this.isActive
}
}
})
</script>
绑定class有两种方式（一般很少直接绑定一个字符串）
-v-for="m in items" 这个写到 li 里面；v-for="(m,index) in items" 需要用到下标的时候。
-v-bind 绑定style。动态绑定样式。（做组件的时候，可以给组件添加初始化数据，样式）
:style="{css的属性名:属性值}" :style="{fontSize:fz+'px'}" 前面就是一个key，所以不用加单引号。 也可以 :style="[]" 这种就是对象数组，把对象放到数组里面
5.计算属性
--{{fangfa()}}
--除了el,data,methods,以外还有一个computed 计算
--computed是计算属性的 computed:{fullName:function(){ return this.firstName+' '+this.lastName }} 然后可以直接 {{fullName}}
--computed 多次调用，只会计算一次（会做缓存，观察里面的数据有没有发生变化，只要没有变化，就不会再执行）。methods调用几次算几次
--计算属性的set:和get:。每一个都包含。
computed:{
fullName:{
get:function(){
return this.firstName+" "+this.lastName;
}
},
//上面的就可以简化成
fullName:function(){
return this.firstName+" "+this.lastName;
}
}
6.块级作用域 let 和 var
--1、let有兼容性问题，手机端开发不建议用，有块级作用域
--2、var 在语言设计上有缺陷，修复就有可能出现很多浏览器不兼容。可以把let（有块级作用域）看成更完美的var（if,for,没有块级作用域，代码块里面定义的变量，外面也能访问）
--3、闭包解决了作用域的问题，函数是有作用域的。(js貌似只有函数和全局作用域)
--4、闭包(function(i){ })(i) 将一个一个变量传给了一个函数，并且执行这个函数他就会有属于它自己的作用域，不会影响外面
const 修饰符，修饰成常量，复制后不可以再修改。定义的时候就必须进行初始化。常量的含义是指向的对象不能修改，但可以修改对象内部属性的值。比如：const obj={name:'why'} ; obj.name='yes' 这个样子是可以的(其实就是里面的指针不能修改)
7.对象的增强写法
es6语法 属性的增强写法
const name=‘why’;
const age=18；
const height=1.88;
es5的写法
const obj={
name:name,
age:age,
height:height
}
es6写法
const obj={
name,
age,
height
}
函数的增强写法
es5
const obj={
run:function(){},
eat:function(){}
}
es6
const obj={
run(){},
eat(){}
}
浏览器不支持ES6可以用工具转一下
8.v-on 绑定事件监听器
缩写：@
预期：Function|Inline Statement|Object
参数：event
<button v-on:click="counter++"></button>
<button v-on:click="increment"></button>
<button @click="increment"></button>
<script>
const app=new Vue({
el:'#app',
data:{counter:0},
methods:{
increment(){
//方法体
this.counter++;
}
}
})
</script>
v-on的传参问题：
1、方法如果没有参数，后面的小括号可以不添加（此处仅仅是事件监听的时候可以省掉，但是在{{}} 的时候不可以省掉）
2、如果函数需要参数，但是没有传入参数（只是加上括号），那么函数的形参为undefined
3、调用函数的时候，省略小括号。 但是方法本身需要一个参数，这个时候Vue会默认将浏览器产生的event事件对象作为参数传到方法里。
4、写js方法，如果参数没有传入，调用的时候会报错
5、如果方法定义的时候，需要event对象，同时又需要其他参数。（第一个参数会是event，第二个是undefined）
6、 @click="increment(123,$event)" 手动获取浏览器参数的event对象 $event
event对象：代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
js中 标签点击事件方法传入this：指的就是当前标签对象
js中 括号中不传入this参数，那么this在这里代指的就是整个doucumeng对象
v-on 修饰符
1、.stop修饰符
div有一个点击事件，div里面的button有个点击事件。点击div的时候会出现事件冒泡。
所以用修饰符
<div @click=“divClick”>
<button @click.stop="btnClick"></button>
</div>
2、.prevent修饰符
阻止button的submit提交事件
3、 .监听某个按钮的点击{keyCode|keyAlias}
<input @keyup.enter="keyup" /> //监听回车
4、 .native 监听组件元素的原生事件
5、 .once 只触发一次回调
浙公网安备 33010602011771号