共计 5996 个字符，预计需要花费 15 分钟才能阅读完成。
Vue 基本语法和组件传参
基本语法
Vue 是一个 MVVM 的框架, 数据驱动和 组件化是 Vue 的核心思想。简单的讲 MVVM 框架就是：我们只需要在数据层做数据操作，显示层会检测到我们每次的数据变化，然后做出相应的改变，监测数据这个工作就是中间的 ViewModel。通过这种模式，我们就可以不用再直接操作 DOM 节点来进行数据的改变。
一、插值
{{data}} 在模板里可以实现 data 数据的展示，如果 data 数据改变，展示的数据也会响应式的改变。响应式的改变意味着我们不需要强制刷新页面就可以实现数据的变化。这种语法为请输入代码 Mustache 语法
<template>
<div class=”main”>
<h3> 这里是 title 的值：{{title}}</h3>
</div>
</template>
export default {
name:’phonerisk’,
data(){
return{
title:’testTitle’
}
}
}
网页上就会显示出来 data 里面 title 的值。
二、v-html
v-html 可以将一段 HTML 的代码字符串输出成 HTML 片段而不是普通的文本。
<template>
<div class=”main”>
<p > 这里是 <span v-html=’html’></span></p>
</div>
</template>
export default {
name:’phonerisk’,
data(){
return{
html:'<span style=”color:blue;font-size:23px;”>v-if</span>’
}
}
}
网页上将 html 字符串渲染成颜色为蓝色的普通文本。
v-bind
Mustache·语法不能用于 HTML 上，所以我们需要绑定一些属之类的需要使用 v -bind。v-bind 就是将 data 里面的数据绑定到 HTML 上面，从而实现属性的变化。
<template>
<div class=”main”>
<img :src=”imgUrl” />
</div>
</template>
export default {
name:’phonerisk’,
data(){
return{
imgUrl:”../../static/img/KFC.e66b2f8e.png”
}
}
}
v-bind 可以简写成 :
三、v-model
v-model 是用于表单输入的数据双向绑定。所谓双向绑定就是视图层的数据变化会引起数据层数据的改变，相反的，数据层的变化也会导致视图层展示数据的变化。
<template>
<div class=”main”>
<input type=”text” v-model=”name”>
{{name}}
<button @click=’changeName’> 改变名字 </button>
</div>
</template>
export default {
name:’phonerisk’,
data(){
return{
name:’ 小明 ’
}
},
methods:{
changeName(){
this.name = “ 小花 ”;
}
}
}
input 输入框绑定 name, 输入框初始显示‘小明’, 在输入框里更改信息的时候，name 同时发生改变，点击按钮改变 name 数值的时候，输入框里面的数据同时发生改变。
四、v-on
v-on 用于监听 DOM 事件，如按钮的点击事件、双击事件等。v-on 的简写为 @, 如下面的 @click 就等价为 v-on:click。
template>
<div class=”main”>
<button @click=’yes’> 你敢点我吗？</button>
</div>
</template>
methods:{
yes(){
alert(“ 我有啥不敢的！！！”);
}
}
这个案例是监听按钮的点击事件，点击之后调用 yes 函数，然后弹出警告框。
在平时的开发过程中我们可能会使用到 event.preventDefault() 或者 event.stopPropagation() 來阻止事件的继续传播，但是这个是直接操作 DOM 节点，不符合 Vue 的思想。所以 Vue 采用修饰符来进行相关的操作。下面我例举几个常用的，如了解更过，可以查看 Vue 的官网进行更详细的学习。
.stop
没有加修饰符
<div class=”main” @click=”div”>
<button @click.stop=’yes’> 你敢点我吗？</button>
</div>
methods:{
yes(){
alert(“ 我有啥不敢的！！！”);
},
div(){
alert(“ 我会 DIV”);
}
}
效果如下图：
加了 .stop 修饰符之后的效果
<button @click.stop=’yes’> 你敢点我吗？</button>
效果如下图：.stop 修饰符阻止了事件的继续传播，所以子节点的 click 事件没有冒泡到父节点，所以 div 的点击监听没有监听到内容。
.prevent
没有加修饰符
<form @submit=”onSubmit”>
<button @click=”onSubmit”> 提交 </button>
</form>
运行结果如下图：
加了 .prevent 修饰符之后的效果
<form @submit.prevent =”onSubmit”>
<button @click=”onSubmit”> 提交 </button>
</form>
.prevent 提交表单之后页面不在重新渲染。可以看到没加修饰符的时候页面重新加载，但是在加修饰符之后，页面不在重新加载。
.keyup
<input v-on:keyup.13=”submit”>
<input @keyup.enter=”submit”>
绑定到输入框里，可以直接按 enter 键就出发提交的方法，和点击提交按钮一样的效果，官网还提供了其他按键的别名
五、v-if
v-if 用于做条件化的渲染，当组件的判断条件发生改变，这个组件会被销毁并重建。
<template>
<div class=”main”>
<span v-if=”display”> 我叫 001</span>
<span v-if=”!display”> 我叫 002</span>
<button @click=”changeShow”> 切换 </button>
</div>
</template>
“`javascript
data(){
return{
display:true
}
},
methods:{
changeShow(){
this.display = !this.display;
},
}
“`
运行结果如下图：
v-if 绑定的变量为 true 的时候，其所在的元素会被渲染出来，反之亦然。
六、v-else、v-else-if
v-else 和 C 语言中的 else 一样的语法效果。如果条件变量不满足 v-if , 则执行 <v-else> 的内容
<div class=”main”>
<span v-if=”display”> 我叫 001</span>
<span v-else> 我叫 002</span>
<button @click=”changeShow”> 切换 </button>
</div>
运行效果和上图一致。
v-else-if 是 Vue2.1.0 版本新增的一个属性。v-else-if 必须用在 v-if 和 v-else 之间才有效果。
<template>
<div class=”main”>
<span v-if=”display === 1″> 我叫 001</span>
<span v-else-if=”display === 2″> 我叫 002</span>
<span v-else> 我叫 003</span>
<button @click=”changeShow”> 切换 </button>
</div>
</template>
data(){
return{
display:1
}
},
methods:{
changeShow(){
this.display = (this.display + 1)%3;
},
}
运行结果如下图：
七、v-show
v-show 是切换元素的 display 属性的。
<template>
<div class=”main”>
<span v-show=”display”> 我叫 001</span>
<span v-show=”!display “> 我叫 002</span>
<button @click=”changeShow”> 切换 </button>
</div>
</template>
data(){
return{
display:true
}
},
methods:{
changeShow(){
this.display = !this.display;
},
}
运行效果如下图：
八、v-for
v-for 用于多次渲染同一模板或者元素。
<div class=”main”>
<ul v-for=”(name, index) in names” :key=”index”>
<li>{{index}}、我的名字叫{{name}}</li>
</ul>
</div>
data(){
return{
names:[‘jack’,’joe’,’Nancy’, ‘lily’]
}
},
运行结果如下图：
v-for 多次渲染了 li 里面的内容，循环遍历了 names 数组，并将结放入 {{name}} 里面。
九、v-once
v-once 只渲染元素和组件一次，如果内容改变，也会将元素、组件视为静态元素跳过。
<div class=”main”>
<!– 单个元素 –>
<span v-once>This will never change:{{msg}}</span>
<!– 有子元素 –>
<div v-once>
<span>comment:::</span>
<span>{{msg}}</span>
</div>
<!– 循环 –>
<ul>
<li v-for=”i in names” v-once :key=”i”>{{i}}</li>
</ul>
<hr>
<span>This will change:</span>
<!– 单个元素 –>
<span>This will never change:{{msg}}</span>
<!– 有子元素 –>
<div >
<span>comment:::</span>
<span>{{msg}}</span>
</div>
<!– 循环 –>
<ul>
<li v-for=”i in names” :key=”i”>{{i}}</li>
</ul>
<button @click=”changValue”>testChange</button>
</div>
data() {
return {
msg: 111,
names: [“jack”, “joe”, “Nancy”, “lily”]
};
},
methods: {
changValue() {
this.msg += 111;
this.names[2] = “web”;
}
}
运行效果如下图：
在点击按钮后, msg 会增加，但是上面有 v -once 指令的元素等则不会重新渲染。
十、v-if 和 v -show 的区别
前面讲了 v -if 和 v-show, 两个指令都是用在元素之间的显示和隐藏的切换，那么，这两个指令究竟有什么不同呢？接下来我将用一个示例来讲解他们之间的差异。
<template>
<div class=”main”>
<h3>v-if</h3>
<div class=”content” v-if=”display”>1</div>
<div class=”content” v-else>2</div>
<h3>v-show</h3>
<div class=”content” v-show=”display”>1</div>
<div class=”content” v-show=”!display”>2</div>
<h3> 对比 </h3>
<div class=”content”>1</div>
<div class=”content”>2</div>
<button @click=”changeValue”> 点击我啦 </button>
</div>
</template>
data() {
return {
display: true
};
},
methods: {
changeValue() {
this.display = !this.display;
}
}
.content {
display: inline-block;
width: 100px;
height: 100px;
border: solid 1px black;
background-color: red;
}
.content + .content {
margin-left: 20px;
}
运行效果如下图：
从上图我们可以看出当 display 为 false 的时候，v-if 和 v -show 显示位置不一样。
首先我们解读一下这个代码的 css:content 类设置了 div 的长宽和背景色，dispaly 属性为 inline-block, .content + .content 设置了如果有两个 content 类在一起的时候，后面一个的左边距为 20 个像素。
在 dispaly 为 true 的时候，两个 div 都靠左显示。
在 display 为 false 的时候，上面的 div 在原来的位置重新渲染，但是下面的 div 却有一个 20 像素的左边距。
所以 v -if 渲染的时候，不会将不符合条件的元素加载到 DOM 树里面，而 v -show 则会将所有的节点都加载到 DOM 树，然后根据条件，更改节点的 display 属性，生成不同的渲染树。一般来说，v-if 需要更高的开销，每次都会改变 DOM 树，但是 v -show 只需要改变元素的 display，开销更低。
十一、v-for 和 v -if 优先级问题
当 v -for 和 v -if 在同一个蒜素里的时候，前者比后者有更高的优先级，所以我们在开发中一定要注意优先级的问题。
如果我们是想有条件的跳过循环中的某些项的时候：
<template>
<div class=”main”>
<ul >
<li v-for=”(count, index) in counts” :key=”index” v-if=”count >30″>
{{index + 1}}、我花费了 {{count}} 元
</li>>
{{index + 1}}、我花费了 {{count}} 元
</li>
</ul>
</div>
</template>
data() {
return {
counts:[11,22,33,44,55,66]
};
运行结果如下图：
跳过了 count 小于 30 的项
2. 如果我们是打算有条件的跳过循环的话那么我们应该将判断写在循环的外面，先判断条件。
<template>
<div class=”main”>
<ul v-if=”counts.length >3″>
<li v-for=”(count, index) in counts” :key=”index”>
{{index + 1}}、我花费了 {{count}} 元
</li>
</ul>
</div>
</template>
运行结果如下图：
至此，讲完了 Vue 的基本语法 …… 撒花✿✿ヽ (°▽°) ノ✿
