插值操作
mustache
mustache翻译为中文的意思是 胡须、胡子 的意思 {{ }}
这里再简单说一下他的用法
<div id="app">
<!-- 插入标签和文字一块使用 -->
<h1>hello {{name}}</h1>
<!-- 两个mustache -->
<h2>{{name}} {{age}}</h2>
<!-- 使用表达式 -->
<h3>{{age * 6}}</h3>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
name: 'vue',
age: 18
}
})
</script>
注意:mustache语法内部不能放语句,官网给出的例子是这样
<!-- 这是语句,不是表达式 -->
{{ var a = 1 }}
<!-- 流控制也不会生效,请使用三元表达式 -->
{{ if (ok) { return message } }}
v-once
在某些情况下,我们可能不希望界面随意的跟随改变
这个时候,我们就可以使用一个Vue的指令 v-once:
该指令后面不需要跟任何表达式 (不像之前的v-for后面是跟表达式的)
该指令表示元素和组件(组件后面才会学习)只渲染一次,不会随着数据的改变而改变。代码如下:
<div id="app">
<h2 v-once>{{name}}</h2> //只会渲染一次,不会修改
</div>
<script>
let app = new Vue({
el: '#app',
data: {
name: 'vue',
age: 18
}
})
</script>
v-html
某些情况下,我们从服务器请求到的数据本身就是一个HTML
代码如果我们直接通过{{}}来输出,会将HTML代码也一起输出。
但是我们可能希望的是按照HTML格式进行解析,并且显示对应的内容。
如果我们希望解析出HTML展示可以使用v-html指令
该指令后面往往会跟上一个string类型
会将string的html解析出来并且进行渲染
<div id="app">
<div>{{baidu}}</div>
<div v-html="baidu">
</div>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
baidu: '<a href="www.baidu.com">百度</a>',
}
})
</script>
v-text
v-text作用和Mustache比较相似:
- 都是用于将数据显示在界面中,但是这个变量会把里面其他的东西覆盖掉
例如这个标签里面有其他的文字,
-
这些文字就会被覆盖掉v-text通常情况下,
-
接受一个string类型
<div id="app">
<div v-text="smile">哈哈</div>
</div>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
smile: '笑什么',
}
})
</script>
v-pre
v-pre用于跳过这个元素和它子元素的编译过程,用于显示原本的Mustache语法。
比如下面的代码:第一个h2元素中的内容会被编译解析出来对应的内容
第二个h2元素中会直接显示{{message}}
<div id="app">
<div v-pre>{{smile}}</div>
</div>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
smile: '笑什么',
}
})
</script>
v-cloak
cloak: 斗篷
在某些情况下,我们浏览器可能会直接显然出未编译的Mustache标签。
有些情况下,我们希望某个标签,在刚开始的时候不解析,我们可以加上cloak
表示,没有解析到下面的data的时候不展示这个标签
只有解析到下面的标签的时候这个cloak才会消失,标签也就会展示
前面也说过,vue会先把本来的标签显示在页面
本来的标签里面可能大多数是{{}} 这种mustache语法
<div id="app">
<div v-cloak>hello {{world}}</div>
</div>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
world: '世界',
}
})
</script>
绑定属性
上面的属性属于插值操作,场景主要是将获取到的数据放到页面展示,但是有时候我们希望某些值是动态的,我们就可以用v-bind来进行动态绑定。
比如 a标签的href属性
img 的src属性
v-bind
v-bind绑定属性
作用:动态绑定属性
缩写::
预期:any (with argument) | Object (without argument)
参数:attrOrProp (optional)
<div id="app">
<div v-cloak>hello </div>
<!-- 动态渲染图片,这个src是data里面的src -->
<img :src="src" alt="">
<!-- 官网中还有这种写法,也就是src也可以动态,但是这种场景用的不多 -->
<img v-bind:[link]="src" alt="">
</div>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
link: 'src',
src: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3355464299,584008140&fm=26&gp=0.jpg',
}
})
</script>
v-bind有一个对应的语法糖
也就是简写方式在开发中,我们通常会使用语法糖的形式
因为这样更加简洁。简写方式如下:
<img :src="src" alt="" />
//对比一下
<img v-bind:src="src" alt="" />
v-bind绑定class
很多时候,我们希望动态的来切换class
比如:当数据为某个状态时,字体显示红色。
当数据另一个状态时,字体显示黑色。
绑定class有两种方式:
对象语法
数组语法
对象语法的含义是:
class后面跟的是一个对象。
对象语法有下面这些用法:
用法一:直接通过{}绑定一个类
<h2 :class="{'active': isActive}">Hello World</h2> //控制是否显示这个类名
用法二:也可以通过判断,传入多个值
<h2 :class="{'active': isActive, 'line': isLine}">Hello World</h2>
用法三:和普通的类同时存在,并不冲突
注:如果isActive和isLine都为true,那么会有title/active/line三个类
<h2 class="title" :class="{'active': isActive, 'line': isLine}">Hello World</h2>
用法四:如果过于复杂,可以放在一个methods或者computed中
注:classes是一个计算属性
<h2 class="title" :class="classes">Hello World</h2>
给出一个用法四的例子
<div id="app">
<div :class="message">
哈哈
</div>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
isMain: true,
isHeader: false
},
computed: {
message: function (){
return {
header: true,
main: this.isMain && !this.isHeader
}
}
}
})
</script>
v-bind 绑定style
我们可以利用v-bind:style来绑定一些CSS内联样式。
在写CSS属性名的时候,比如font-size
我们可以使用驼峰式 (camelCase) fontSize
或短横线分隔 (kebab-case,记得用单引号括起来) ‘font-size’
绑定方式一:对象语法
<div id="app">
<!-- 如果是字符串加单引号 -->
<div :style="{color: 'red', fontSize: '40px'}">哈哈</div>
<!-- 如果是变量,什么都不用加 -->
<div :style="{color: color, fontSize: fontSize + 'px'}">嘿嘿</div>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
color: 'red',
fontSize: 40
},
})
</script>
绑定方式二:数组语法
包含计算属性写法,其实官网中vue对于计算属性很推崇,确实,在很多地方很方便。
<div id="app">
<div :style="[{color: 'red'}, {fontSize: '40px'}]">哈哈</div>
<div :style="[style]">嘿嘿</div>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
color: 'red',
fontSize: 40
},
computed: {
style: function (){
return {
color: 'red',
fontSize: '40px'
}
}
}
})
</script>
自定义指令
自定义指令,顾名思义,就是自己定义的指令,上面讲到的指令都是vue内部定义好的,但是在某个场景中或许我们需要自己定义指令,应用到某个特殊场景,自定义指令正好可以满足我们的需求。
举个自动聚焦的例子
directive:指令,命令
自定义指令的语法是
Vue.directive('指令名‘, 配置项)
使用自定义指令的时候 v-指令名
inserted 被指令绑定的元素插入到真实dom的时候自动执行(什么叫被指令绑定的元素?这个指令在哪用,就指的是谁)
全局指令
<div id="app">
<input type="text" v-haha="name">
</div>
<script>
//使用Vue.directive调用的指令,称为全局指令
Vue.directive('haha', {
// 里面是一个函数,第一个参数,是当前dom, 第二个参数是当前指令的信息
inserted(el, directive) {
console.log('元素插入', el, directive)
el.focus();
}
})
let app = new Vue({
el: '#app',
data: {
name: '王一'
},
})
</script>
使用该指令,页面加载的时候就可以自动获取焦点
局部指令
<div id="app">
<input type="text" v-focus="name">
</div>
<script>
let app = new Vue({
el: '#app',
data: {
name: '王一'
},
directives: {
// 指令名
'focus': {
inserted(el, directive) {
console.log('局部指令', el, directive)
el.focus();
}
}
}
})
</script>