1. Vue 的基本知识
- 创建 vue 程序的时候需要使用一个变量来接受 Vue 实例，便于后期对其进行操作
let vm = new Vue({
el: "#app",
data: {
message: "yerts"
},
methods: {
myFunc: function() {
console.log("this is my function");
}
}
});
- 其中 data 对象是用来存放 Vue 实例身上的数据相关内容的
- methods 对象是用来存放 Vue 实例身上的方法相关内容的，记住 methods 内部的方法不能使用箭头函数定义
- methods 对象内部如果想要对 Vue 身上的数据进行访问的话必须要通过
this.来进行访问
- Vue 实例身上绑定的
el是用来选取 Vue 全局实例作用的区块的，其可以通过使用类选择器、id 选择器这两种选择方式来对作用域进行选择的
- Vue 实例中还有其他比较重要的实例对象，后期学习中将会了解到
- 一般在 Html 页面中通过插值表达式
{{ data中定义的变量名 }}将 vue 实例中的数据渲染到页面上
2. Vue 中的指令
什么是 Vue 中的指令
- Vue.js 的指令是以 v-开头的，它们作用于 HTML 元素，指令提供了一些特殊的特性，将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为，我们可以将指令看作特殊的 HTML 特性（attribute）
v-cloak 指令
- 可以解决插值表达式的闪烁问题
- 其实在页面加载的过程中 Vue 框架在操作 dom 是有一点延迟的，因此在加载的时候我们可能会看到没有经过 Vue 框架渲染过的内容
- 因此需要一个指令来对页面中的元素的显示效果起到一个阻隔的作用，就是说将一些用户不必看到的原始 dom 节点不显示出来，直到 dom 节点被渲染完成再呈现到用户页面
- v-cloak 指令就可以起到这种作用，他会将元素渲染阻隔，直到被渲染到 Vue 的虚拟 dom 之后才会显示出来
- 为了做到这一点，首先需要在我们想要阻隔的元素上面加上我们的 v-cloak 指令
- 其次在这个页面的样式中添加一个
[v-clock]{display:none}样式
- 这样就可以做到在被完全渲染出来之前显示
[v-clock]定义的样式
- 这里出现了一个新的选择器，叫做属性选择器
[v-clock]{display:none}这种选择器将会选中页面中带有 v-cloak 的元素，并对其样式进行改变
html 结构
<div id="app">
<div v-cloak>{{message}}</div>
</div>
css 样式
[v-cloak] {
display: none;
}
JavaScript 逻辑
let vm = new Vue({
el: "#app",
data: {
message: "yerts"
}
});
v-text 指令
- 用来渲染页面数据的，功能类似于插值表达式
- 可以通过在元素的属性中加入一个
v-text="data对象中定义的变量"来实现
- v-text 将会把数据渲染到元素中间，这时候就不用 v-cloak 来对其行为进行控制，也就是不会出现闪烁的情况
html 结构
<div id="app">
<!-- <div v-cloak>{{message}}</div> -->
<div v-text="message"></div>
</div>
JavaScript 逻辑
let vm = new Vue({
el: "#app",
data: {
message: "yerts"
}
});
- 在 v-text 属性绑定的元素中间不能加入其他内容的，因此没有插值表达式来的更灵活
v-html 指令
- 会将元素中间的内容解析为 html 元素，也就是说我们可以把一些直接在 data 对象内部定义并直接在页面中显示的内容用这个属性来进行渲染
<div id="app">
<!-- <div v-cloak>{{message}}</div> -->
<!-- <div v-text="message"></div> -->
<div v-html="htmlMessage"></div>
</div>
JavaScript 逻辑
let vm = new Vue({
el: "#app",
data: {
message: "yerts",
htmlMessage: "<h1> This is ture html script. </h1>"
}
});
v-bind 指令
- 用于将 data 对象内部的变量绑定到元素默认属性上面
- 例如元素有 style 属性，因此我们可以把一些样式存到 data 数据中并通过与 style 属性绑定进行渲染
<div id="app">
<!-- <div v-cloak>{{message}}</div>
<div v-text="message"></div>
<div v-html="htmlMessage"></div> -->
<div v-bind:style="myStyle">This one is use v-bind</div>
</div>
JavaScript 逻辑
let vm = new Vue({
el: "#app",
data: {
message: "yerts",
htmlMessage: "<h1> This is ture html script. </h1>",
myStyle: {
color: "red"
}
}
});
- 绑定到元素上的变量可以使用三元表达式，直接表达式，数组，对象等
使用三元表达式，数组绑定数据
<div id="app">
<!-- <div v-cloak>{{message}}</div>
<div v-text="message"></div>
<div v-html="htmlMessage"></div>
<div v-bind:style="myStyle">This one is use v-bind</div> -->
<div v-bind:style="[myStyle,myFlag?myNewStyle:'']">yerts</div>
</div>
javascrip
let vm = new Vue({
el: "#app",
data: {
message: "yerts",
htmlMessage: "<h1> This is ture html script. </h1>",
myStyle: {
color: "red"
},
myNewStyle: {
fontSize: "90px"
},
myFlag: true
}
});
v-on 指令
- 用于将一些方法绑定到元素的各种事件上面
- 可以绑定一般意义上的 web 事件
- 使用方法是
v-on:事件名称="触发的函数"例如：v-on:click="window.alert('yerts')"
- 可以简写为：
@
- 双击事件为：
dblclick,其他事件可以按需查询
- 我们自己定义的方法都存放在 Vue 实例中的 methods 对象身上
html 结构
<div id="app">
<!-- <div v-cloak>{{message}}</div>
<div v-text="message"></div>
<div v-html="htmlMessage"></div> -->
<div v-bind:style="myStyle" @dblclick="alert">This one is use v-bind</div>
<div v-bind:style="[myStyle,myFlag?myNewStyle:'']" @click="clickMe">
yerts
</div>
</div>
JavaScript
let vm = new Vue({
el: "#app",
data: {
message: "yerts",
htmlMessage: "<h1> This is ture html script. </h1>",
myStyle: {
color: "red"
},
myNewStyle: {
fontSize: "90px"
},
myFlag: true
},
methods: {
clickMe: function() {
this.myFlag = !this.myFlag;
},
alert: function() {
window.alert("yerts");
}
}
});
- 可以找一些有趣的事件，比如鼠标覆盖事件等
mouseover可以做到一些特殊的效果
v-model 指令
- v-model 指令可以实现双向数据绑定
- 也就是通过将一些数据绑定到元素的一些默认属性上面，当默认属性发生变化时数据内容也会发生变化
html 结构
<div id="app">
<!-- <div v-cloak>{{message}}</div>
<div v-text="message"></div>
<div v-html="htmlMessage"></div>
<div v-bind:style="myStyle" @dblclick="alert">This one is use v-bind</div>
<div v-bind:style="[myStyle,myFlag?myNewStyle:'']" @click="clickMe">yerts</div> -->
<div>
<div>{{slogan}}</div>
<input type="text" name="" id="" v-model:value="slogan" />
</div>
</div>
JavaScript
let vm = new Vue({
el: "#app",
data: {
message: "yerts",
htmlMessage: "<h1> This is ture html script. </h1>",
myStyle: {
color: "red"
},
myNewStyle: {
fontSize: "90px"
},
myFlag: true,
slogan: "yerts"
},
methods: {
clickMe: function() {
this.myFlag = !this.myFlag;
},
alert: function() {
window.alert("yerts");
}
}
});
3. 事件修饰符
- 作用在事件上面的修饰符，可以定义一些特殊的事件
-
.stop 阻止事件冒泡，也就是在点击嵌套元素的时候事件不会向外冒泡
-
.prevent 阻止事件的默认行为，比如 a 标签的点击事件有跳转链接的默认行为，.prevent就可以做到阻止默认行为
-
.capture 添加事件侦听器时使用此修饰符，也就是从元素的最外层开始向内部传递事件，就是当我们有一个嵌套元素的时候会先出发外层的，之后会再出发内层的
-
.self 实现只有点击当前元素时触发事件
-
.once 事件只触发一次
- 事件修饰符可以组合使用
4. Vue 中使用 class
- Vue 中可以通过像普通的标签里面添加 class 属性一样添加 class 属性，并将一些样式动态绑定
- 一般有四种方式可以做到 class 的动态绑定
- 第一种是通过数组来绑定
- 第二种是在数组内部使用三元表达式
- 第三种是在数组中使用对象
- 第四种是使用对象对 class 进行绑定
html
<div :class="['bold','mini','green']">直接用数组表示</div>
<div :class="['bold',myFlag?'mini':'']">在数组中使用三元表达式</div>
<div :class="['green',{mini:false}]">在数组中使用对象</div>
<div :class="{bold:myFlag,mini:'ture'}">直接用对象表示</div>
css
/* class绑定的样式内容 */
.green {
color: green;
}
.bold {
font-weight: 900;
}
.mini {
font-size: 10px;
}
javascript
let vm = new Vue({
el: "#app",
data: {
message: "yerts",
htmlMessage: "<h1> This is ture html script. </h1>",
slogan: "yerts",
myStyle: {
color: "red"
},
myNewStyle: {
fontSize: "90px"
},
myFlag: true
},
methods: {
clickMe: function() {
this.myFlag = !this.myFlag;
},
alert: function() {
window.alert("yerts");
}
}
});
5. Vue 中使用 style 内联样式
- 元素的 style 属性是控制元素的内联样式
- 有几种可以绑定行内样式的方法
- 第一种：直接在 style 上面绑定一个对象，并且把要写的样式写到对象内部
- 第二种：把要绑定的样式对象写到 data 对象内部，直接在 style 上面绑定
- 第三种：可以用数组来将一些不同的样式对象同时绑定到 style 上面
html
<div :style="[redFont,miniFont]">用数组绑定style属性</div>
<div :style="{color:'green','font-weight':900}">用对象绑定style属性</div>
<div :style="fontStyle">将data对象内部的数据作为样式绑定到style属性上面</div>
javascript
let vm = new Vue({
el: '#app',
data: {
message: "yerts",
htmlMessage: '<h1> This is ture html script. </h1>',
slogan: 'yerts',
myStyle: {
color: "red"
},
myNewStyle: {
fontSize: '90px'
},
myFlag: true,
redFont: {
color: 'red'
},
miniFont: {
'font-size': '10px'
},
fontStyle: {
'font-style': 'italic'
}
},
6. v-for 指令
- 用于迭代一些可以迭代的内容的，可以用 for 循环将要展示的内容渲染出来
- 迭代数组
- 迭代对象数组
- 迭代数字
- 迭代对象
- 必须要指定数组对象的 key 值，这样可以保证每个内容都有特定的值
- key 千万不能忘了需要绑定一个独一无二的值到 key 属性中
html
<label>迭代数组</label>
<div v-for="(people,index) in nameList" :key="index">
<li>{{people}}-----{{index}}</li>
</div>
<label>迭代对象数组</label>
<div v-for="info in moreInfo" :key="index">
<li>{{info.age}}------{{info.name}}</li>
</div>
<label>迭代数字</label>
<div v-for="num in 10" :key="index">
<li>{{num}}</li>
</div>
<label>迭代对象</label>
<div v-for="(value,key,index) in user" :key="index">
<li>键：{{key}}--------值：{{value}}--------索引：{{index}}</li>
</div>
javascript
nameList: [
'yerts', 'pary', 'you', 'me', 'mySon', 'myGirl'
],
moreInfo: [{
name: 'yerts',
age: 14
},
{
name: 'pary',
age: 15
},
{
name: 'you',
age: 18
},
{
name: 'me',
age: 20
},
{
name: 'mySon',
age: 32
},
{
name: 'myGirl',
age: 90
},
],
user: {
id: 1,
name: "yerts",
age: 12,
hobby: 'computer',
}
7. v-if 与 v-show 指令
- v-if 与 v-show 是用于判断条件渲染 dom 节点的指令
- v-if 在渲染节点的时候需要重新渲染，也就是说实实在在地从 dom 树上面删除或者添加 dom 节点
- v-if (有较高的切换性能要求)可以用在一些渲染性能要求比较高的场合，如果频繁的切换就不要用 if
- v-show 是在设置 dom 树的时候将 dom 节点的 style 属性中把 display 属性设置为 none，也就是说我们的节点依然在 dom 树上面
- 只不过是我们将他隐藏起来的而已
- v-show (有较高的初始渲染性能要求)可以用于切换性能要求比较高的场合，如果频繁的渲染就不要用 show
- 在使用的时候首先会判断 v-if，v-show 所对应的内容，如果是否的话就不会渲染这一部分
- 如果某些元素可能永远都不会显示出来，那就可以使用 v-if
html
<div v-if="myFlag">
这是用于展示v-if的内容
</div>
<div v-else="myFlag">
这是用于展示v-else的内容
</div>
<div v-show="!myFlag">
这是用于展示v-show的内容
</div>
