目录
vue
创建vue实例的时候,传入一个对象options
el:string/htmlelement 作用:决定之后vue实例会管理哪个DOM
data:object/function 作用:vue实例对应的数据对象(组件里面必须是函数)
methods:{[key:string]:function} 作用:定义一些属于vue的方法,可以在其他地方调用,也可以在指令中使用
vue基本操作
插值操作(就是把data里面的文本数据插入到html中)
静态插入
-
Mustache语法(双括号语法)
不仅仅可以直接写变量,也可以写简单的表达式仅仅作用于元素内容(content) -
v-once指令,表示元素和组件只会渲染一次,不会响应式改变,后边不用跟其他指令
-
v-html指令,就是会将HTML代码进行格式解析,并且显示对应内容
<h2 v-html="url"></h2>//html部分
url: "<a href='http://www.baidu.com'>百度一下</a>"// data部分
-
v-text指令,作用和mustache语法差不多,但是没有mustache灵活,具体使用方法和v-html差不多(不建议使用)
-
v-pre指令,跳过这个元素和子元素的编译过程,直接显示原本的mustache语法
-
v-cloak指令,为了避免浏览器渲染的时候直接显示没有编译过的mustache语法,加上这个属性,可以在样式中直接选中拥有这个属性的元素,设置他们的display:none,然后在vue渲染了之后,v-cloak属性会直接被删掉
[v-cloak] {
display: none;
}
动态插入(v-bind)
v-bind,可以动态绑定属性,具体使用方法如下所示
<img v-bind:src="imgurl" alt="">//html部分
<img :src="imgurl" alt="">//语法糖 就是用:来代替v-bind:
imgurl:"https://cn.vuejs.org/images/logo.svg"//data部分
v-bind 动态绑定class
- 对象语法
<h2 v-bind:class="{active:isActive, line:isLine}">哈哈哈</h2>
class里面用v-bind指令的时候,可以放一个对象,对象内容是键值对,属性名后面跟布尔值,来判断这个属性生不生效,放对象目前只有在v-bind的时候才会使用
下面是个小案例,点击一次让字变红,点两次让字变绿,没点的时候字是黑色的
<div id="app">
<h2 v-bind:class="{active:isActive, line:isLine}">哈哈哈</h2>
<button v-on:click="btnClick">按钮</button>
</div>
<script src="vue.js"></script>
<script>
let count = 0;
const app = new Vue({
el: "#app",
data: {
isActive: false,
isLine: false
},
methods: {
btnClick: function () {
count ++;
if (count%2!=0) {
this.isLine = false;
this.isActive = true;
}else{
this.isActive = false;
this.isLine = true;
}
}
}
})
</script>
css部分
.active{
color: brown;
}
.line{
color: cadetblue;
}
在使用v-bind的时候的class可以和普通class合并(vue内部语法) 和普通的类不起冲突
<h2 v-bind:class="{active:isActive, line:isLine}" class="li">哈哈哈</h2>
如果class里面的属性过于复杂,可以放在methods或者computed里面
<h2 v-bind:class="getClasses()" class="li">哈哈哈</h2>
getClasses:function () {
return {active:this.isActive, line:this.isLine}
}
- 数组语法
<h2 :class="['active', 'line']" class="li">哈哈哈</h2>
<!-- 上述就是数组语法,和对象语法一样可以和普通的类合并,如果传入形式和上面一样的话,其实和普通的类没有区别,因为都是不可更改的 -->
<h2 :class="[active, line]" class="li">哈哈哈</h2>
<!-- 这样就可以动态更改类,数组方法并不常用,这样的active和line其实就是变量名,在data里面取出变量 -->
如果属性太复杂,也可以和对象语法一样,在methods里面封装函数来返回数组,记得在变量名前面加上this.
v-bind 动态绑定style
这个和上一个一样,同样有对象法和数组法
- 对象语法
<h2 :style="{key(属性名): value(属性值)}">{{message}}</h2>
属性值如果不加单引号,就会被默认是变量名,所以想直接改变的时候,记得给属性值加上单引号
- 数组语法
就是数组类型,里面参数放置变量名,具体的变量值是由data里面的数据决定的
计算属性
在使用mustache语法的时候,如果拼接的过于长的时候,就会显得特别累赘,此时可以用methods里面,添加一个方法来解决问题
当然也有一个计算属性,computed来计算相应的属性格式,在使用 mustache语法的时候,使用函数调用使用的时候其实并不是以函数的形式使用,而是以属性来直接使用
<h2>{{full}}</h2>//html部分
computed:{//js部分
full: function () {
return this.active + " " +this.line
}
}
计算属性一般只有get属性,没有set属性,所以也就是只读属性
为什么不加上小括号就是因为相当于是直接调用get方法
这里就是对象的访问器属性
计算属性和methods的区别
就是在调用方法的时候,计算属性只要里面内容没有改变,那么里面的函数只会执行一次,但是methods里面的函数则是调用几次就执行几次。
所以一般在同时可以使用计算属性和methods的时候,会建议使用计算属性来优化性能。
只有在内部内容发生改变的时候,计算属性才会重新执行
为什么计算属性在里面内容没有改变的情况下只会执行一次呢?
这是因为计算属性会进行缓存,如果多次使用,计算属性只会调用一次
在es6之前的js中只有全局作用域和函数作用域,所以才会有闭包之类的问题
事件监听(v-on)
可以绑定函数,也可以绑定对象(用的很少),也可以直接写具体的操作步骤
@click==v-on:click
@就是v-on的语法糖
事件调用时,没有参数,可以省略小括号
有参数,有小括号,但是没有传入参数,那么形参就是undefined
如果有参数,没有小括号(当然也不会传入参数),那么参数就是点击的事件对象
如果有参数,还想获得事件对象,vue有固定格式,就是
e
v
e
n
t
,
就
是
在
参
数
变
量
前
面
加
上
event,就是在参数变量前面加上
event,就是在参数变量前面加上符号
v-on的修饰符
<button @click.stop="increment">+</button>
-
.stop修饰符阻止冒泡
-
.prevent阻止默认事件
-
.keyCode监听键盘上某个键的事件
例如:.enter监听回车键键的事件 -
.native监听组件根元素的原生事件
-
.once只触发一次回调
条件判断
-
v-if,后面是布尔值来决定要不要被渲染出来里面的元素
-
v-else,没有参数,只要v-if是false的时候,就显示v-else的内容
如果有多对是就近原则,一一匹配,如果else多于if,那么多于的else就一直不显示 -
v-else-if,参数就是一个判断,满足条件显示,不满足就换下一个
就和else if一样,逻辑判断复杂建议使用methods封装方法,直接返回内容,不建议在hmtl中使用这样的复杂逻辑判断