1.插值表达式
我们刚刚接触vue，便接触了vue插值表达式({ {}})：
<!DOCTYPE html>
<html>
<body>
<div id="app">
<div>{
{name}}</div>
</div>
</body>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
let app = new Vue({
el:"#app",
data:{
name:"GHUI"
}
})
</script>
</html>
- 注意项： 在html页面上只能展示字符串，console.log()打印出的也是字符串，意味着都会调用toString()方法，但实际上控制台展示的既有数组又有对象等类型，那是由于浏览器会进行处理
- 用法： 使用在vue实例对象对应的DOM元素的html的正反标签之间
- 支持匿名变量
- 支持三目运算符
- 数值
- 支持四则运算
- 支持比较运算符
- 支持数值类型的一些内置方法
- 数组
- 支持数组的索引取值方法
- 对象：支持对象的属性
- window内置对象的Math的属性和方法：如果data中也有一个Math，那么vue对象的数据仓库优先级最高
如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="./vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 字符串 -->
<p>{
{ str }}</p> <!--页面展示：字符串-->
<p>{
{ num + 'aaa'}}</p><!--页面展示：1aaa-->
<p>{
{ str.length }}</p> <!--页面展示：3-->
<!-- 数值 -->
<p>{
{ num }}</p> <!--页面展示：1-->
<p>{
{ num+num1 }}</p> <!--页面展示：101-->
<p>{
{ num > num1 }}</p> <!--页面展示：false-->
<p>{
{ num.toFixed(2) }}</p> <!--页面展示：1.00-->
<!-- boolean -->
<p>{
{ flag }}</p> <!--页面展示：true-->
<p>{
{ !flag }}</p> <!--页面展示：false-->
<!-- 数组 -->
<p>{
{ arr }}</p> <!--页面展示：[1,2,3,4]-->
<p>{
{ arr[3] }}</p> <!--页面展示：4-->
<!-- 对象 -->
<p>{
{ obj }}</p> <!--页面展示：{ "name": "tom", "age": 20 }-->
<p>{
{ obj.name }}</p> <!--页面展示：tom-->
<!-- null/undefined/NaN -->
<p>{
{ arg1 }}</p> <!--页面展示：-->
<p>{
{ arg2 }}</p> <!--页面展示：-->
<p>{
{ arg3 }}</p> <!--页面展示：NaN-->
<!-- 三目运算符 -->
<p>{
{ num > num1 ? "是" : "否" }}</p> <!--页面展示：否-->
</div>
<script>
new Vue({
el:"#app",
data:{
str: '字符串',
num: 1,
num1:100,
flag: true,
arr: [1,2,3,4],
obj:{
name:'tom',
age:20
},
arg1: null,
arg2: undefined,
arg3: NaN
}
})
</script>
</body>
</html>2.v-once
- 该指令后面不需要跟任何表达式
- 该指令表示元素和组件只渲染一次，不会随着数据的改变而改变。
<!DOCTYPE html>
<html>
<body>
<div id="app">
<div>{
{name}}</div>
<div v-once>{
{sex}}</div>
</div>
</body>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
let app = new Vue({
el:"#app",
data:{
name:"GHUI",
sex:"男"
}
})
</script>
</html>
3.v-pre
- nv-pre用于跳过这个元素和它子元素的编译过程。
<!DOCTYPE html>
<html>
<body>
<div id="app">
<div>{
{name}}</div>
<div v-pre>{
{sex}}</div>
</div>
</body>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
let app = new Vue({
el:"#app",
data:{
name:"GHUI",
sex:"男"
}
})
</script>
</html>
4.v-cloak
在某些情况下，我们浏览器可能会直接显然出未编译的Mustache标签(需要配合css样式)。
<!DOCTYPE html>
<html>
<body>
<div id="app">
<div>{
{name}}</div>
<div v-cloak>{
{sex}}</div>
</div>
</body>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
let app = new Vue({
el:"#app",
data:{
name:"GHUI",
sex:"男"
}
})
</script>
</html>
CSS:
[v-cloak]{
display:none
}看效果：
5.v-bind(v-bin:attr 语法糖(简写)：:attr)
6.v-bind:class(:class)
- vue中，样式class绑定在开发中非常常用，很多时候我们需要根据不同的场景，去给目标元素绑定不同的样式。
- 若元素本来存在class属性，: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>7.计算属性
在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<body>
<div id="app">
<div>{
{name}}</div>
<div>{
{allname}}</div>
<div>{
{sex}}</div>
</div>
</body>
<script type="text/javascript">
let app = new Vue({
el:"#app",
data(){
return{
name:"GHUI",
sex:"男"
}
},
computed:{
allname(){
return "wu" + this.name
}
}
})
</script>
</html>
8.v-on(语法糖:@event)
9.v-on修饰符
10.条件渲染(v-if、v-else-if、v-else)
这三个指令与JavaScript的条件语句if、else、else if类似。
Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件。
v-if原理
v-if后面的条件为false时，对应的元素以及其子元素不会渲染。
也就是根本没有不会有对应的标签出现在DOM中。
案例展示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<body>
<div id="app">
<div v-if="score >= 90">优</div>
<div v-else-if="score >= 75">良</div>
<div v-else-if="score >= 60">中</div>
<div v-else-if="score >= 0">差</div>
<div v-else>输入有误</div>
</div>
</body>
<script type="text/javascript">
let app = new Vue({
el:"#app",
data(){
return{
score:-88
}
}
})
</script>
</html>
11.条件展示(v-show)
12.循环渲染(v-for)
13.双向数据绑定(v-model)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<body>
<div id="app">
<input type="text" v-model="name" name="" id="" value="" />
<div>{
{name}}</div>
</div>
</body>
<script type="text/javascript">
let app = new Vue({
el:"#app",
data(){
return{
score:-88,
name:"ghui"
}
}
})
</script>
</html>
14.v-model: radio
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<body>
<div id="app">
<label>
<input type="radio" name="sex" id="" v-model="sex" value="男" />
男
</label>
<label>
<input type="radio" name="sex" id="" v-model="sex" value="女" />
女
</label>
<div>性别:{
{sex}}</div>
</div>
</body>
<script type="text/javascript">
let app = new Vue({
el:"#app",
data(){
return{
score:-88,
name:"ghui",
sex:"未选择"
}
}
})
</script>
</html>
15.v-model:checkbox
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<body>
<div id="app">
<p>选择你喜欢玩的游戏：</p>
<label>
<input type="checkbox" v-model="list" name="" id="" value="天涯明月刀" />
天涯明月刀
</label>
<label>
<input type="checkbox" v-model="list" name="" id="" value="QQ飞车" />
QQ飞车
</label>
<label>
<input type="checkbox" v-model="list" name="" id="" value="王者农药" />
王者农药
</label>
<label>
<input type="checkbox" v-model="list" name="" id="" value="刺激战场" />
刺激战场
</label>
<p>你的选择：{
{list}}</p>
</div>
</body>
<script type="text/javascript">
let app = new Vue({
el:"#app",
data(){
return{
score:-88,
name:"ghui",
sex:"未选择",
list:[]
}
}
})
</script>
</html>
16.v-model:select
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<body>
<div id="app">
<select name="" v-model="list">
<option value="草莓">草莓</option>
<option value="苹果">苹果</option>
<option value="橘子">橘子</option>
<option value="选择你喜欢的水果" hidden selected="selected" >选择你喜欢的水果</option>
<option value="香蕉">香蕉</option>
</select>
<p>你的选择：{
{list}}</p>
</div>
</body>
<script type="text/javascript">
let app = new Vue({
el:"#app",
data(){
return{
score:-88,
name:"ghui",
sex:"未选择",
list:"选择你喜欢的水果"
}
}
})
</script>
</html>
17.v-model修饰符
lazy修饰符
- 默认情况下，v-model默认是在input事件中同步输入框的数据的。
- 也就是说，一旦有数据发生改变对应的data中的数据就会自动发生改变。
- lazy修饰符可以让数据在失去焦点或者回车时才会更新。
number修饰符：
- 默认情况下，在输入框中无论我们输入的是字母还是数字，都会被当做字符串类型进行处理。
- 但是如果我们希望处理的是数字类型，那么最好直接将内容当做数字处理。
- number修饰符可以让在输入框中输入的内容自动转成数字类型。
trim修饰符
- 如果输入的内容首尾有很多空格，通常我们希望将其去除。
- trim修饰符可以过滤内容左右两边的空格。